/*
 * drawer -- seitlich einfahrende Navigation. Der Block ohne Modifier ist die
 * öffentliche Navigation links; drawer--end ist der Kontobereich rechts.
 * drawer__head trägt Überschrift und Schließen-Knopf.
 * Ein Zustand: offen -- das Attribut [open] setzt der Browser selbst.
 *
 * Sitzt wie das Modal auf einem <dialog> und wird mit showModal() geöffnet:
 * Fokusfalle, Escape und die Fläche darüber (::backdrop) kommen damit vom
 * Browser statt aus eigenen Regeln. Ein eigenes Scrim-Element gibt es deshalb
 * nicht mehr.
 *
 * Bewegt wird mit @keyframes, nicht mit transition: Eine Animation läuft auch
 * dann los, wenn das Element im selben Augenblick aus display: none kommt.
 * Das Einfahren hängt an [open], das Ausfahren an [data-leaving], das app.js
 * setzt -- geschlossen wird der Dialog erst im animationend, denn ein
 * geschlossener dialog ist display: none und kann sich nicht mehr bewegen.
 */

.drawer {
  /* dialog steht sonst zentriert in der Mitte: margin und die vorgegebenen
     Höchstmaße müssen weg, damit der Kasten an der Kante klebt */
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  inset-inline-end: auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  inline-size: var(--drawer-width);
  max-inline-size: none;
  block-size: 100svh;
  max-block-size: none;
  padding: var(--space-4);
  border: 0;
  border-inline-end: var(--border-width) solid var(--color-border);
  background-color: var(--color-background);
  color: var(--color-text);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Der Block setzt display: flex und schlägt damit die Regel des Browsers, die
   einen geschlossenen dialog ausblendet -- hier wieder hergestellt */
.drawer:not([open]) {
  display: none;
}

/* Eine Animation, keine Transition: Sie läuft auch dann los, wenn das Element
   im selben Augenblick aus display: none kommt -- eine Transition braucht dafür
   einen vorher berechneten Ausgangsstand und bleibt sonst stumm. */
@keyframes drawerSlideInStart {
  from {
    transform: translateX(-100%);
  }
}

@keyframes drawerSlideInEnd {
  from {
    transform: translateX(100%);
  }
}

@keyframes drawerSlideOutStart {
  to {
    transform: translateX(-100%);
  }
}

@keyframes drawerSlideOutEnd {
  to {
    transform: translateX(100%);
  }
}

@keyframes drawerBackdropFadeIn {
  from {
    opacity: 0;
  }
}

@keyframes drawerBackdropFadeOut {
  to {
    opacity: 0;
  }
}

.drawer[open] {
  animation: drawerSlideInStart var(--transition-fast);
}

/* Die Ausfahrt. app.js setzt das Attribut und schließt den Dialog erst im
   animationend -- bis dahin ist er noch offen und damit überhaupt sichtbar.
   forwards hält den Endstand, sonst springt der Drawer im letzten Bild zurück. */
.drawer[data-leaving] {
  animation-name: drawerSlideOutStart;
  animation-fill-mode: forwards;
}

.drawer--end {
  inset-inline-start: auto;
  inset-inline-end: 0;
  border-inline-end: 0;
  border-inline-start: var(--border-width) solid var(--color-border);
}

.drawer--end[open] {
  animation-name: drawerSlideInEnd;
}

.drawer--end[data-leaving] {
  animation-name: drawerSlideOutEnd;
}

.drawer[open]::backdrop {
  background-color: var(--color-scrim);
  animation: drawerBackdropFadeIn var(--transition-fast);
}

.drawer[data-leaving]::backdrop {
  animation-name: drawerBackdropFadeOut;
  animation-fill-mode: forwards;
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  min-height: var(--tap-target);
}

.drawer__title {
  font-size: var(--font-size-large);
}