:host { display: block; }
.hb-steps { display: flex; }
.hb-steps--vertical { flex-direction: column; }
.hb-steps__item { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
.hb-steps--vertical .hb-steps__item { flex-direction: row; align-items: flex-start; gap: var(--hb-spacing-sm); padding-bottom: var(--hb-spacing-md); }
.hb-steps__head { display: flex; align-items: center; width: 100%; }
.hb-steps__icon {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: var(--hb-font-size-sm); font-weight: 600; flex-shrink: 0;
  background: var(--hb-color-fill); color: var(--hb-color-text-secondary); transition: all 0.3s;
}
.hb-steps__item--process .hb-steps__icon { background: var(--hb-color-primary); color: #fff; }
.hb-steps__item--finish .hb-steps__icon { background: var(--hb-color-primary); color: #fff; }
.hb-steps__item--error .hb-steps__icon { background: var(--hb-color-danger); color: #fff; }
.hb-steps__line { flex: 1; height: 2px; background: var(--hb-color-border-secondary); margin: 0 var(--hb-spacing-xs); }
.hb-steps__item--finish .hb-steps__line { background: var(--hb-color-primary); }
.hb-steps__main { text-align: center; margin-top: var(--hb-spacing-xs); }
.hb-steps--vertical .hb-steps__main { text-align: left; }

/* 对齐方式（alignCenter prop）：默认 false 时图标与文字左对齐，true 时居中 */
.hb-steps:not(.hb-steps--align-center) .hb-steps__item { align-items: flex-start; }
.hb-steps:not(.hb-steps--align-center) .hb-steps__main { text-align: left; }
.hb-steps__title { font-size: var(--hb-font-size-sm); font-weight: 600; }
.hb-steps__item--process .hb-steps__title { color: var(--hb-color-primary); }
.hb-steps__description { font-size: var(--hb-font-size-xs); color: var(--hb-color-text-secondary); margin-top: 2px; }
