/* ─── ButtonsGroup ────────────────────────────────────────────────────────────
   Values: site/tokens.css
   Consumers: site/preview/buttons-group.html + src/components/ButtonsGroup/ButtonsGroup.tsx
   States: data-attributes only
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Root ───────────────────────────────────────────────────────────────────── */

.ds-buttons-group {
  display:     inline-flex;
  align-items: center;
  flex-wrap:   wrap;
}

/* ── Gap by size ────────────────────────────────────────────────────────────── */

.ds-buttons-group[data-size='sm'] { gap: var(--ds-bg-sm-gap); }
.ds-buttons-group[data-size='md'] { gap: var(--ds-bg-md-gap); }
.ds-buttons-group[data-size='lg'] { gap: var(--ds-bg-lg-gap); }
.ds-buttons-group[data-size='xl'] { gap: var(--ds-bg-xl-gap); }

/* ── Direction ──────────────────────────────────────────────────────────────── */

.ds-buttons-group[data-direction='vertical'] {
  flex-direction: column;
  align-items:    stretch;
}

/* ── Alignment ──────────────────────────────────────────────────────────────── */

.ds-buttons-group[data-align='right'] {
  justify-content: flex-end;
}