/* ==========================================================================
 * Toggles
 * ========================================================================== */

.mds-c-toggles {
  --mds-v-toggles__margin-bottom: var(
    --mds-d-spacing--xl
  ); /* Spacing beneath Toggles component */

  --mds-v-toggles__gap: var(
    --mds-d-spacing--lg
  ); /* Horizontal and vertical gap between individual Toggles */

  display: flex;
  flex-wrap: wrap;
  margin: calc(var(--mds-v-toggles__gap) * -0.5);
  width: calc(100% + var(--mds-v-toggles__gap));

  &:not(:last-child) {
    margin-bottom: calc(
      (var(--mds-v-toggles__gap) * 0.5) + var(--mds-v-toggles__margin-bottom)
    );
  }

  > .mds-c-toggle {
    margin: calc(var(--mds-v-toggles__gap) * 0.25);
    padding: calc(var(--mds-v-toggles__gap) * 0.25);
  }

  .mds-c-control-group & {
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: var(--mds-d-spacing--xxs);
    padding-top: var(--mds-d-spacing--xxs);
  }
}