/* ==========================================================================
 * Section
 * ========================================================================== */

.mds-c-section {
  border-color: var(--mds-t-border-color--secondary);

  @each $spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--padding-$(spacing) {
      padding: var(--mds-d-spacing--$(spacing));
    }
  }

  @each $x-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--padding-vertical-$(x-spacing) {
      padding-bottom: var(--mds-d-spacing--$(x-spacing));
      padding-top: var(--mds-d-spacing--$(x-spacing));
    }
  }

  @each $y-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--padding-horizontal-$(y-spacing) {
      padding-left: var(--mds-d-spacing--$(y-spacing));
      padding-right: var(--mds-d-spacing--$(y-spacing));
    }
  }

  @each $b-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--padding-bottom-$(b-spacing) {
      padding-bottom: var(--mds-d-spacing--$(b-spacing));
    }
  }

  @each $l-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--padding-left-$(l-spacing) {
      padding-left: var(--mds-d-spacing--$(l-spacing));
    }
  }

  @each $t-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--padding-top-$(t-spacing) {
      padding-top: var(--mds-d-spacing--$(t-spacing));
    }
  }

  @each $r-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--padding-right-$(r-spacing) {
      padding-right: var(--mds-d-spacing--$(r-spacing));
    }
  }

  @each $radius in (default, lg) {
    &&--radius-$(radius) {
      border-radius: var(--mds-d-border-radius--$(radius));
    }
  }

  &--no-scroll {
    @mixin mds-m-no-scroll;
  }

  &&--divided {
    &:not(:last-child) {
      border-bottom-style: solid;
      border-bottom-width: 1px;
    }
  }

  &.mds-is-droppable {
    background-color: var(--mds-t-background-color--accent-muted);
    box-shadow:
      calc(var(--mds-d-spacing--xs) * -1) 0 0 var(--mds-d-spacing--xs)
        var(--mds-t-background-color--accent-muted),
      var(--mds-d-spacing--xs) 0 0 var(--mds-d-spacing--xs)
        var(--mds-t-background-color--accent-muted);
    cursor: grabbing;
  }

  @each $spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--margin-$(spacing) {
      margin: var(--mds-d-spacing--$(spacing));
    }
  }

  @each $x-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--margin-vertical-$(x-spacing) {
      margin-bottom: var(--mds-d-spacing--$(x-spacing));
      margin-top: var(--mds-d-spacing--$(x-spacing));
    }
  }

  @each $y-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--margin-horizontal-$(y-spacing) {
      margin-left: var(--mds-d-spacing--$(y-spacing));
      margin-right: var(--mds-d-spacing--$(y-spacing));
    }
  }

  @each $b-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--margin-bottom-$(b-spacing) {
      margin-bottom: var(--mds-d-spacing--$(b-spacing));
    }
  }

  @each $l-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--margin-left-$(l-spacing) {
      margin-left: var(--mds-d-spacing--$(l-spacing));
    }
  }

  @each $t-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--margin-top-$(t-spacing) {
      margin-top: var(--mds-d-spacing--$(t-spacing));
    }
  }

  @each $r-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--margin-right-$(r-spacing) {
      margin-right: var(--mds-d-spacing--$(r-spacing));
    }
  }
}

