/** @component radio */
@import 'settings';
@import '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);
  }
}