.fizz-layout-sidebar-iframe {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "header"
    "nav"
    "aside"
}

.fizz-layout-sidebar-iframe > [data-grid-area="header"] {
  grid-area: header;
}

.fizz-layout-sidebar-iframe > [data-grid-area="nav"] {
  grid-area: nav;
}

.fizz-layout-sidebar-iframe > [data-grid-area="aside"] {
  grid-area: aside;
  position: relative;
}

.fizz-layout-sidebar-iframe > [data-grid-area="aside"] .fizz-toggle-list {
  margin: $spacing-16;
}

.fizz-layout-sidebar-iframe > [data-grid-area="aside"] .fizz-scroller {
  margin-bottom: 86px;
  width: calc(100% - #{$spacing-32});
  top: $spacing-16;
  left: $spacing-16;
}

.fizz-layout-sidebar-iframe > [data-grid-area="main"] {
  grid-area: main;
}

.fizz-layout-sidebar-iframe > [data-grid-area="main"] iframe {
  display: none;
}

@media (min-width: $breakpoint-m) {

  .fizz-layout-sidebar-iframe {
    --aside-width: calc(290px + #{$spacing-32});
   grid-template-columns: minmax(#{$spacing-16}, 1fr) var(--aside-width) minmax(0, calc(#{$breakpoint-xl} - var(--aside-width))) minmax(#{$spacing-16}, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "header header header header"
      "nav nav nav nav"
      ". aside main .";
    padding-bottom: $spacing-32;
  }

  .fizz-layout-sidebar-iframe > [data-grid-area="nav"] {
    margin-bottom: $spacing-32;
  }

  .fizz-layout-sidebar-iframe > [data-grid-area="aside"] {
    margin-right: $spacing-32;
  }

  .fizz-layout-sidebar-iframe > [data-grid-area="aside"] .fizz-toggle-list {
    margin: 0;
  }
  
  .fizz-layout-sidebar-iframe > [data-grid-area="aside"] .fizz-scroller {
    margin-bottom: 0;
    width: calc(var(--aside-width) - 32px);
    top: 0;
    left: 0;
  }

  .fizz-layout-sidebar-iframe > [data-grid-area="main"] iframe {
    display: block;
  }
}