#docs-layout,
#default-layout {
  display: grid;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  .wrap {
    margin: 0 auto;
  }
}

#docs-layout {
  height: 100vh;
  overflow: hidden;
  grid-template-columns: $sidebar-width 1fr;
  grid-template-rows: $header-height 1fr;
  grid-template-areas: 'header header''sidebar content';

  .wrap {
    max-width: $grid * 80;
    min-width: 320px;
  }
}

#default-layout {
  grid-template-rows: $header-height + $grid * 3 1fr $footer-height;
  grid-template-columns: 1fr;
  grid-template-areas: 'header''content''footer';

  .wrap {
    max-width: 1200px;
  }
}


#content {
  overflow: auto;
  grid-area: content;
  padding-top: $grid * 3;

  >h2:first-of-type {
    margin-top: $grid * 5;
  }
}


[class^="grid"] {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: $grid * 3;
  align-items: flex-start;

  &[class*="noGap"] {
    grid-gap: 0;
  }

  &[class*="center"] {
    justify-content: center;
  }

  &[class*="middle"] {
    align-items: middle;
  }

  &[class*="full-height"] {
    height: 100%;
  }
}

$i: 1;

@while $i <=12 {
  .col-#{$i} {
    grid-column-end: span $i;
  }

  $i: $i+1;
}

section {
  margin: 0 $grid * 6;

  >.wrap {
    padding: $grid * 10 0;
  }
}

#awn-toast-container {
  bottom: $grid * 5;
  right: $grid * 5;
}
