@import '../style/mixins/hairline.less';
@import (reference) './variable.less';

@tagPrefix: ant-tag;

.@{tagPrefix} {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 2 * @rpx 8 * @rpx;
  font-size: 22 * @rpx;
  line-height: 30 * @rpx;
  box-sizing: border-box;
  border-radius: @corner-radius-sm;
  color: @tag-base-color;
  &-icon-container {
    margin-right: 6 * @rpx;
    display: flex;
    justify-content: center;
    align-self: center;
    align-items: center;

    .ant-icon {
      font-size: 24 * @rpx;
    }
  }
  &-primary {
    background-color: @tag-primary-color;
    &.@{tagPrefix}-fill-light {
      color: @tag-primary-color;
      background-color: @tag-primary-light-color;
    }
    &.@{tagPrefix}-outline {
      color: @tag-primary-color;
      border-color: @tag-primary-color-faded;
    }
  }
  &-warning {
    background-color: @tag-warning-color;
    &.@{tagPrefix}-fill-light {
      color: @tag-warning-color;
      background-color: @tag-warning-light-color;
    }
    &.@{tagPrefix}-outline {
      color: @tag-warning-color;
      border-color: @tag-warning-color-faded;
    }
  }
  &-danger {
    background-color: @tag-danger-color;
    &.@{tagPrefix}-fill-light {
      color: @tag-danger-color;
      background-color: @tag-danger-light-color;
    }
    &.@{tagPrefix}-outline {
      color: @tag-danger-color;
      border-color: @tag-danger-color-faded;
    }
  }
  &-success {
    background-color: @tag-success-color;
    &.@{tagPrefix}-fill-light {
      color: @tag-success-color;
      background-color: @tag-success-light-color;
    }
    &.@{tagPrefix}-outline {
      color: @tag-success-color;
      border-color: @tag-success-color-faded;
    }
  }
  &-image {
    background-color: rgb(0 0 0 / 50%);
  }
  &-outline {
    border-width: 2rpx;
    border-style: solid;
    background-color: @tag-base-color;
  }
  &-content {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}