@import 'common/var.scss';

.qf-tag {
  background-color: $--color-minor-light-1;
  display: inline-block;
  padding: 0 12px;
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: nowrap;
  color: $--color-minor;

  .qf-tag-close {
    border-radius: 50%;
    font-size: 12px;
    color: $--color-minor;

    &:hover {
      background-color: $--color-minor;
      color: #fff;
    }
  }
}

.qf-tag-success {
  background-color: $--color-success-bg;
  color: $--color-success;

  .qf-tag-close {
    color: $--color-success;

    &:hover {
      background-color: $--color-success;
    }
  }
}

.qf-tag-error {
  background-color: $--color-error-bg;
  color: $--color-error;

  .qf-tag-close {
    color: $--color-error;

    &:hover {
      background-color: $--color-error;
    }
  }
}

.qf-tag-warning {
  background-color: $--color-warning-bg;
  color: $--color-warning;

  .qf-tag-close {
    color: $--color-warning;

    &:hover {
      background-color: $--color-warning;
    }
  }
}

.qf-tag-info {
  background-color: $--color-info-bg;
  color: $--color-info;

  .qf-tag-close {
    color: $--color-info;

    &:hover {
      background-color: $--color-info;
    }
  }
}