@import 'common/variable.scss';
@import 'common/mixins.scss';
.#{$--css-prefix}{
  &radio{
    display:block;
    position:relative;
    padding:0.25rem 0.15rem;
    &.is-disabled{
      .vx-radio--text{
        @include _disabled;
      }
    }
    input{
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      z-index:1;
      opacity:0;
      padding:0;
      margin:0;
    }
    &--icon{
      position:absolute;
      right:0.15rem;
      top:50%;
      width: 0.4rem;
      height: 0.4rem;
      margin-top:-0.2rem;
      display:none;
    }
    &--text{
      display:block;
      padding-right:0.6rem;
      @include lineClamp;
    }
    input:checked + &--icon{
      @include var-color();
      display:block;
      &:after{
        border: 0.04rem solid;
        @include var-border-color();
        border-left: 0;
        border-top: 0;
        content: " ";
        top: 50%;
        left: 50%;
        position: absolute;
        width: 0.12rem;
        height: 0.2rem;
        margin-left: -0.08rem;
        margin-top: -0.16rem;
        transform: rotate(45deg);
      }
    }
    &-group{
      user-select: none;
      @include disabled;
      &.is-divider{
        .#{$--css-prefix}radio{
          @include divider;
          &:first-child{
            background-image:none;
          }
        }
      }
    }
  }
}