.site {
  display: grid;
  grid-template-columns: auto ($size__site-sidebar);
  grid-template-rows: 1fr auto;
  grid-template-areas:
  "main sidebar"
  "footer footer";
  grid-gap: 10px;
  min-height: 99vh;
}

@media (max-width: 1200px) {
  .site {
    grid-template-columns: 1fr;
    grid-template-areas:
    "main"
    "sidebar"
    "footer";
    grid-gap: 10px;
  } 
  .widget-area{
    padding: 0 3%;
  }
}


.site-no-sidebar {
  display: grid;
  grid-template-columns: auto;
  grid-template-areas:
  "main"
  "footer";
  grid-gap: 10px;
}

@media (max-width: 1200px) {
  .site-no-sidebar {
    grid-template-columns: 1fr;
    grid-template-areas:
    "main"
    "footer";
    grid-gap: 10px;
  } 
  .widget-area{
    padding: 0 3%;
  }
}

.site-header {
  grid-area: header;
}

.site-main {
  grid-area: main;
  overflow: hidden; /* Resolves issue with <pre> elements forcing full width. */
  padding: 0 3%;
  min-height: 100%;
}

.widget-area {
  grid-area: sidebar;
  padding-top: 2rem;
  margin-right: 15px;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: small;
  grid-area: footer;
}

// hacky solution because the toggles button padding is relative to its outer container.
// so this outer containers width must not exeed the main contents width.

.site-header-area-container-outer{
  display: flex;
  width: 100%;
}
.site-header-area-container{
  display: flex;
  flex: 1;
}
.site-header-area{
  display: flex;
  flex: 1;
  padding: 0 3%;
  z-index: 1;
}
.site-header-area-spacer-right{
  display: flex;
  min-width: $size__site-sidebar;
}

// .no-sidebar {

//   .site {
//     display: grid;
//     grid-template-columns: auto;
//     grid-template-areas:
//     "header"
//     "main"
//     "footer";
//   }
// }