/* 
  Add WCAG Reflow Compliance 
  While WCAG Reflow (SC 1.4.10) specifically requires support up to 400% zoom,
  applied reflow styles starting at 150% zoom, since some elements are cut off
  or difficult to use even at that level.
  At 150% zoom on a 1280px screen, the effective CSS width is about 853.33px.
  
  Strategy: Step down one size level to maintain spacing hierarchy
  - xxxl → xxl
  - xxl → xl
  - xl → lg
  - lg → med
  - med → sm
*/
@media (max-width: $reflow-zoom-level--150) {
  .mds-c-section {
    &&--padding-xxxl {
      padding: var(--mds-d-spacing--xxl);
    }

    &&--padding-xxl {
      padding: var(--mds-d-spacing--xl);
    }

    &&--padding-xl {
      padding: var(--mds-d-spacing--lg);
    }

    &&--padding-lg {
      padding: var(--mds-d-spacing--med);
    }

    &&--padding-med {
      padding: var(--mds-d-spacing--sm);
    }

    &&--padding-vertical-xxxl {
      padding-bottom: var(--mds-d-spacing--xxl);
      padding-top: var(--mds-d-spacing--xxl);
    }

    &&--padding-vertical-xxl {
      padding-bottom: var(--mds-d-spacing--xl);
      padding-top: var(--mds-d-spacing--xl);
    }

    &&--padding-vertical-xl {
      padding-bottom: var(--mds-d-spacing--lg);
      padding-top: var(--mds-d-spacing--lg);
    }

    &&--padding-vertical-lg {
      padding-bottom: var(--mds-d-spacing--med);
      padding-top: var(--mds-d-spacing--med);
    }

    &&--padding-vertical-med {
      padding-bottom: var(--mds-d-spacing--sm);
      padding-top: var(--mds-d-spacing--sm);
    }

    &&--padding-horizontal-xxxl {
      padding-left: var(--mds-d-spacing--xxl);
      padding-right: var(--mds-d-spacing--xxl);
    }

    &&--padding-horizontal-xxl {
      padding-left: var(--mds-d-spacing--xl);
      padding-right: var(--mds-d-spacing--xl);
    }

    &&--padding-horizontal-xl {
      padding-left: var(--mds-d-spacing--lg);
      padding-right: var(--mds-d-spacing--lg);
    }

    &&--padding-horizontal-lg {
      padding-left: var(--mds-d-spacing--med);
      padding-right: var(--mds-d-spacing--med);
    }

    &&--padding-horizontal-med {
      padding-left: var(--mds-d-spacing--sm);
      padding-right: var(--mds-d-spacing--sm);
    }

    &&--padding-bottom-xxxl {
      padding-bottom: var(--mds-d-spacing--xxl);
    }

    &&--padding-bottom-xxl {
      padding-bottom: var(--mds-d-spacing--xl);
    }

    &&--padding-bottom-xl {
      padding-bottom: var(--mds-d-spacing--lg);
    }

    &&--padding-bottom-lg {
      padding-bottom: var(--mds-d-spacing--med);
    }

    &&--padding-bottom-med {
      padding-bottom: var(--mds-d-spacing--sm);
    }

    &&--padding-left-xxxl {
      padding-left: var(--mds-d-spacing--xxl);
    }

    &&--padding-left-xxl {
      padding-left: var(--mds-d-spacing--xl);
    }

    &&--padding-left-xl {
      padding-left: var(--mds-d-spacing--lg);
    }

    &&--padding-left-lg {
      padding-left: var(--mds-d-spacing--med);
    }

    &&--padding-left-med {
      padding-left: var(--mds-d-spacing--sm);
    }

    &&--padding-top-xxxl {
      padding-top: var(--mds-d-spacing--xxl);
    }

    &&--padding-top-xxl {
      padding-top: var(--mds-d-spacing--xl);
    }

    &&--padding-top-xl {
      padding-top: var(--mds-d-spacing--lg);
    }

    &&--padding-top-lg {
      padding-top: var(--mds-d-spacing--med);
    }

    &&--padding-top-med {
      padding-top: var(--mds-d-spacing--sm);
    }

    &&--padding-right-xxxl {
      padding-right: var(--mds-d-spacing--xxl);
    }

    &&--padding-right-xxl {
      padding-right: var(--mds-d-spacing--xl);
    }

    &&--padding-right-xl {
      padding-right: var(--mds-d-spacing--lg);
    }

    &&--padding-right-lg {
      padding-right: var(--mds-d-spacing--med);
    }

    &&--padding-right-med {
      padding-right: var(--mds-d-spacing--sm);
    }
  }
}

