@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';
@import '../../styles/mixins.scss';

$class-prefix: 'cn-ui-m';
$sizes: small, medium, large;

.#{$hashClassName}.#{$class-prefix}-radio-container {
  @include flex(row, flex-start, flex-start);

  &--large {
    padding: $m-s-8 0;
  }
  &--medium {
    padding: $m-s-7 0;
  }
  &--small {
    padding: $m-s-7 0;
  }
  .#{$class-prefix}-radio {
    &-circle {
      @include flex(row, center, center);
      box-sizing: border-box;
      border: $m-line solid $m-color-bg;
      border-radius: 50%;
      background-color: $m-color-bg-white;
      text-align: center;
      transition:
        width 0.1s ease,
        height 0.1s ease,
        border-width 0.1s ease,
        border-color 0.1s ease;
    }
    // 圆的大小
    &-circle--small {
      height: $m-s-14;
      width: $m-s-14;
      margin-top: $m-s-3; // (20 - 14 / 2)
    }
    &-circle--medium {
      height: $m-s-18;
      width: $m-s-18;
      margin-top: $m-s-1; // (20 - 14 / 2)
    }
    &-circle--large {
      height: $m-s-24;
      width: $m-s-24;
    }

    &-circle--selected {
      border-color: $m-color-primary;
      background-color: $m-color-primary;
    }

    &-circle--unselected-disabled {
      border-color: $m-color-bg-light;
      background-color: $m-color-bg-disabled;
    }

    &-circle--selected-disabled {
      border-color: $m-color-bg-light;
      background-color: $m-color-bg-disabled;
    }

    /* 中心圆 */
    &-point {
      border-radius: 50%;
      transition:
        width 0.1s ease,
        height 0.1s ease;
    }

    // 中心点大小
    &-point--large {
      height: $m-s-12;
      width: $m-s-12;
    }
    &-point--medium {
      height: $m-s-9;
      width: $m-s-9;
    }
    &-point--small {
      height: $m-s-7;
      width: $m-s-7;
    }

    &-point--selected {
      background-color: $m-color-bg-white;
      animation: #{$class-prefix}-radio-dot-blink 0.1s ease;
    }

    &-point--selected-disabled {
      background-color: $m-color-bg-light;
    }

    &-point--unselected {
      width: 0;
      height: 0;
    }

    /* 文本 */
    &-text {
      flex: 1;
      color: $m-color-text;
      line-height: 1.5;
    }

    &-text--selected {
      color: $m-color-text;
    }

    &-text--unselected-disabled {
      color: $m-color-text-disabled;
    }

    &-text--selected-disabled {
      color: $m-color-text-disabled;
    }

    // 文字大小
    &-text--small {
      font-size: $m-font-size-caption;
      margin-left: $m-s-10;
      line-height: $m-s-20;
    }
    &-text--medium {
      font-size: $m-font-size-body-1;
      margin-left: $m-s-12;
      line-height: $m-s-20;
    }
    &-text--large {
      font-size: $m-font-size-headline-6;
      margin-left: $m-s-12;
      line-height: $m-s-24;
    }
  }
}