/// Radio button
///
/// Available size modifiers:
/// - `.k-RadioButton__label--large`
/// - `.k-RadioButton__labelContents--large`
///
/// @group form
///
/// @example scss - usage
///
///   @include k-RadioButton;
///
/// @example html
///
///   <div class="k-RadioButton">
///    <input id="karl-radio-button-1"
///           type="radio"
///           name="karl-radio-button"
///           class="k-RadioButton__input" />
///    <label for="karl-radio-button-1" class="k-RadioButton__label">
///      Default
///    </label>
///  </div>

@mixin k-RadioButton {
  // Font
  $label-font: 'light';
  $label-large-font: 'regular';

  $font-step: -1; // 14px
  $font-step-on-media: 2; // 20px
  $font-step-content: -2; // 12px
  $font-step-content-large: -1; // 14px

  $line-height: normal;

  $border-size: k-px-to-rem(2px);

  // 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');
  $checked-background-color: map-get($k-colors, 'primary-1');
  $active-background-color: map-get($k-colors, 'primary-3');
  $disabled-background-color: map-get($k-colors, 'line-1');
  $border-color: map-get($k-colors, 'line-1');
  $border-color-hover: map-get($k-colors, 'primary-1');

  // Background-image
  $input-checked: '~icons/input-checked.svg';
  $disabled-input-checked: '~icons/input-checked-disabled.svg';
  $background-size: k-px-to-rem(6px);

  $radio-button-size: k-px-to-rem(16px);
  $space-button-label: k-px-to-rem(10px);
  $border-radius: 50%;

  $transition-duration: .1s;

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

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

    display: inline-flex;
    align-items: center;
    align-self: flex-start;

    cursor: pointer;
    transition: color ($transition-duration * 2);

    &:before {
      box-sizing: border-box;
      display: inline-block;
      flex-shrink: 0;
      width: $radio-button-size;
      height: $radio-button-size;
      margin-right: $space-button-label;

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

      transition: border $transition-duration;
    }

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

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

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

    .k-RadioButton__input:checked + &:before {
      position: relative;

      background: $checked-background-color
                  url($input-checked)
                  no-repeat
                  center center;
      background-size: $background-size;
      border: $border-size solid $checked-background-color;
    }

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

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

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

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

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

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

    .k-RadioButton__input.is-error:checked + &:before {
      position: relative;

      background: $error-color
                  url($input-checked)
                  no-repeat
                  center center;
      background-size: $background-size;
      border: $border-size solid $error-color;
    }
  }

  .k-RadioButton__label--large {
    @include k-typographyFont($label-large-font);
    @include k-typographyFontSize($font-step-on-media);
  }

  .k-RadioButton__labelContents {
    display: block;
    margin-left: $radio-button-size + $space-button-label;

    @include k-typographyFont($label-font);
    @include k-typographyFontSize($font-step-content);
  }

  .k-RadioButton__labelContents--large {
    @include k-typographyFontSize($font-step-content-large);
  }

  .k-RadioButton__label--withContents {
    @include k-typographyFont($label-large-font);
  }

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

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