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

$class-prefix: 'cn-ui-m';

$sizes: small, medium, large;

.#{$hashClassName}.cn-ui-m-radio-group {
  // direction
  &--hoz {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
  }
  &--ver {
    &.#{$class-prefix}-radio-tag {
      display: flex;
      flex-direction: column;
      align-items: baseline;
    }
  }
  &--left-small {
    margin-top: calc(-1 * #{$m-s-7});
    margin-bottom: calc(-1 * #{$m-s-7});
  }
  &--left-medium {
    margin-top: calc(-1 * #{$m-s-7});
    margin-bottom: calc(-1 * #{$m-s-7});
  }
  &--left-large {
    margin-top: calc(-1 * #{$m-s-8});
    margin-bottom: calc(-1 * #{$m-s-8});
  }

  .cn-ui-m-radio-item {
    &--hoz-large {
      margin-right: $m-s-28;
    }
    &--hoz-medium {
      margin-right: $m-s-24;
    }
    &--hoz-small {
      margin-right: $m-s-20;
    }
  }
}

.#{$hashClassName}.cn-ui-m-radio-group.cn-ui-m-radio-button {
  background-color: #f5f9fc;
  border-radius: $m-s-6;
  padding: $m-s-2;
  display: inline-flex;
  max-width: 100%;
  // 解决shape为button时，在表单显示被遮挡的问题
  margin-top: 0;
  margin-bottom: 0;
  .cn-ui-m-radio-item {
    padding: $m-s-2 $m-s-10;
    border: $m-s-1 solid transparent;
    margin: 0;
    position: relative;
    overflow: hidden;
    .cn-ui-m-radio-circle {
      display: none;
    }
    .cn-ui-m-radio-text {
      margin-left: 0;
      display: flex;
      flex-direction: row;
      @include ellipsis();
    }
    .cn-ui-m-radio-text:not(
        .cn-ui-m-radio-text--unselected-disabled,
        .cn-ui-m-radio-text--selected-disabled
      ) {
      color: $m-color-text-title3;
    }
    &:last-child {
      margin-right: 0;
      &::after {
        display: none;
      }
    }
  }
  .cn-ui-m-radio-item-separator {
    margin: $m-s-8 $m-s-1;
    width: $m-s-1;
    background-color: $m-color-bg;
    &--hidden {
      background-color: transparent;
    }
  }
  .cn-ui-m-radio-item--selected {
    border-radius: $m-s-4;
    background-color: $m-color-secondary-lightest;
    border: $m-s-1 solid $m-color-primary;
    .cn-ui-m-radio-text.cn-ui-m-radio-text--selected {
      color: $m-color-primary;
    }
    &.cn-ui-m-radio-item--disabled {
      opacity: 0.4;
      .cn-ui-m-radio-text--selected-disabled {
        color: $m-color-primary;
      }
    }
  }
}

.#{$hashClassName}.#{$class-prefix}-radio-tag {
  display: inline-flex;
  .#{$class-prefix}-radio-item {
    margin-left: 0;
    margin-right: $m-s-8;
    .#{$class-prefix}-radio-circle {
      display: none;
    }
    .#{$class-prefix}-radio-text {
      border: $m-line solid transparent;
      border-radius: $m-s-4;
      padding: $m-s-3 $m-s-11;
      margin-left: 0;
      display: inline-block;
      @include ellipsis();
      background-color: $m-color-bg-disabled;
    }
    .#{$class-prefix}-radio-text:not(
        .#{$class-prefix}-radio-text--unselected-disabled,
        .#{$class-prefix}-radio-text--selected-disabled
      ) {
      color: $m-color-text-title3;
    }
  }
  .#{$class-prefix}-radio-item-separator {
    margin: $m-s-8 $m-s-1;
    width: $m-s-1;
    background-color: $m-color-bg;
    &--hidden {
      background-color: transparent;
    }
  }
  .#{$class-prefix}-radio-item--selected {
    .#{$class-prefix}-radio-text {
      background-color: $m-color-secondary-lightest;
      border: $m-s-1 solid $m-color-primary;
    }
    .#{$class-prefix}-radio-text.#{$class-prefix}-radio-text--selected {
      color: $m-color-primary;
    }
    &.#{$class-prefix}-radio-item--disabled {
      opacity: 0.4;
      .#{$class-prefix}-radio-text--selected-disabled {
        color: $m-color-primary;
      }
    }
  }
}