// @import '../_utils.scss';
.#{$radio-group-prefix-cls} {
  display: inline-block;
  // font-size: $font-size-base;
  vertical-align: middle;
  // height: $form-component-height;
  &-vertical {
    .#{$radio-prefix-cls}-wrapper {
      display: block;
      @if $--size-switch == no {
        height: $radio-vertical-wrapper-height;
        line-height: $radio-vertical-wrapper-height;
      }
    }
  }

  & ~ .verify-tip.verify-bottom {
    margin-top: $radio-vertical-verify-tip-margin-top;
  }
}

// 普通状态
.#{$radio-prefix-cls}-wrapper {
  vertical-align: middle;
  display: inline-block;
  // c1 repair radio and checkbox group component in form layout problem
  @if $--size-switch == yes {
    font-size: $--size-font-size-base;
    border-style: solid;
    border-color: transparent;
    @include computed-height($--size-height-base, 0);
    // padding: 0;
  } @else {
    font-size: $radio-wrapper-font-size;
    line-height: 1;
  }
  position: relative;
  white-space: nowrap;
  margin-right: $radio-wrapper-margin-right;
  cursor: pointer;

  @include theme-font-color($__radio_font-color);
  @include structure-font-size($__radio-default_font-size, 0);

  &-disabled {
    cursor: $cursor-disabled;
  }

  .iconfont {
    font-size: $font-size-base;
    @if $--size-switch == yes {
      line-height: $--size-font-size-base;
    }

    @include theme-font-color($__radio-icon_font-color);
  }
}

.#{$radio-prefix-cls} {
  display: inline-block;
  margin-right: $radio-wrapper-margin-right;
  white-space: nowrap;
  outline: none;
  position: relative;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;

  &:hover {
    .#{$radio-inner-prefix-cls} {
      border-color: $primary-color;

      @include theme-border-color($__radio_hover_border-color);
      @include theme-box-shadow($__radio_hover_box-shadow);
    }
  }

  &-inner {
    display: inline-block;
    width: $radio-inner-width;
    height: $radio-inner-height;
    position: relative;
    top: $radio-inner-top;
    left: $radio-inner-left;
    background-color: $radio-inner-background-color;
    border: 1px solid $border-color-base;
    border-radius: 50%;
    transition: all $transition-time $ease-in-out;

    @include theme-background-color($__radio_background-color);
    @include theme-border-color($__radio_border-color);

    &::after {
      position: absolute;
      width: $radio-inner-after-width;
      height: $radio-inner-after-height;
      left: $radio-inner-after-left;
      top: $radio-inner-after-top;
      border-radius: $border-radius-base;
      display: table;
      border-top: 0;
      border-left: 0;
      content: " ";
      background-color: $primary-color;
      opacity: 0;
      transition: all $transition-time $ease-in-out;
      transform: scale(0);

      @include theme-background-color($__radio-after_background-color);
    }
  }

  &-large {
    @if $--size-switch == no {
      font-size: $font-size-base;
    }
    & .#{$radio-inner-prefix-cls} {
      width: $radio-large-inner-width;
      height: $radio-large-inner-height;

      &::after {
        width: $radio-large-inner-after-width;
        height: $radio-large-inner-after-height;
      }
    }
    &.#{$radio-prefix-cls}-wrapper, & .#{$radio-prefix-cls}-wrapper {
      @if $--size-switch == no {
        font-size: $font-size-base;
      }

      @include structure-font-size($__radio-default_font-size, 2);
    }
  }

  &-small {
    & .#{$radio-inner-prefix-cls} {
      width: $radio-small-inner-width;
      height: $radio-small-inner-height;

      &::after {
        width: $radio-small-inner-after-width;
        height: $radio-small-inner-after-height;
      }
    }
  }

  &-input {
    position: absolute;
    top: $radio-input-top;
    bottom: $radio-input-bottom;
    left: $radio-input-left;
    right: $radio-input-right;
    z-index: 1;
    opacity: $radio-input-opacity;
    cursor: pointer;
  }

  &-inner-focus {
    @include active();
  }
}

// 选中状态
.#{$radio-prefix-cls}-checked {
  .#{$radio-inner-prefix-cls} {
    border-color: $primary-color;

    @include theme-border-color($__radio_checked_border-color);

    &::after {
      opacity: 1;
      transform: scale(1);
      transition: all $transition-time $ease-in-out;
    }
  }

  &:hover {
    .#{$radio-inner-prefix-cls} {
      border-color: $primary-color;

      @include theme-border-color($__radio_checked-hover_border-color);
    }
  }
}

.#{$form-item-prefix-cls}-changed {
  // 选中状态
  .#{$radio-prefix-cls}-checked {
    .#{$radio-inner-prefix-cls} {
      border-color: $changed-color;

      @include theme-border-color($__radio-form-item_checked-changed_border-color);

      &::after {
        background: $changed-color;

        @include theme-background-color($__radio-form-item-after_checked-changed_background-color);
      }
      &-focus{
        @include theme-box-shadow($__radio-form-item_checked-changed-focus_box-shadow);
      }
    }

    &:hover {
      .#{$radio-inner-prefix-cls} {
        border-color: $changed-color;

        @include theme-border-color($__radio-form-item_checked-changed-hover_border-color);
        @include theme-box-shadow($__radio-form-item_checked-changed-hover_box-shadow);
      }
    }
  }
}

