$layoutRows: getCssVar(layout-rows);
$layoutColumns: getCssVar(layout-columns);
$layoutAreas: getCssVar(layout-areas);

.layout,
[class*='layout-'] {
  display: grid;
  grid-gap: 0;
  min-height: 100vh;
  grid-template-rows: var($layoutRows);
  grid-template-columns: var($layoutColumns);
  grid-template-areas: var($layoutAreas);

  header,
  .layout-header {
    grid-area: header;
  }

  main,
  .layout-main {
    grid-area: main;
  }

  footer,
  .layout-footer {
    grid-area: footer;
  }
}

.layout-sidenav {
  #{$layoutAreas}: 'header header' 'sidenav main' 'footer footer';
  #{$layoutColumns}: auto minmax(0, 1fr);

  .sidenav-fixed {
    position: initial;
    z-index: $layouts-sidenav-fixed-z-index;
    grid-area: sidenav;
  }

  &.layout-sidenav-right {
    #{$layoutAreas}: 'header header' 'main sidenav' 'footer footer';
    #{$layoutColumns}: minmax(0, 1fr) auto;
  }

  &.layout-sidenav-both {
    #{$layoutAreas}: 'header header header' 'sidenav-left main sidenav-right' 'footer footer footer';
    #{$layoutColumns}: auto minmax(0, 1fr) auto;

    .sidenav {
      grid-area: sidenav-left;

      &.sidenav-right {
        grid-area: sidenav-right;
      }
    }
  }
}

.layout-sidenav-fixed {
  #{$layoutAreas}: 'header' 'main' 'footer';
  #{$layoutColumns}: minmax(0, 1fr);
}

.layout-under-navbar {
  header,
  .layout-header {
    padding-left: initial;
    padding-right: initial;
  }

  .navbar-fixed .navbar {
    margin-left: 0;
    margin-right: 0;
  }
}

@include responsive('sm-down') {
  .layout-sidenav {
    #{$layoutAreas}: 'header' 'main' 'footer' !important;
    #{$layoutColumns}: minmax(0, 1fr) !important;

    .sidenav-fixed {
      position: fixed;
    }
  }
}

$sidenavWidth: getCssVar(sidenav-width);

@include responsive('md-up') {
  .layout-sidenav,
  .layout-sidenav-fixed,
  .layout-under-navbar {
    .sidenav-fixed {
      z-index: $layouts-sidenav-fixed-z-index-mdup;
    }
  }

  .layout-sidenav-fixed {
    .navbar-fixed .navbar {
      margin-left: var($sidenavWidth);
    }

    &.layout-sidenav-right {
      .navbar-fixed .navbar {
        margin-right: var($sidenavWidth);
        margin-left: 0;
      }
    }

    &.layout-sidenav-both {
      .navbar-fixed .navbar {
        margin-right: var($sidenavWidth);
        margin-left: var($sidenavWidth);
      }
    }
  }

  .layout-sidenav-fixed,
  .layout-under-navbar {
    header,
    .layout-header,
    main,
    .layout-main {
      padding-left: var($sidenavWidth);
    }

    .footer,
    .layout-footer {
      padding-left: calc(var(#{$sidenavWidth}) + 0.5rem);
    }

    &.layout-sidenav-right {
      header,
      .layout-header,
      main,
      .layout-main {
        padding-right: var($sidenavWidth);
        padding-left: 0;
      }

      footer,
      .layout-footer {
        padding-right: calc(var(#{$sidenavWidth}) + 0.5rem);
        padding-left: 0.5rem;
      }
    }

    &.layout-sidenav-both {
      header,
      .layout-header,
      main,
      .layout-main {
        padding-right: var($sidenavWidth);
        padding-left: var($sidenavWidth);
      }

      footer,
      .layout-footer {
        padding-right: calc(var(#{$sidenavWidth}) + 0.5rem);
        padding-left: calc(var(#{$sidenavWidth}) + 0.5rem);
      }
    }
  }

  .layout-under-navbar {
    .sidenav-fixed {
      top: var(getCssVar(navbar-height));
    }
  }
}