@use "../abstract" as *;
.grid-with-side {
  position: relative;
  --p-side-size: #{pxToRem(200)};
  > {
    :where(.alert)        { grid-area:alert;  }
    :where(.top-banner)   { grid-area:alert;  }
    :where(.main-header)  { grid-area:header; }
    :where(.main-side)    { grid-area:side;   }
    :where(.main-content) { grid-area:main;   }
  }

  @media #{$break1}, #{$break2} {
    .main-side { display:none; max-block-size:none; }

    &:where(.is-open) {
      .main-side { display:block; position:static; }
      .main-content { display:none; }
    }
  }
  @media #{$break3open} {
    display: grid;
    grid-template-columns: minmax(var(--p-side-size), auto) 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:  "alert alert"
                          "header header"
                          "side   main";
    > .main-content { max-inline-size:calc(100vw - var(--p-side-size)); }

    &.is-fixed-layout {
      block-size:100vh; block-size:100lvh;
      max-block-size:100vh; max-block-size:100lvh;
      .main-side { block-size:auto; }
      .main-content { overflow:auto; }
    }

    &.is-empty-side {
      grid-template-areas:  "header header"
                            "main    main";
      .main-side { block-size:unset; }
      .main-content > * { padding-inline-start:var(--p-side-size); }
    }
    .main-side { block-size:calc(100vh - var(--main-header-height)); }
  }
}
/* no side */
.is-fixed-alert-layout {
  @media #{$break3open} {
    display: flex; flex-direction:column;
    block-size:100vh; block-size:100lvh;
    max-block-size:100vh; max-block-size:100lvh;
    .main-content { overflow:auto; flex:1; }
  }
}

.main-content {
  position:relative; display:flex; flex-direction:column; flex:1; /* z-index:1; */
  > * { flex-shrink:0; }
} /* remove z-index, mage nug in modals */
.main-header  { position:sticky; z-index:5; inset-block-start:0; }
.main-side    { position:sticky; z-index:5; inset-block-start:var(--main-header-height); max-block-size:100vh; overflow:hidden;}