.#{$radio-prefix-cls}{
  position: relative;
  display: inline-block;
  margin-bottom: 0;
  font-size: $radio-font-size;
  vertical-align: middle;
  cursor: pointer;// Override the `<label>` default

  &__inner{
    position: relative;
    padding-left: $radio-size + $radio-padding-l;
    margin-top: 0;
    user-select: none;

    &::before{
      position: absolute;
      top: 50%;
      left: 0;
      width: $radio-size;
      height: $radio-size;
      overflow: visible;
      font-size: $radio-font-size;
      line-height: 100%;
      color: transparent;
      text-align: center;
      text-indent: -3px;
      content: "";
      background: $radio-bg;
      border: 1px solid $radio-border-color;
      border-radius: $radio-border-radius;
      transition: all .125s;
      transform: translate(0,-50%);
    }

    &:empty {
      padding-left: $radio-size;
    }
  }

  &__input[type="radio"]{
    position: absolute;
    top: 3px;
    z-index: 2;
    width: 1rem;
    height: 1rem;
    overflow: hidden;
    visibility: hidden;
  }

  //size
  &--lg {
    @include radio-size($radio-lg-font-size, $radio-lg-size, $radio-lg-padding-l);
  }

  &--sm {
    @include radio-size($radio-sm-font-size, $radio-sm-size, $radio-sm-padding-l);
  }

  // checked
  &--checked,
  &__input[type="radio"]:checked ~,
  &__input[type="radio"][checked] ~ {
    .#{$radio-prefix-cls}__inner{
      &::before{
        background: $radio-checked-bg;
        border: 2px solid $radio-checked-bg;
      }
      &::after {
        position: absolute;
        top: 50%;
        left: 5px;
        width: $radio-size * .3;
        height: $radio-size * .3;
        content: "";
        border-radius: 50%;
        transition: all .125s;
        transform: translate(0,-50%);
        background: $white;
      }
    }
  }

  //hover
  @include hover{
    .#{$radio-prefix-cls}__inner{
      &::before{
        border-color: $input-border-hover;
      }
    }

  }

  //disabled
  @include status-disabled {
    .#{$radio-prefix-cls}__inner{
      cursor: $cursor-disabled;
      &::before{
        background: $radio-disabled-bg;
        border-color: $gray-lightest;
      }
    }

    // 禁用 选中 状态
    &.#{$radio-prefix-cls}--checked,
    .#{$radio-prefix-cls}__input[type=radio]:checked ~,
    .#{$radio-prefix-cls}__input[type=radio]:checked ~{
      .#{$radio-prefix-cls}__inner::before{
        background: $radio-border-color !important;
        border-color: $radio-border-color;
      }
      .#{$radio-prefix-cls}__inner::after {
        background: $white;
      }
    }
  }
}

//
// radio-group
//
.radio-group {
  $root:#{&};
  .form-radio {
    display: block;
    &#{$root}--lg &{
      @extend .form-radio--lg;
    }
    &#{$root}--sm &{
      @extend .form-radio--sm;
    }
  }

  &.radio-group-inline {
    .form-radio {
      display: inline-block;

      &:not(:last-child) {
        margin-right: $radio-group-inline-space;
      }
    }
  }

  &--lg{
    .form-radio{
      @extend .form-radio--lg;
    }
  }
  &--sm{
    .form-radio{
      @extend .form-radio--sm;
    }
  }
}

//
//radio-group-button
//
.radio-group-button{
  @extend .#{$btn-prefix-cls}-group;
  .form-radio{
    @extend .#{$btn-prefix-cls};
    @extend .#{$btn-prefix-cls}-secondary;
    transition: none;
    &[disabled] {
      z-index: 1 !important;
      &[checked]:hover {
        color: $brand-primary;
        border: 1px solid rgba($brand-primary, 0.5);
      }
      &:active {
        box-shadow: none;
      }
    }

    &:checked,
    &[checked]{
      color: $brand-primary;
      z-index: 2 !important;
      border: 1px solid rgba($brand-primary, 0.5);
    }

    &:not([disabled]):hover {
      border: 1px solid rgba($brand-primary, 0.5);
    }
  }
  .form-radio__inner{
    padding-left: 0 !important;
    &::before,
    &::after{
      display: none;
    }
  }

  &.radio-group-inline{
    .form-radio:not(:last-child){
      margin-right: 0;
    }

  }

  //size
  &.radio-group--lg{
    .form-radio{
      @extend .#{$btn-prefix-cls}-lg;
    }
  }
  &.radio-group--sm{
    .form-radio{
      @extend .#{$btn-prefix-cls}-sm;
    }
  }
}