/* 
  Further scaling at 250% zoom level
  At 250% zoom on a 1280px screen, the effective CSS width is about 512px.
  
  Strategy: Step down two size levels to maintain spacing hierarchy
  - xxxl → xl
  - xxl → lg
  - xl → med
  - lg → sm

*/
@media (max-width: $reflow-zoom-level--250) {
  .mds-c-section {
    &&--padding-xxxl {
      padding: var(--mds-d-spacing--xl);
    }

    &&--padding-xxl {
      padding: var(--mds-d-spacing--lg);
    }

    &&--padding-xl {
      padding: var(--mds-d-spacing--med);
    }

    &&--padding-lg {
      padding: var(--mds-d-spacing--sm);
    }

    &&--padding-vertical-xxxl {
      padding-bottom: var(--mds-d-spacing--xl);
      padding-top: var(--mds-d-spacing--xl);
    }

    &&--padding-vertical-xxl {
      padding-bottom: var(--mds-d-spacing--lg);
      padding-top: var(--mds-d-spacing--lg);
    }

    &&--padding-vertical-xl {
      padding-bottom: var(--mds-d-spacing--med);
      padding-top: var(--mds-d-spacing--med);
    }

    &&--padding-vertical-lg {
      padding-bottom: var(--mds-d-spacing--sm);
      padding-top: var(--mds-d-spacing--sm);
    }

    &&--padding-horizontal-xxxl {
      padding-left: var(--mds-d-spacing--xl);
      padding-right: var(--mds-d-spacing--xl);
    }

    &&--padding-horizontal-xxl {
      padding-left: var(--mds-d-spacing--lg);
      padding-right: var(--mds-d-spacing--lg);
    }

    &&--padding-horizontal-xl {
      padding-left: var(--mds-d-spacing--med);
      padding-right: var(--mds-d-spacing--med);
    }

    &&--padding-horizontal-lg {
      padding-left: var(--mds-d-spacing--sm);
      padding-right: var(--mds-d-spacing--sm);
    }

    &&--padding-bottom-xxxl {
      padding-bottom: var(--mds-d-spacing--xl);
    }

    &&--padding-bottom-xxl {
      padding-bottom: var(--mds-d-spacing--lg);
    }

    &&--padding-bottom-xl {
      padding-bottom: var(--mds-d-spacing--med);
    }

    &&--padding-bottom-lg {
      padding-bottom: var(--mds-d-spacing--sm);
    }

    &&--padding-left-xxxl {
      padding-left: var(--mds-d-spacing--xl);
    }

    &&--padding-left-xxl {
      padding-left: var(--mds-d-spacing--lg);
    }

    &&--padding-left-xl {
      padding-left: var(--mds-d-spacing--med);
    }

    &&--padding-left-lg {
      padding-left: var(--mds-d-spacing--sm);
    }

    &&--padding-top-xxxl {
      padding-top: var(--mds-d-spacing--xl);
    }

    &&--padding-top-xxl {
      padding-top: var(--mds-d-spacing--lg);
    }

    &&--padding-top-xl {
      padding-top: var(--mds-d-spacing--med);
    }

    &&--padding-top-lg {
      padding-top: var(--mds-d-spacing--sm);
    }

    &&--padding-right-xxxl {
      padding-right: var(--mds-d-spacing--xl);
    }

    &&--padding-right-xxl {
      padding-right: var(--mds-d-spacing--lg);
    }

    &&--padding-right-xl {
      padding-right: var(--mds-d-spacing--med);
    }

    &&--padding-right-lg {
      padding-right: var(--mds-d-spacing--sm);
    }
  }
}

.mds-c-section-group {
  border: 1px solid var(--mds-t-border-color--secondary);
  border-radius: var(--mds-d-border-radius--default);

  > .mds-c-section:first-child {
    border-top-left-radius: var(--mds-d-border-radius--default);
    border-top-right-radius: var(--mds-d-border-radius--default);
  }

  > .mds-c-section:last-child {
    border-bottom-left-radius: var(--mds-d-border-radius--default);
    border-bottom-right-radius: var(--mds-d-border-radius--default);
  }
}