.#{$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: 16px;
    height: 16px;
    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-color;
        border: 1px solid $radio-checked-bg;
      }
      &::after {
        position: absolute;
        top: 50%;
        left: 4px;
        width: $radio-size - 8;
        height: $radio-size - 8;
        content: "";
        border-radius: 50%;
        transition: all .125s;
        transform: translate(0,-50%);
        @include active-primary;
      }
    }
  }

  //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: $radio-disabled-border;
      }
    }

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

//
// radio-group
//
.#{$radio-group-prefix-cls} {
  .#{$radio-prefix-cls} {
    display: block;
    line-height: 32px;
  }

  &.#{$radio-group-prefix-cls}-inline {
    .#{$radio-prefix-cls} {
      display: inline-block;

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

  &--lg {
    .#{$radio-prefix-cls}{
      @extend .#{$radio-prefix-cls}--lg;
    }
  }
  &--sm {
    .#{$radio-prefix-cls}{
      @extend .#{$radio-prefix-cls}--sm;
    }
  }
}

//
//radio-group-button
//
.#{$radio-group-prefix-cls}-button{
  @extend .#{$btn-prefix-cls}-group;
  .#{$radio-prefix-cls}{
    @extend .#{$btn-prefix-cls};
    @extend .#{$btn-prefix-cls}-secondary;
    &:checked,
    &[checked]{
      @extend .#{$btn-prefix-cls}-primary;
      z-index: 2;
      border: 1px solid transparent;
    }

  }
  .#{$radio-prefix-cls}__inner{
    padding-left: 0 !important;
    &::before,
    &::after{
      display: none;
    }
  }

  &.#{$radio-group-prefix-cls}-inline{
    .#{$radio-prefix-cls}:not(:last-child){
      margin-right: 0;
    }

  }

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

// radio-group-outline
.#{$radio-group-prefix-cls}-button-outline{
  @extend .#{$btn-prefix-cls}-group;
  .#{$radio-prefix-cls}{
    @extend .#{$btn-prefix-cls};
    @extend .#{$btn-prefix-cls}-outline-normal;
    &:checked,
    &[checked]{
      @extend .#{$btn-prefix-cls}-outline-primary;
      z-index: 2;
      // border: 1px solid transparent;
    }

  }
  .#{$radio-prefix-cls}__inner{
    padding-left: 0 !important;
    &::before,
    &::after{
      display: none;
    }
  }

  &.#{$radio-group-prefix-cls}-inline{
    .#{$radio-prefix-cls}:not(:last-child){
      margin-right: 0;
    }

  }

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