:host { width: 100%; display: block; container: host / inline-size; }
.button-control_wrapper { display: flex; width: 100%; align-items: center; gap: var(--fds-spacing-100); flex-direction: row; }
.button-control_wrapper > * { flex-grow: 0; }
@container host (min-width: 520px) {
  .button-control_wrapper { flex-direction: row; align-items: center; }
  .button-control_wrapper > * { flex-grow: 0; }
}
@media (max-width: 766px) {
  :host(:not([count="1"])) .button-control_wrapper { flex-direction: column-reverse; }
  :host(:not([count="1"])) .button-control_wrapper > * { width: 100%; }
}
:host([stacking="vertical"]) .button-control_wrapper { display: flex; flex-direction: column-reverse; }
:host([alignment="center"]) .button-control_wrapper { justify-content: center; }
:host([alignment="right"]) .button-control_wrapper { justify-content: right; }