:host {
  display: inline-block;
}

.hb-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--hb-spacing-xxs);
  padding: 0 var(--hb-spacing-xs);
  height: 22px;
  font-size: var(--hb-font-size-xs);
  line-height: 1;
  border-radius: var(--hb-tag-radius);
  border: 1px solid transparent;
  box-sizing: border-box;
  white-space: nowrap;
  vertical-align: middle;
}

.hb-tag__content {
  display: inline-flex;
  align-items: center;
}

.hb-tag__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  transition: background-color var(--hb-transition-duration);
}

.hb-tag__close:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* ---- 尺寸 ---- */
.hb-tag--small { height: 18px; font-size: 11px; padding: 0 6px; }
.hb-tag--large { height: 28px; font-size: var(--hb-font-size-sm); padding: 0 var(--hb-spacing-sm); }

/* ---- 圆角 ---- */
.hb-tag--round { border-radius: 999px; }

/* ---- 类型：light（默认） ---- */
.hb-tag--default.hb-tag--light { background: var(--hb-tag-default-bg); color: var(--hb-tag-default-color); }
.hb-tag--primary.hb-tag--light { background: var(--hb-tag-primary-bg); color: var(--hb-tag-primary-color); }
.hb-tag--success.hb-tag--light { background: var(--hb-tag-success-bg); color: var(--hb-tag-success-color); }
.hb-tag--warning.hb-tag--light { background: var(--hb-tag-warning-bg); color: var(--hb-tag-warning-color); }
.hb-tag--danger.hb-tag--light  { background: var(--hb-tag-danger-bg); color: var(--hb-tag-danger-color); }
.hb-tag--info.hb-tag--light    { background: var(--hb-tag-primary-bg); color: var(--hb-tag-primary-color); }

/* ---- 类型：dark ---- */
.hb-tag--default.hb-tag--dark { background: var(--hb-color-text-quaternary); color: #fff; }
.hb-tag--primary.hb-tag--dark { background: var(--hb-color-primary); color: #fff; }
.hb-tag--success.hb-tag--dark { background: var(--hb-color-success); color: #fff; }
.hb-tag--warning.hb-tag--dark { background: var(--hb-color-warning); color: #fff; }
.hb-tag--danger.hb-tag--dark  { background: var(--hb-color-danger); color: #fff; }
.hb-tag--info.hb-tag--dark    { background: var(--hb-color-info); color: #fff; }

/* ---- 类型：plain ---- */
.hb-tag--default.hb-tag--plain { background: #fff; color: var(--hb-color-text); border-color: var(--hb-color-border); }
.hb-tag--primary.hb-tag--plain { background: #fff; color: var(--hb-color-primary); border-color: var(--hb-color-primary-border); }
.hb-tag--success.hb-tag--plain { background: #fff; color: var(--hb-color-success); border-color: var(--hb-color-success-border); }
.hb-tag--warning.hb-tag--plain { background: #fff; color: var(--hb-color-warning); border-color: var(--hb-color-warning-border); }
.hb-tag--danger.hb-tag--plain  { background: #fff; color: var(--hb-color-danger); border-color: var(--hb-color-danger-border); }
.hb-tag--info.hb-tag--plain    { background: #fff; color: var(--hb-color-primary); border-color: var(--hb-color-primary-border); }
