:host { display: block; }
.hb-segmented {
  display: inline-flex;
  padding: 2px;
  background: var(--hb-color-fill);
  border-radius: var(--hb-border-radius-base);
  box-sizing: border-box;
}
.hb-segmented--block { display: flex; width: 100%; }
.hb-segmented__items { display: inline-flex; gap: 2px; width: 100%; }

/* 尺寸 */
.hb-segmented--large .hb-segmented__item { padding: 6px 18px; font-size: var(--hb-font-size-base); }
.hb-segmented--default .hb-segmented__item { padding: 4px 14px; font-size: var(--hb-font-size-sm); }
.hb-segmented--small .hb-segmented__item { padding: 2px 10px; font-size: var(--hb-font-size-xs); }

.hb-segmented__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--hb-color-text);
  cursor: pointer;
  border-radius: var(--hb-border-radius-sm);
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
  flex: 1;
  line-height: 1.5;
  font-family: inherit;
}
.hb-segmented__item:hover:not(.hb-segmented__item--active):not(.hb-segmented__item--disabled) {
  background: var(--hb-color-fill-secondary);
}
/* 高亮滑块背景 */
.hb-segmented__item--active {
  background: var(--hb-color-bg-container);
  color: var(--hb-color-primary);
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.hb-segmented__item--disabled {
  color: var(--hb-color-text-disabled);
  cursor: not-allowed;
}
.hb-segmented__item-label { pointer-events: none; }
