@use '../utils/constants.scss';
@use '../utils/tokens.scss' as tokens;

$pageLayoutBaseClass: '#{constants.$prefix}page-layout';

.#{$pageLayoutBaseClass} {
  display: grid;
  grid-template-areas:
    'header header'
    'aside main';
  grid-template-rows: auto 1fr;
  grid-template-columns: auto 1fr;
  height: 100%;
  width: 100%;
  flex: 1;
}

.#{$pageLayoutBaseClass}__header {
  grid-area: header;
  width: 100%;
  z-index: 1;
}

.#{$pageLayoutBaseClass}__aside {
  grid-area: aside;
  height: 100%;
  min-height: 0;
  z-index: 0;
  display: flex;
}

.#{$pageLayoutBaseClass}__main {
  grid-area: main;
  height: 100%;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
}