:host {
  display: inline-flex;
  --hb-space-size: 8px;
  --hb-space-alignment: start;
  --hb-space-fill-ratio: 100%;
}

.hb-space {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: var(--hb-space-alignment);
  gap: var(--hb-space-size);
}

.hb-space--horizontal {
  flex-direction: row;
}

.hb-space--vertical {
  flex-direction: column;
}

.hb-space--wrap {
  flex-wrap: wrap;
}

.hb-space--fill {
  width: 100%;
}

.hb-space--fill.hb-space--horizontal {
  width: 100%;
}

.hb-space--fill.hb-space--vertical {
  height: 100%;
}

::slotted(*) {
  display: inline-block;
  flex-shrink: 0;
  margin: 0;
}

/* 分隔符样式 */
.hb-space__item {
  display: inline-flex;
  align-items: center;
}

.hb-space__item + .hb-space__item::before {
  content: attr(data-separator);
  display: inline-block;
  margin: 0 var(--hb-space-size);
  color: var(--hb-color-text-placeholder, #c0c4cc);
}

