/**
* @name Radios
* @description Radio buttons are used to provide a list of options where only a single item can be selected. Traditional desktop radio buttons are not optimized for touch input so the Collab UI Toolkit styles the label for the radio buttons so they are larger and look clickable. There are several ways to add styled checkboxes to your application, including a custom Angular directive and custom Formly templates. Choose the solution that works best for your application.
* @category controls
* @component radio
* @design collaboration-design
*/

@import '../settings/core';
@import '../settings/radios';
@import '../settings/focus';
@import '../settings/form-controls';
@import '../tools/functions/core';
@import '../tools/mixins/border-radius';
@import '../tools/mixins/flex';
@import '../tools/mixins/input';
@import '../tools/mixins/radio';
@import '../tools/mixins/spacing-responsive';
@import 'node_modules/@collabui/icons/scss/mixins';

@include exports('cui-radio') {
  .#{$radio__class}-group {
    @include vr-spacing(mb, 1.5);

    &:last-child {
      margin-bottom: 0;
    }
  }

  .#{$radio__class} {
    @include radio-color(
      $border-color: $input__border-color,
      $background-color: $input__background,
      $background-color--disabled: $form-control__background,
      $background-color--hover: $input__background--hover,
      $background-color--checked: $form-control__background--checked,
      $background-color--checked-hover: $form-control__background--checked-hover,
      $label-color: $form-control__label
    );

    .#{$radio__class}__input {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      border: 0;

      &:checked {
        + .#{$radio__class}__label {
          &:before {
            color: $form-control__content;
            cursor: pointer;
          }
        }
      }

      &:disabled,
      &.disabled {
        + .#{$radio__class}__label {
          cursor: default;
          opacity: $form-control__opacity--disabled;

          &:before {
            cursor: default;
          }
        }
      }
    }

    .#{$radio__class}__label {
      display: flex;
      line-height: $radio__size;
      color: $form-control__label;
      cursor: pointer;

      &:before {
        @include flex();
        @include border-radius(50%);
        @include icon-unread-badge_8;

        flex-shrink: 0;
        width: $radio__size;
        height: $radio__size;
        margin-right: rem-calc(12);
        font-family: $icon-font-name;
        font-size: $radio__icon-size;
        font-style: normal;
        line-height: $radio__icon-size;
        color: transparent;
        border: none;
        transition: 0ms ease-in-out all;
      }
    }

    &.#{$prefix}-input-group {
      @include vr-spacing(mb, 0.5);

      display: flex;
      flex-direction: column;
    }
  }

  .#{$dark-class} {
    .#{$radio__class} {
      @include radio-color(
        $border-color: $form-control__background-border--focus--dark,
        $background-color: $form-control__background--dark,
        $background-color--hover: $form-control__background--hover--dark,
        $background-color--checked: $form-control__background--checked--dark,
        $background-color--checked-hover: $form-control__background--checked-hover--dark,
        $label-color: $form-control__label--dark
      );
    }
  }

  .#{$input__class--filled},
  .#{$client-class} {
    .#{$radio__class} {
      @include radio-color(
        $border-color: $input__border-color--filled,
        $background-color: $form-control__background,
        $background-color--disabled: $form-control__background,
        $background-color--hover: $form-control__background--hover,
        $background-color--checked: $form-control__background--checked,
        $background-color--checked-hover: $form-control__background--checked-hover,
        $label-color: $form-control__label
      );
    }
  }

  .#{$client-class}.#{$dark-class} ,
  .#{$client-class} .#{$dark-class},
  .#{$dark-class} .#{$input__class--filled},
  .#{$dark-class}.#{$input__class--filled} {
    .#{$radio__class} {
      @include radio-color(
        $border-color: $input__border-color--filled,
        $background-color: $form-control__background--dark,
        $background-color--disabled: $form-control__background--dark,
        $background-color--hover: $form-control__background--hover--dark,
        $background-color--checked: $form-control__background--checked--dark,
        $background-color--checked-hover: $form-control__background--checked-hover--dark,
        $label-color: $form-control__label--dark
      );
    }
  }

  .#{$radio__class}-horizontal {
    display: inline-block;
    margin-right: 20px;
  }

  .form-horizontal .#{$radio__class}-horizontal {
    padding-top: 6px;
  }

  .#{$radio__class}-help {
    .#{$prefix}-input__help-text {
      @include input__help-text();
    }

    @include vr-spacing(pl, 2);
  }
}

/*
* @component radio
* @section default
* @html

<div class="cui-input-group cui-radio">
  <input type="radio" class="cui-input cui-radio__input" id="basicRadio1" name="basicRadio" checked>
  <label class="cui-radio__label" for="basicRadio1">
    <span>Basic Radio 1</span>
  </label>
</div>
<div class="cui-input-group cui-radio">
  <input type="radio" class="cui-input cui-radio__input" id="basicRadio2" name="basicRadio">
  <label class="cui-radio__label" for="basicRadio2">
    <span>Basic Radio 2</span>
  </label>
</div>
*/


/*
* @component radio
* @section disabled
* @html

<div class="radio-states medium-4 columns">
    <div class="radio-states">
      <div class="off-disabled">
       <div class="cui-input-group cui-radio">
          <input type="radio" value="off-disabled-state" class="cui-input cui-radio__input" disabled>
          <label class="cui-radio__label">
            <span>Disabled & Off</span>
          </label>
        </div>
      </div>
      <div class="on-disabled">
       <div class="cui-input-group cui-radio">
          <input type="radio" value="on-disabled-state" class="cui-input cui-radio__input" checked disabled>
          <label class="cui-radio__label">
            <span>Disabled & On</span>
          </label>
        </div>
      </div>
    </div>
</div>
*/

/*
* @component radio
* @section nested
* @html

<form name="nestedRadioForm">
  <div class="cui-input-group cui-radio">
    <input type="radio" id="Radio-parent" name="RadioNested" class="cui-input cui-radio__input" checked>
    <label class="cui-radio__label" for="Radio-parent">
      <span>Parent Radio Example</span>
    </label>
  </div>
  <div class="cui-input-group cui-radio cui-input--nested-1">
    <input type="radio" id="RadioNested1" name="RadioNested" class="cui-input cui-radio__input">
    <label class="cui-radio__label" for="RadioNested1">
      <span>Child Radio Nested 1 Level</span>
    </label>
  </div>
  <div class="cui-input-group cui-radio cui-input--nested-2">
    <input type="radio" id="RadioNested2" name="RadioNested" class="cui-input cui-radio__input">
    <label class="cui-radio__label" for="RadioNested2">
      <span>Child Radio Nested 2 Levels</span>
    </label>
  </div>
  <div class="cui-input-group cui-radio cui-input--nested-3">
    <input type="radio" id="RadioNested3" name="RadioNested" class="cui-input cui-radio__input">
    <label class="cui-radio__label" for="RadioNested3">
      <span>Child Radio Nested 3 Levels</span>
    </label>
  </div>
</form>
*/