@import "~@kaizen/design-tokens/sass/color";
@import "~@kaizen/design-tokens/sass/border";
@import "~@kaizen/design-tokens/sass/spacing";
@import "~@kaizen/design-tokens/sass/animation";
@import "~@kaizen/component-library/styles/mixins/forms";
@import "../../variables";

$animation-timing: $animation-duration-immediate
  $animation-easing-function-linear;
$focus-ring-offset: 1px;

.checkbox {
  @include form-input-visually-hidden;
}

.track {
  position: relative;
  background-color: $color-gray-500;
  border: $border-borderless-border-width $border-borderless-border-style
    $border-borderless-border-color;
  border-radius: $spacing-md;
  box-sizing: content-box;
  width: calc((#{$spacing-md} * 1.05) * 2);
  height: calc(#{$spacing-md} * 1.25);
  padding: 0 calc(#{$spacing-md} * 0.15);
  display: flex;
  align-items: center;
  transition: background-color $animation-timing;

  .checkbox:focus:not([disabled]) + &,
  .checkbox:hover:focus:not([disabled]) + & {
    border-color: transparent;
    outline: 2px solid $color-blue-500;
    outline-offset: $focus-ring-offset;
    background-color: $color-gray-600;
  }

  @media (hover: hover) and (pointer: fine) {
    .checkbox:not([disabled]) + &:hover,
    label:hover .checkbox:not([disabled]) + & {
      // if kz-color-iron-500-rgb-params fails, it will fallback to wisteria-500
      // (the non-css variable token)
      background-color: $color-purple-500;
      background-color: $color-gray-600;
    }
  }
}

.thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: $color-white;
  border: $border-borderless-border-width $border-borderless-border-style
    $border-borderless-border-color;
  box-sizing: content-box;
  width: calc(#{$spacing-md} * 0.9);
  height: calc(#{$spacing-md} * 0.9);
  border-radius: $spacing-md;
  transition:
    left $animation-timing,
    right $animation-timing;
}

.checkIcon {
  color: $color-green-500;
  opacity: 0%;
  transition-duration: $animation-duration-rapid;
}

/* stylelint-disable no-descending-specificity */
.on {
  .checkbox + .track {
    border-color: $border-borderless-border-color;
    background-color: $color-green-500;
  }

  .checkbox:focus:not([disabled]) + .track {
    border-color: transparent;
    background-color: $color-green-500;
  }

  .thumb {
    position: relative;
    right: auto;
    left: calc(#{$spacing-md} * 1.1);

    &[dir="rtl"],
    [dir="rtl"] & {
      right: calc(#{$spacing-md} * 1.1);
      left: auto;
    }
  }

  .checkIcon {
    opacity: 100%;
    transition-delay: $animation-duration-immediate;
    transition-duration: $animation-duration-fast;
  }

  @media (hover: hover) and (pointer: fine) {
    .checkbox:not([disabled]) + .track:hover,
    label:hover & .checkbox:not([disabled]) + .track {
      background-color: $color-green-600;
    }
  }
}

.off {
  .thumb {
    position: relative;
    right: auto;
    left: calc(#{$spacing-md} * -0.05);

    &[dir="rtl"],
    [dir="rtl"] & {
      right: calc(#{$spacing-md} * -0.05);
      left: auto;
    }
  }
}

.reversed {
  .checkbox:focus:not([disabled]) + .track,
  .checkbox:hover:focus:not([disabled]) + .track {
    outline-color: $color-blue-300;
  }

  &.off {
    .track {
      background-color: rgba($color-white-rgb, 0.2);
    }

    .checkbox:focus:not([disabled]) + .track,
    .checkbox:hover:focus:not([disabled]) + .track {
      background-color: rgba($color-white-rgb, 0.65);
    }

    @media (hover: hover) and (pointer: fine) {
      .checkbox:not([disabled]) + .track:hover,
      label:hover & .checkbox:not([disabled]) + .track {
        background-color: rgba($color-white-rgb, 0.65);
      }
    }
  }
}
/* stylelint-enable no-descending-specificity */