@value nav-width from '../layout/layout-global.css';
@value topbar-height from '../layout/layout-global.css';

.nav {
  background-color: var(--q-bg);
  width: nav-width;
  height: 100vh;
  z-index: 30;
  position: absolute;
  top: 0;
  left: calc(nav-width * -1);
  transition: left 0.3s;
}
[dir="rtl"] .nav {
  left: 100vw;
}

.slide-in {
  left: 0;
}
[dir="rtl"] .slide-in {
  left: calc(100vw - nav-width);
}

.topbar-nav {
  height: topbar-height;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  border-bottom: 1px solid var(--q-bg);
}
.topbar-nav button:hover {
  color: var(--q-color-inverse);
}
