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

$prefix: 'cn-ui-m-select-tag';

.#{$hashClassName}.#{$prefix} {
  height: $m-s-28;
  padding: 0 $m-s-14;
  cursor: pointer;
  @include flex(row, center);
  border-radius: $m-radius;

  font-size: $m-font-size-body-1;
  line-height: $m-font-lineheight-1;

  &-type-default {
    border: $m-line solid $m-color-bg;
    background-color: $m-color-bg-white;
    color: $m-color-text;

    &.#{$prefix}-checked {
      border: $m-line solid $m-color-primary;
      background-color: $m-color-secondary-lightest;
      color: $m-color-primary;
    }

    &.#{$prefix}-disabled {
      border: $m-line solid $m-color-bg-disabled;
      background-color: $m-color-bg-white;
      color: $m-color-text-disabled;
      cursor: not-allowed;
    }

    &.#{$prefix}-disabled.#{$prefix}-checked {
      border: $m-line solid $m-color-secondary-lightest;
      background-color: $m-color-bg-white;
      color: $m-color-secondary-lightest;
    }
  }

  &-type-primary {
    background-color: $m-color-secondary-lightest;
    color: $m-color-primary;

    &.#{$prefix}-checked {
      background-color: $m-color-primary;
      color: $m-color-bg-white;
    }

    &.#{$prefix}-disabled {
      background-color: $m-color-bg-disabled;
      color: $m-color-text-disabled;
      cursor: not-allowed;
    }

    &.#{$prefix}-disabled.#{$prefix}-checked {
      background-color: $m-color-secondary-lightest;
      color: $m-color-bg-white;
    }
  }

  &-type-secondary {
    background-color: $m-color-bg-disabled;
    color: $m-color-text;

    &.#{$prefix}-checked {
      border: $m-line solid $m-color-primary;
      background-color: $m-color-secondary-lightest;
      color: $m-color-primary;
    }

    &.#{$prefix}-disabled {
      background-color: $m-color-bg-disabled;
      color: $m-color-text-disabled;
      cursor: not-allowed;
    }

    &.#{$prefix}-disabled.#{$prefix}-checked {
      border: $m-line solid $m-color-secondary-lightest;
      background-color: $m-color-bg-white;
      color: $m-color-secondary-lightest;
    }
  }
}