/* ==========================================================================
 * Toggle Buttons
 * ========================================================================== */

.mds-c-toggle-buttons {
  --mds-c-toggle-buttons-gap: var(--mds-d-spacing--xl);

  column-gap: var(--mds-c-toggle-buttons-gap);
  display: grid;
  grid-template-columns: repeat(3, minmax(6rem, 12rem));
  grid-template-rows: repeat(auto-fill, auto);
  row-gap: var(--mds-c-toggle-buttons-gap);

  &--direction-column {
    display: flex;
    flex-direction: column;
    gap: var(--mds-c-toggle-buttons-gap);
    width: 100%;
  }

  @each $size in (xxxl, xxl, xl, lg, med, sm, xs, xxs, zero, none) {
    &--gap-$(size) {
      --mds-c-toggle-buttons-gap: var(--mds-d-spacing--$(size));
    }
  }
}