/**
 * values for overall layout
 * the specific layout need to import them
 */

/* size definitions */
@value topbar-height: 3rem;
@value nav-small-width: 8rem;
@value nav-width: 250px;
@value aside-width: 300px;
@value mobile-max: 768px;
@value tablet-max: 950px;
@value largetablet-max: 1200px;


/* style references */
.root {
  background-color: var(--q-bg);
  min-height: 100vh;
}
.main {
  margin: 0;
  padding: 0;
  background-color: var(--q-bg);
}


/* global styles */
:global(.topbar) {
  background: var(--q-theme-strong);
  height: topbar-height;
}
:global(.topbar) button {
  color: var(--q-color-inverse);
  margin: 0 1rem;
}
[dir=rtl] :global(.topbar) button {
  transform: scale(-1, 1);
}
