/// Switch
///
/// @group form
///
/// @example scss - usage
///
///   @include k-Switch;
///
/// @example html
///
///   <div class="k-Switch">
///     <input id="input" type="checkbox" class="k-Switch__input" />
///     <label for="input" class="k-Switch__label">I agree</label>
///   </div>

@mixin k-Switch {
  // Font
  $font: 'light';
  $font-step: 0;
  $line-height: normal;
  $font-step-big: 3;

  // Colors
  $color: map-get($k-colors, 'font-1');
  $color-hover: map-get($k-colors, 'primary-1');
  $color-active: map-get($k-colors, 'primary-3');
  $background-color: map-get($k-colors, 'background-1');
  $background-color-checked: map-get($k-colors, 'primary-1');
  $background-color-disabled: map-get($k-colors, 'line-2');
  $border-color: map-get($k-colors, 'line-1');
  $border-color-hover: map-get($k-colors, 'primary-1');

  $switch-width: 50px;
  $switch-height: 25px;
  $border-size: 1px;
  $border-radius: 18px;

  $transition-duration: .2s;

  .k-Switch {
    display: flex;
    align-items: center;
    align-self: flex-start;

    margin: k-px-to-rem(10px) 0;
  }

  .k-Switch__label {
    position: relative;
    display: flex;
    align-items: center;
    align-self: flex-start;

    @include k-typographyFont($font);
    @include k-typographyFontSize($font-step, $line-height);
    color: $color;
    cursor: pointer;
    transition: color $transition-duration;

    &:hover {
      color: $color-hover;
    }

    &:active {
      color: $color-active;
    }

    &:before {
      box-sizing: border-box;
      display: inline-block;
      width: k-px-to-rem($switch-width);
      height: k-px-to-rem($switch-height);
      margin-right: k-px-to-rem(10px);

      content: '';
      background-color: $background-color;
      border: 1px solid $border-color;
      border-radius: k-px-to-rem($border-radius);

      transition: border-color $transition-duration,
                  background-color $transition-duration;
    }

    &:after {
      position: absolute;
      left: $border-size;
      top: $border-size;

      box-sizing: border-box;
      display: inline-block;
      width: k-px-to-rem($switch-height - $border-size * 2);
      height: k-px-to-rem($switch-height - $border-size * 2);

      content: '';
      background-color: $background-color;
      border: $border-size solid $border-color;
      border-radius: k-px-to-rem($switch-height);
    }

    .k-Switch__input:focus + &:before {
      border-color: $border-color-hover;
    }

    .k-Switch__input:checked + &:before {
      background: $background-color-checked;
      border-color: $border-color-hover;
    }

    .k-Switch__input:checked + &:after {
      left: k-px-to-rem($switch-width - $switch-height + $border-size);
    }

    .k-Switch__input:disabled + & {
      color: $background-color-disabled;
      cursor: not-allowed;

      &:before {
        background-color: $background-color-disabled;
        border-color: $background-color-disabled;
      }
    }
  }

  .k-Switch__label--big {
    @include k-typographyFontSize($font-step-big, $line-height);
  }

  .k-Switch__input {
    position: absolute;
    opacity: 0;
    cursor: pointer;

    &:disabled {
      cursor: not-allowed;
    }
  }
}