
@import '../../src/style/tools.css';

.bx-tag {
  font-size: var(--tag-style-font-size);
  height: var(--tag-style-height);
  border-radius: var(--tag-style-border-radius);

  /* 文字与边框: 上下居中对齐, 左右相距 6px */
  padding: var(--tag-style-padding);
  text-align: center;
  line-height: var(--tag-style-height);

  &.bx-tag--android {
    line-height: 15px;
  }

  /* 防止超出或换行 */
  display: inline-block;
  overflow: hidden;

  &.bx-tag--loose {
    padding: var(--tag-style-padding-loose);
  }

  /* 默认为实底风格 */
  color: white;

  &.bx-tag-type--default {
    background-color: var(--tag-type-default-color);
  }

  &.bx-tag-type--primary {
    background-color: var(--tag-type-primary-color);
  }

  &.bx-tag-type--success {
    background-color: var(--tag-type-success-color);
  }

  &.bx-tag-type--info {
    background-color: var(--tag-type-info-color);
  }

  &.bx-tag-type--warning {
    background-color: var(--tag-type-warning-color);
  }

  &.bx-tag-type--danger {
    background-color: var(--tag-type-danger-color);
  }

  &.bx-tag-type--caution {
    background-color: var(--tag-type-caution-color);
  }

  /* 边框风格 */
  &.bx-tag--plain {
    background-color: transparent;

    &::after {
      border-radius: var(--tag-style-border-radius);
      border-style: solid;
      border-color: currentColor;
    }

    &.bx-tag-type--default {
      color: var(--tag-type-default-color);
    }

    &.bx-tag-type--primary {
      color: var(--tag-type-primary-color);
    }

    &.bx-tag-type--success {
      color: var(--tag-type-success-color);
    }

    &.bx-tag-type--info {
      color: var(--tag-type-info-color);
    }

    &.bx-tag-type--warning {
      color: var(--tag-type-warning-color);
    }

    &.bx-tag-type--danger {
      color: var(--tag-type-danger-color);
    }

    &.bx-tag-type--caution {
      color: var(--tag-type-caution-color);
    }
  }
}
