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

@mixin k-Checkbox {
  // Font
  $font: 'light';
  $font-step: -1; // 14px
  $line-height: normal;

  // Error
  $error-color: map-get($k-colors, 'error');
  $error-border-color: map-get($k-colors, 'error-3');

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

  $checkbox-size: k-px-to-rem(20px);
  $border-size: k-px-to-rem(2px);
  $icon: '~icons/checked.svg';
  $icon-disabled: '~icons/checked-disabled.svg';

  .k-Checkbox {
    @include k-typographyFont($font);
    @include k-typographyFontSize($font-step, $line-height);

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

  .k-Checkbox__label {
    display: inline-flex;
    align-items: flex-start;

    cursor: pointer;
    transition: color .2s;

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

      content: '';
      background-color: $background-color;
      border: $border-size solid $border-color;

      transition: border-color .2s, background-color .2s;
    }

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

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

    .k-Checkbox__input:checked:focus + &:before {
      box-shadow: 0 0 k-px-to-rem(3px) $background-color-checked;
    }

    .k-Checkbox__input:checked + &:before {
      background: $background-color-checked
                  url($icon)
                  no-repeat
                  center;
      border-color: $border-color-hover;
    }

    .k-Checkbox__input.is-error + & {
      border-color: $error-border-color;

      &:before {
        border-color: $error-border-color;
      }
    }

    .k-Checkbox__input.is-error:checked:focus + &:before {
      box-shadow: 0 0 k-px-to-rem(3px) $error-color;
    }

    .k-Checkbox__input.is-error:checked + &:before {
      background-color: $error-color;
      border-color: $error-color;
    }

    .k-Checkbox__input:disabled + & {
      cursor: not-allowed;

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

    .k-Checkbox__input:disabled:checked + &:before {
      background-image: url($icon-disabled);
    }
  }

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

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

  .k-Checkbox__link {
    color: $link-color;
    text-decoration: none;

    &:hover {
      color: $link-color;
      text-decoration: none;
    }

    &:active {
      color: $background-color-active;
      text-decoration: none;
    }
  }
}