.mds-c-scaffold {
  display: flex;
  flex-direction: row;
  padding: 0.75rem 0;
  position: relative;
  width: 100%;

  .mds-c-level {
    &:not(:last-child) {
      margin-bottom: var(--mds-d-spacing--sm);
    }
  }

  &__column:first-child:nth-last-child(3) {
    margin-left: 0.5rem;
  }

  /* stylelint-disable no-descending-specificity */

  /* we overrode this rule to apply a CSS selector trick that allows us to know how many columns we have
     details here: https://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element-has */
  &__column:last-child {
    margin-right: 0.5rem;
  }

  &__column:first-child:nth-last-child(3),
  &__column:last-child {
    flex-shrink: 0;

    > :first-child {
      margin-top: -3px;
    }
  }

  /* stylelint-enable */
  &__column:first-child:nth-last-child(2),
  &__column:nth-child(2):nth-last-child(2) {
    flex-grow: 1;
    flex-wrap: wrap;

    .mds-c-level__item {
      margin-bottom: 0;
      margin-left: 0;
      margin-right: 0;
    }

    &:not(.mds-c-scaffold__column--condensed) {
      margin-right: 1rem;
    }

    .mds-c-level__group--position-center {
      flex-wrap: wrap;
    }

    .mds-c-level__group--position-left {
      flex-wrap: wrap;
    }

    .mds-c-level__group--position-right {
      align-self: baseline;
      flex-wrap: nowrap;
    }
  }

  &__column.mds-c-scaffold__column--condensed {
    /* Override inline style */
    background: transparent !important;
  }
}

/* 
  Add WCAG Reflow Compliance 
  While WCAG Reflow (SC 1.4.10) specifically requires support up to 400% zoom,
  applied reflow styles starting at 250% zoom, since some elements are cut off
  or difficult to use even at that level.
  At 250% zoom on a 1280px screen, the effective CSS width is about 512px.
*/

@media (max-width: $reflow-zoom-level--250) {
  .mds-c-scaffold {
    flex-direction: column;
    gap: var(--mds-d-spacing--sm);

    &__column {
      .mds-c-level {
        justify-content: flex-start;

        &__item .mds-h-visibility-hidden {
          display: none;
        }
      }

      &:last-child {
        margin-top: var(--mds-d-spacing--sm);
        padding-left: var(--mds-d-spacing--md);
      }
    }
  }
}