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

.nav {
  z-index: 10;
}

.nav-overflow {
  margin-top: topbar-height;
  height: 100vh;
  background: var(--q-nav-bg);
}

.nav-overflow.showall {
  width: nav-width;
}

.main {
  grid-area: main;
  background: var(--q-bg);
}

.nav-fake-overflow {
  background:var(--q-nav-bg);
  position: absolute;
  top: 0;
  bottom: 0;
  width: nav-width;
  z-index: -1;
  transform: translateX(0);
}
[dir=ltr] .nav-fake-overflow.in {
  left: calc(nav-small-width - nav-width);
  animation: flowin-nav-ltr 0.5s;
}
[dir=ltr] .nav-fake-overflow.out {
  left: 0;
  /*animation: flowin-nav-ltr 0.5s reverse;*/
}
[dir=rtl] .nav-fake-overflow.in {
  left: calc(100% - nav-small-width);
  animation: flowin-nav-rtl 0.5s;
}
[dir=rtl] .nav-fake-overflow.out {
  left: calc(100% - nav-width);
  /*animation: flowin-nav-rtl 0.5s reverse;*/
}

.topbar-nav {
  position: absolute;
  border-color: var(--q-theme-middle);
  border-style: solid;
  border-width: 0;
  width: nav-width;
  padding-inline-start: calc(nav-width - nav-small-width);
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
}
.topbar-nav button:hover {
  color: var(--q-color-inverse);
}
[dir="ltr"] .topbar-nav {
  left: calc(nav-small-width - nav-width);
  border-right-width: 1px;
}
[dir="rtl"] .topbar-nav {
  left: calc(100% - nav-small-width);
  border-left-width: 1px;
}
[dir=ltr] .topbar-nav.increase {
  animation: flowin-nav-ltr 0.5s;
}
[dir=rtl] .topbar-nav.increase {
  animation: flowin-nav-rtl 0.5s;
}

.topbar-nav.showall {
  justify-content: flex-end;
}
[dir=ltr] .topbar-nav.showall {
  transform: translateX(calc(nav-width - nav-small-width));
}
[dir=rtl] .topbar-nav.showall {
  transform: translateX(calc(nav-small-width - nav-width));
}


@keyframes flowin-nav-ltr {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(nav-width - nav-small-width));
  }
}

@keyframes flowin-nav-rtl {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(nav-small-width - nav-width));
  }
}
