@import "../1-Helpers/variables";
@import "../2-Tools/transitions";

$checkboxDimension: 20px;
$baseTransform: translate(-50%, -70%) rotate(-45deg);
$transition: $transition-fast-out;

input[type="checkbox"] {
  display: inline-block;
  cursor: pointer;
  position: relative;
  margin-right: 5px;
  width: $checkboxDimension;
  height: $checkboxDimension;

  & + label {
    display: inline-block;
    cursor: pointer;
    transform: translateY(-4px);
  }

  &::before {
    content: "";
    width: $checkboxDimension;
    height: $checkboxDimension;
    background-color: #e6e6e6;
    position: absolute;
    left: 0;
    top: 0;
    // border: 1px solid $primary-color;
    border-radius: 3px;
    transition: $transition;
  }

  // &.outline {
  //     &::before {
  //         border: 1px solid $primary-color;
  //     }
  // }

  &::after {
    content: "";
    width: 9px;
    height: 4px;
    border: 2px solid $primary-color;
    border-top-color: transparent;
    border-right-color: transparent;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: $baseTransform scale(0);
    transition: $transition;
  }

  &:checked {
    &.fill {
      &::before {
        background-color: $primary-color;
      }

      &::after {
        border-color: white;
        border-top-color: transparent;
        border-right-color: transparent;
      }
    }

    &::after {
      transform: $baseTransform scale(1);
    }
  }

  &.switch {
    $padding: 2px;
    $thumbSize: 12px;
    $borderSize: 1px;
    $inactiveColor: $secondary-color;
    $totalPadding: 2 * ($padding + $borderSize);
    $width: ($thumbSize * 2) + $totalPadding + ($borderSize);
    $height: $thumbSize + $totalPadding;

    width: $width;
    height: $height;

    &::before {
      width: 100%;
      height: $height - (2 * $borderSize);
      border: $borderSize solid $inactiveColor;
      border-radius: 1000px;
    }

    &::after {
      width: $thumbSize;
      height: $thumbSize;
      border-radius: 50%;
      position: absolute;
      left: $padding + $borderSize;
      top: 50%;
      border: none;
      transform: translate(0, -50%) scale(1);
      background-color: $inactiveColor;
    }

    &:checked {
      &::before {
        background-color: $green;
        border-color: transparent;
      }

      &::after {
        background-color: white;
        transform: translate($thumbSize + $padding, -50%) scale(1);
      }
    }
  }
}