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

.#{$hashClassName}.cn-ui-m-status-tag {
  display: inline-block;
  font-size: $m-s-12;
  line-height: 1;
  padding: $m-s-3 $m-s-4;
  border-radius: $m-radius-small;

  &-normal {
    &.cn-ui-m-status-tag-status-info {
      color: $m-color-primary-heavy;
      background-color: $m-color-secondary-lightest;
    }

    &.cn-ui-m-status-tag-status-success {
      color: $m-color-success-heavy;
      background-color: $m-color-success-lightest;
    }

    &.cn-ui-m-status-tag-status-error {
      color: $m-color-error-heavy;
      background-color: $m-color-error-lightest;
    }

    &.cn-ui-m-status-tag-status-warning {
      color: $m-color-warning-heavy;
      background-color: $m-color-warning-lightest;
    }

    &.cn-ui-m-status-tag-status-invalid {
      color: $m-color-bg-heavy;
      background-color: $m-color-bg-light;
    }
  }

  &-primary {
    color: $m-color-bg-white;

    &.cn-ui-m-status-tag-status-info {
      background-color: $m-color-primary;
    }

    &.cn-ui-m-status-tag-status-success {
      background-color: $m-color-success;
    }

    &.cn-ui-m-status-tag-status-error {
      background-color: $m-color-error;
    }

    &.cn-ui-m-status-tag-status-warning {
      background-color: $m-color-warning;
    }

    &.cn-ui-m-status-tag-status-invalid {
      background-color: $m-color-bg-darker2;
    }
  }

  &-secondary {
    background-color: transparent;

    &.cn-ui-m-status-tag-status-info {
      color: $m-color-primary;
      border: $m-s-1 solid $m-color-primary;
    }

    &.cn-ui-m-status-tag-status-success {
      color: $m-color-success;
      border: $m-s-1 solid $m-color-success;
    }

    &.cn-ui-m-status-tag-status-error {
      color: $m-color-error;
      border: $m-s-1 solid $m-color-error;
    }

    &.cn-ui-m-status-tag-status-warning {
      color: $m-color-warning;
      border: $m-s-1 solid $m-color-warning;
    }

    &.cn-ui-m-status-tag-status-invalid {
      color: $m-color-bg-darker2;
      border: $m-s-1 solid $m-color-bg-darker2;
    }
  }
}