// Main Layout Grid

.frame {
  --spacing: $spacing-md;

  // Flexbox Fallback
  display: flex;
  flex-wrap: wrap;

  // Grid
  display: grid;
  height: 100vh;

  grid-template-rows:     $topbar-height 1fr $topbar-height;
  grid-template-columns:  1fr;
  grid-template-areas:    "header"
                          "main"
                          "footer";

  background: $light-gray-1_5;

  &__header {
    display: flex;
    flex-basis: 100%;
    grid-area: header;
    height: $topbar-height;
    position: relative;
    width: 100%;
  }

  &__nav {
    padding-top: $layout-xs;
    padding-bottom: $layout-xs;
    display: none;
    flex: 0 0 $navigation-width;
    grid-area: nav;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  &__main {
    flex: 1;
    grid-area: main;
    padding-top: $layout-xs;
    padding-bottom: $layout-xs;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  &__mobile-nav {
    display: flex;
    flex-basis: 100%;
    grid-area: footer;
    height: $topbar-height;
    width: 100%;
  }

  @media screen and (min-width: breakpoint('md')) {
    --spacing: $spacing-lg;

    grid-template-rows:     $topbar-height 1fr;
    grid-template-columns:  $navigation-width 1fr;
    grid-template-areas:    "header header"
                            "nav    main";

    &__nav {
      display: flex;
    }

    &__mobile-nav {
      display: none;
    }
  }
}

// // Dashboard Overview Grid

// .dashboard {
//   --column-count: 2;

//   // Flexbox Fallback
//   display: flex;
//   flex-wrap: wrap;
//   margin: 0 calc(var(--spacing) * -0.5);

//   // Grid
//   display: grid;
//   grid-template-columns: repeat(var(--column-count), 1fr);
//   grid-gap: var(--spacing);

//   &__item {
//     // By default, items span 2 columns
//     flex: 1 1 50%;
//     grid-column-end: span 2;
//     padding: calc(var(--spacing) / 2);

//     // these span the full width
//     &--full {
//       flex-basis: 100%;
//       grid-column: 1 / -1;
//     }

//     // these span only one column
//     &--col {
//       flex-basis: calc(100% / var(--column-count));
//       grid-column-end: span 1;
//     }
//   }

//   // Switch to 4-col grid on larger screens
//   @media screen and (min-width: 48rem) {
//     --column-count: 4;
//   }

//   // If we have grid support, reset the margins and paddings;
//   // grid-gap handles the spacing for us.
//   @supports (display: grid) {
//     margin: 0;

//     &__item {
//       padding: 0;
//     }
//   }
// }