@define-mixin mds-m-layout $backgroundcolor {
  background-color: $(backgroundcolor);
  display: grid;
  grid-template-columns: 1fr auto;
  justify-content: center;
  position: relative;
  width: 100%;
}

@define-mixin mds-m-layout-footer {
  @mixin mds-m-layout-footer-common footer;

  & ~ .mds-c-alerts {
    &--position-absolute {
      bottom: calc(var(--mds-d-spacing--xxxl) * 2);
      max-width: calc(100% - 3rem);
      overflow: visible;
      right: var(--mds-d-spacing--xl);
      width: auto;
      z-index: 9999;
    }
  }
}

@define-mixin mds-m-layout-footer-common $gridArea {
  background-color: var(--mds-t-background-color--primary);
  border-top: 1px solid var(--mds-t-border-color--secondary);
  grid-area: $(gridArea);
}

@define-mixin mds-m-layout-header-common $gridArea {
  background-color: var(--mds-t-background-color--primary);
  box-shadow: var(--mds-d-elevation--3);
  grid-area: $(gridArea);
  position: relative;
  z-index: $z-index--default;
}

@define-mixin mds-m-layout-main-content {
  background-color: var(--mds-t-background-color--primary);
  grid-area: main-content;
  overflow-x: hidden;
  overflow-y: auto;

  &--background-light {
    background-color: var(--mds-t-background-color--secondary);
  }
}

@define-mixin mds-m-layout-sidebar $borderType {
  background-color: var(--mds-t-background-color--primary);
  grid-area: aside;
  $(borderType): 1px solid var(--mds-t-border-color--secondary);

  &--background-light {
    background-color: var(--mds-t-background-color--secondary);
  }
}

@define-mixin mds-m-layout-sub-header {
  grid-area: subheader;
}

.mds-c-layout {
  @mixin mds-m-layout var(--mds-t-background-color--primary);

  grid-template-areas: 'header header' 'subheader subheader' 'main-content aside' 'footer aside';
  grid-template-rows: auto auto 1fr fit-content(12.75rem);
  position: initial;

  & > .mds-c-header {
    @mixin mds-m-layout-header-common header;
  }

  & > .mds-c-sub-header {
    @mixin mds-m-layout-sub-header;
  }

  & > .mds-c-main-content {
    @mixin mds-m-layout-main-content;

    &--columns {
      display: flex;
      flex-direction: column;
    }

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

  & > .mds-c-sidebar {
    @mixin mds-m-layout-sidebar border-left;
  }

  & > .mds-c-footer {
    @mixin mds-m-layout-footer;
  }

  &--reverse {
    grid-template-areas: 'header header' 'subheader subheader' 'aside main-content' 'footer footer';
    grid-template-columns: auto 1fr;

    & > .mds-c-sidebar {
      @mixin mds-m-layout-sidebar border-right;

      border-left: none;
      overflow-y: auto;
      width: 25rem;
    }
  }

  &--nested {
    @mixin mds-m-layout var(--mds-t-background-color--secondary);

    grid-template-areas: 'header header' 'subheader subheader' 'nestedheader nestedheader' 'main-content aside' 'nestedfooter aside' 'footer footer';
    grid-template-rows: auto auto auto 1fr fit-content(12.75rem) auto;

    & > .mds-c-header--nested {
      @mixin mds-m-layout-header-common nestedheader;

      margin: var(--mds-d-spacing--xxl);
      margin-bottom: 0;
    }

    & > .mds-c-main-content {
      border-left: 1px solid var(--mds-t-border-color--secondary);
      border-right: 1px solid var(--mds-t-border-color--secondary);
      margin-bottom: 0;
      margin-left: var(--mds-d-spacing--xxl);
      margin-right: var(--mds-d-spacing--xxl);
    }

    & > .mds-c-sidebar {
      @mixin mds-m-layout-sidebar border-right;

      border-left: none;
      margin-bottom: 0;
      margin-left: calc(var(--mds-d-spacing--xxl) * -1);
      margin-right: var(--mds-d-spacing--xxl);
    }

    & > .mds-c-footer--nested {
      @mixin mds-m-layout-footer-common nestedfooter;

      border-left: 1px solid var(--mds-t-border-color--secondary);
      border-right: 1px solid var(--mds-t-border-color--secondary);
      margin-bottom: 0;
      margin-left: var(--mds-d-spacing--xxl);
      margin-right: var(--mds-d-spacing--xxl);
    }
  }
}

/* 
  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.
*/
@media (max-width: $reflow-zoom-level--150) {
  .mds-c-layout {
    .mds-c-main-content .mds-c-section {
      overflow: visible;
    }

    /* Wrap header level content */
    .mds-c-header {
      .mds-c-section .mds-c-level {
        flex-wrap: wrap;
        gap: var(--mds-d-spacing--sm);
      }

      /* Enable title truncation and expand on edit only when the editable control is present */
      .mds-c-level__title:has(.mds-c-editable__control) {
        .mds-c-editable__control {
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .mds-is-editing,
        .mds-is-editing .mds-c-editable__control {
          max-height: 3rem;
          overflow: visible;
          text-overflow: clip;
          white-space: normal;
        }
      }
    }
  }
}

@media (max-width: $reflow-zoom-level--400) {
  .mds-c-layout {
    display: block;
    overflow-x: hidden;

    .mds-c-header {
      min-height: 3rem;

      .mds-c-section {
        padding: var(--mds-d-spacing--xs) var(--mds-d-spacing--sm);

        .mds-c-level {
          flex-wrap: wrap;
          gap: var(--mds-d-spacing--sm);

          button.mds-c-editable {
            max-height: 3rem;
            overflow-y: auto;
          }

          .mds-c-level__group:nth-child(2) {
            margin-left: 0;
          }
        }
      }
    }
  }
}