/**
 * Copyright (c) 2021 OpenLens Authors
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of
 * this software and associated documentation files (the "Software"), to deal in
 * the Software without restriction, including without limitation the rights to
 * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 * the Software, and to permit persons to whom the Software is furnished to do so,
 * subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
 * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */


.Checkbox {
  --checkbox-color: var(--textColorPrimary); // tick color [√]
  --checkbox-color-active: var(--contentColor);
  --checkbox-bgc-active: var(--blue);

  flex-shrink: 0;

  &.theme {
    &-dark {
      // default
    }
    &-light {
      --checkbox-color-active: var(--blue);
      --checkbox-bgc-active: none;
    }
  }

  &:hover {
    input:not(:checked):not(:disabled) {
      ~ .tick:after {
        opacity: 1;
      }
    }
  }

  input[type="checkbox"] {
    display: none;
    &:checked {
      ~ .box {
        color: var(--checkbox-color-active);
        background: var(--checkbox-bgc-active);
        border-color: var(--checkbox-bgc-active);
        &:after {
          opacity: 1;
        }
      }
    }
    &:disabled {
      ~ .box {
        color: var(--checkbox-color);
      }
      ~ * {
        opacity: .5;
        pointer-events: none;
      }
    }
    &:not(:disabled) ~ * {
      cursor: pointer;
    }
  }

  .label {
    margin-right: $margin;
  }

  > .box {
    $boxSize: round(1.7 * $unit);

    position: relative;
    width: $boxSize;
    height: $boxSize;
    border-radius: 2px;
    color: var(--checkbox-color);
    border: 2px solid currentColor;
    flex-shrink: 0;

    &:after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 60%;
      border: 2px solid currentColor;
      border-top: 0;
      border-right: 0;
      transform: rotate(-45deg);
      opacity: 0;
    }

    + * {
      margin-left: .5em;
    }
  }
}