@import "../common/variables";
@import '../common/vars';



@disabled-color: #EFF2F7;

.@{css-prefix} {
  &-radio {
    position: relative;
    display: inline-block;
    cursor: pointer;
    white-space: nowrap;
    outline: none;

    .@{css-prefix}-radio-input {
      position: relative;
      display: inline-block;
      cursor: pointer;
      white-space: nowrap;
      outline: none;
      line-height: 1;
      vertical-align: middle;

      input[type='radio'] {
        position: absolute;
        left: -999px;
        opacity: 0;
      }

      &.is-disabled {
        cursor: not-allowed;

        .@{css-prefix}-radio-inner {
          background-color: #eff2f7;
          border-color: #d3dce6;
        }

        &.is-checked .@{css-prefix}-radio-inner {
          background-color: #d3dce6;

          .@{css-prefix}-radio-inner-check {
            background-color: #d3dce6;
          }
        }

        +.@{css-prefix}-radio-label {
          cursor: not-allowed;
        }
      }

      &.is-checked {
        .@{css-prefix}-radio-inner {
          background-color: @theme-color;
          border-color: @theme-color;

          .@{css-prefix}-radio-inner-check {
            border-color: #fff;
            transform: rotate(45deg) scaleY(1);
          }
        }
      }
    }

    .@{css-prefix}-radio-inner {
      border: 2rpx solid #bfcbd9;
      border-radius: 100%;
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      background-color: #fff;
      position: relative;
      cursor: pointer;
      display: inline-block;
      box-sizing: border-box;
    }

    .@{css-prefix}-radio-inner-check {
      box-sizing: content-box;
      position: absolute;
      content: "";
      top: 6rpx;
      left: 14rpx;
      height: 14rpx;
      width: 6rpx;
      border: 4rpx solid #fff;
      border-left: 0;
      border-top: 0;
      transform: rotate(45deg) scaleY(0);
      transition: transform 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6) 0.05s;
      transform-origin: center;
    }

  }
}