.#{$radio-prefix-cls}-disabled {
  cursor: $cursor-disabled;

  .#{$radio-prefix-cls}-input {
    cursor: $cursor-disabled;
  }

  &:hover {
    .#{$radio-inner-prefix-cls} {
      border-color: $border-color-base;

      @include theme-border-color($__radio_disabled-hover_border-color);
      @include theme-box-shadow($__radio_disabled-hover_box-shadow);
    }
  }
  .#{$radio-inner-prefix-cls} {
    border-color: $radio-disabled-inner-border-color;
    background-color: $radio-inner-color;

    @include theme-border-color($__radio_disabled_border-color);
    @include theme-background-color($__radio_disabled_background-color);

    &::after {
      background-color: $radio-inner-after-color;

      @include theme-background-color($__radio-after_disabled_background-color);
    }
  }

  .#{$radio-prefix-cls}-disabled + span {
    color: $radio-disabled-span-color;

    @include theme-font-color($__radio-span_disabled_font-color);
  }
}

span.#{$radio-prefix-cls} + * {
  margin-left: $radio-span-margin-left;
  margin-right: $radio-span-margin-right;
}

// 按钮样式
.#{$radio-group-button-prefix-cls} {
  font-size: 0;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;

  .#{$radio-prefix-cls} {
    width: 0;
    margin-right: 0;
  }

  .#{$radio-prefix-cls}-wrapper {
    display: inline-block;
    margin: $radio-group-button-wrapper-margin;
    @if $--size-switch == yes {
      font-size: $--size-font-size-base;
      border-color: $border-color-base;
      border-style: solid;
      @include computed-height-btn($--size-height-base, normal, 1px);
    } @else {
      height: $btn-circle-size;
      line-height: $btn-circle-size - 2px;
      padding: $radio-group-button-wrapper-padding;
      font-size: $font-size-small;
      border: 1px solid $border-color-base;
    }
    color: $btn-default-color;
    transition: all $transition-time ease-in-out;
    cursor: pointer;
    border-left: 0;
    background: $radio-group-button-wrapper-background;

    @include theme-font-color($__radio-group_font-color);
    @include theme-border-color($__radio-group_border-color);
    @include theme-background-color($__radio-group_background-color);
    @include structure-font-size($__radio-default_font-size, 0);
    @include structure-padding($__radio-button-default_padding);

    > span {
      margin-left: 0;
    }

    &::before {
      content: "";
      position: absolute;
      width: 1px;
      height: 100%;
      left: -1px;
      background: $border-color-base;
      visibility: hidden;
      transition: all $transition-time ease-in-out;

      @include theme-background-color($__radio-group-before_background-color);
    }

    &:first-child {
      border-radius: $btn-border-radius 0 0 $btn-border-radius;
      border-left: 1px solid $border-color-base;

      @include theme-border-color($__radio-group-first-child_border-color);

      &::before {
        display: none;
      }
    }

    &:last-child {
      border-radius: 0 $btn-border-radius $btn-border-radius 0;
    }

    &:first-child:last-child {
      border-radius: $btn-border-radius;
    }

    &:hover {
      position: relative;
      color: $primary-color;

      @include theme-font-color($__radio-group_hover_font-color);
      @include theme-border-color($__radio-group_hover_border-color);
      @include theme-box-shadow($__radio-group_hover_box-shadow);

      &:first-child {
        @include theme-box-shadow($__radio-group-first-child_hover_box-shadow);
      }
    }

    .#{$radio-prefix-cls}-inner {
      // opacity: 0;
      display: none;
      width: 0;
      height: 0;
    }

    input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    &-checked {
      background: $radio-group-button-wrapper-checked-color;
      border-color: $primary-color;
      color: $primary-color;
      box-shadow: -1px 0 0 0 $primary-color;

      @include theme-font-color($__radio-group_checked_font-color);
      @include theme-border-color($__radio-group_checked_border-color);
      @include theme-background-color($__radio-group_checked_background-color);
      @include theme-box-shadow($__radio-group_checked_box-shadow);

      &:first-child {
        border-color: $primary-color;
        box-shadow: none !important;

        @include theme-border-color($__radio-group-first-child_checked_border-color);
      }

      &:hover {
        border-color: lighten($primary-color, 10%);
        box-shadow: -1px 0 0 0 tint($primary-color, 20%);
        color: lighten($primary-color, 20%);

        @include theme-border-color($__radio-group_checked-hover_border-color);
        @include theme-box-shadow($__radio-group_checked-hover_box-shadow);
        @include theme-font-color($__radio-group_checked-hover_font-color);
      }

      &:active {
        border-color: shade($primary-color, 5%);
        box-shadow: -1px 0 0 0 shade($primary-color, 5%);
        color: darken($primary-color, 5%);

        @include theme-border-color($__radio-group_checked-active_border-color);
        @include theme-box-shadow($__radio-group_checked-active_box-shadow);
        @include theme-font-color($__radio-group_checked-active_font-color);
      }
    }

    &-disabled {
      border-color: $border-color-base;
      background-color: $background-color-base;
      cursor: $cursor-disabled;
      color: $radio-group-button-wrapper-disabled-color;

      @include theme-border-color($__radio-group_disabled_border-color);
      @include theme-background-color($__radio-group_disabled_background-color);
      @include theme-font-color($__radio-group_disabled_font-color);

      &:first-child,
      &:hover {
        border-color: $border-color-base;
        background-color: $background-color-base;
        color: $radio-group-button-wrapper-disabled-hover-color;

        @include theme-border-color($__radio-group_disabled-hover_border-color);
        @include theme-background-color($__radio-group_disabled-hover_background-color);
        @include theme-font-color($__radio-group_disabled-hover_font-color);
        @include theme-box-shadow($__radio-group_disabled-hover_box-shadow);
      }

      &:first-child {
        border-left-color: $border-color-base;

        @include theme-border-left-color($__radio-group-first-child_disabled_border-color);
      }
    }

    &-disabled.#{$radio-prefix-cls}-wrapper-checked {
      color: $radio-group-button-wrapper-disabled-wrapper-checked-color;
      background-color: $radio-group-button-wrapper-disabled-wrapper-checked-background-color;
      border-color: $border-color-base;
      box-shadow: none !important;

      @include theme-border-color($__radio-group_disabled-checked_border-color);
      @include theme-background-color($__radio-group_disabled-checked_background-color);
      @include theme-font-color($__radio-group_checked_font-color);
    }
    // btn 带按钮--o45
    .#{$radio-prefix-cls}-btnIcon.#{$radio-prefix-cls} {
      width: $radio-group-button-wrapper-btnIcon-width;
      .#{$radio-prefix-cls}-inner {
        // opacity: 1;
        @if $--size-switch == yes {
          display: block;
        } @else {
          display: inline-block;
        }
        width: $radio-group-button-wrapper-btnIcon-inner-width;
        height: $radio-group-button-wrapper-btnIcon-inner-height;
      }
    }
  }
}

