@import url('~antd/es/style/themes/default.less');
@import url('../style/var.less');

@result-prefix-cls: ~'@{style-prefix}-pro-tag';

.@{result-prefix-cls} {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding-right: @padding-xs;
  padding-left: @padding-xs;
  overflow: hidden;
  font-size: 14px;
  line-height: 22px;
  border-radius: @border-radius-base;

  &::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: currentcolor;
    content: '';
  }

  &-color {
    &-primary {
      color: @primary-color;
    }

    &-success {
      color: @success-color;
    }

    &-danger {
      color: @error-color;
    }

    &-warning {
      color: @warning-color;
    }

    &-cancelled {
      color: @gray-6;
    }
  }

  &-type {
    &-primary {
      .@{result-prefix-cls}-text {
        color: #ffffff;
      }
      .@{result-prefix-cls}-icon {
        color: #ffffff;
      }
    }

    &-hazy {
      &::before {
        opacity: 0.1;
      }
    }

    &-hazy-outline {
      &::after {
        position: absolute;
        inset: 0;
        z-index: 0;
        border-color: currentcolor;
        border-style: solid;
        border-width: 1px;
        border-radius: @border-radius-base;
        content: '';
      }

      &::before {
        opacity: 0.1;
      }
    }

    &-ghost {
      &::after {
        position: absolute;
        inset: 0;
        z-index: 0;
        border-color: currentcolor;
        border-style: solid;
        border-width: 1px;
        border-radius: @border-radius-base;
        content: '';
      }

      &::before {
        background-color: transparent;
      }
    }
  }

  &-size {
    &-large {
      min-height: 24px;
      line-height: 24px;
    }

    &-small {
      min-height: 20px;
      font-size: 12px;
      line-height: 20px;
    }
  }

  &-text {
    position: relative;
    z-index: 1;
  }

  &-icon {
    position: relative;
    z-index: 1;
    margin-right: @margin-xss;
  }

  &-close-icon {
    position: relative;
    z-index: 1;
    margin-left: @margin-xss;
    font-size: 10px;
    cursor: pointer;
  }
}