@value topbar-height from './layout-global.css';
@value nav-small-width from './layout-global.css';
@value nav-width from './layout-global.css';
@value aside-width from './layout-global.css';
@value tablet-max from './layout-global.css';


.root {
  composes: root from './layout-global.css';
  display: grid;
  grid-template-columns: nav-small-width calc(100% - nav-small-width);
  grid-template-rows: topbar-height auto;
  grid-template-areas:
    "nav topbar"
    "nav main";
  justify-content: stretch;
}

.nav {
  grid-area: nav;
  width: nav-small-width;
  position: fixed;
}
.aside {
  grid-area: aside;
  position: fixed;
}
.main {
  composes: main from './layout-global.css';
  grid-area: main;
  align-self: start;
}

.topbar-main {
  grid-area: topbar;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  width: 100%;
}
.topbar-main button:hover {
  color: var(--q-color-inverse);
}