.#{$radio-group-button-prefix-cls}.#{$radio-group-prefix-cls}-large .#{$radio-prefix-cls}-wrapper {
  @if $--size-switch == yes {
    @include computed-height-btn($--size-height-base, large, 1px);
  } @else {
    height: $btn-circle-size-large;
    line-height: $btn-circle-size-large - 2px;
    font-size: $font-size-small;
  }

  @include structure-font-size($__radio-default_font-size, 0);

  .#{$radio-prefix-cls}-btnIcon.#{$radio-prefix-cls} {
    width: $radio-group-button-large-btnIcon-width;
    .#{$radio-prefix-cls}-inner {
      // opacity: 1;
      @if $--size-switch == yes {
        display: block;
      } @else {
        display: inline-block;
      }
      width: $radio-group-button-large-btnIcon-inner-width;
      height: $radio-group-button-large-btnIcon-inner-height;
    }
  }
}

.#{$radio-group-button-prefix-cls}.#{$radio-group-prefix-cls}-small .#{$radio-prefix-cls}-wrapper {
  @if $--size-switch == yes {
    @include computed-height-btn($--size-height-base, small, 1px);
  } @else {
    height: $btn-circle-size-small;
    line-height: $btn-circle-size-small - 2px;
    padding: $radio-group-button-small-wrapper-padding;
    font-size: $font-size-small;
  }

  @include structure-font-size($__radio-default_font-size, 0);
  @include structure-padding($__radio-button-small_padding);

  &:first-child {
    border-radius: $btn-border-radius-small 0 0 $btn-border-radius-small;
  }

  &:last-child {
    border-radius: 0 $btn-border-radius-small $btn-border-radius-small 0;
  }
  .#{$radio-prefix-cls}-btnIcon.#{$radio-prefix-cls} {
    width: 16px;
    .#{$radio-prefix-cls}-inner {
      // opacity: 1;
      @if $--size-switch == yes {
        display: block;
      } @else {
        display: inline-block;
      }
      width: $radio-group-button-small-btnIcon-inner-width;
      height: $radio-group-button-small-btnIcon-inner-height;
    }
  }
}

.#{$form-item-prefix-cls}-error {
  .#{$radio-prefix-cls} {
    @include radio-error();

    &-icon {
      color: $error-color;

      @include theme-font-color($__radio-form-item-icon_error_font-color);
    }
    &:hover{
      .#{$radio-prefix-cls}-inner{
        @include theme-border-color($__radio-form-item_error-hover_border-color);
      }
    }
    &-checked{
      .#{$radio-prefix-cls}-inner::after{
        @include theme-background-color($__radio-form-item-after_error_background-color);
      }
    }
  }
}