/* Weiches Ein-/Ausklappen der Seitennavigation. Die Klassen setzt
   app/side-nav-motion.js nur waehrend eines Klicks auf den Pfeil:
   side-nav-moving (Breite gleitet), side-nav-fade-out (Texte/Kaesten weg),
   side-nav-fade-in (Texte/Kaesten kommen nach dem Gleiten zurueck). */

@property --side-nav-width {
  syntax: '<length>';
  inherits: true;
  initial-value: 280px;
}

body.side-nav-moving {
  transition: --side-nav-width 340ms cubic-bezier(.22, .8, .24, 1);
}

/* Waehrend des Gleitens nichts umbrechen lassen: sonst springen die Symbole
   darunter, wenn ein Text in der schmalen Zwischenbreite zweizeilig wird. */
body.side-nav-moving header.sideNav :is(.brandBlock, .sideUser, .sideNavLabel, .sideFootBtn) {
  white-space: nowrap;
}
/* Eingeklappte Knoepfe schneiden sonst das wandernde Symbol ab. */
body.side-nav-moving header.sideNav .sideNavList button {
  overflow: visible;
}

/* Ausblenden vor dem Einklappen */
body.side-nav-fade-out header.sideNav :is(
  .brandBlock, .sideUserName, .sideUser small, .authPanel, .sideMembership,
  .sideNavLabel, .navLabel, .navBadge, .sideFootText, .sideFootBadge,
  .sideLegal, #modeBadge, .sideStatusMeta, .sideResumeArrow
),
body.side-nav-fade-out header.sideNav :is(.sideNavList button, .sideUser)::before,
body.side-nav-fade-out header.sideNav :is(.sideNavList button, .sideUser)::after {
  opacity: 0;
  transition: opacity 110ms ease-out;
}
body.side-nav-fade-out header.sideNav :is(.sideNavList button, .sideUser, .sideFootBtn, .sideStatus) {
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transition: border-color 110ms ease-out, background-color 110ms ease-out, box-shadow 110ms ease-out;
}

/* Einblenden, wenn die Leiste fast angekommen ist */
@keyframes sideNavTextIn {
  from { opacity: 0; translate: -6px 0; }
}
@keyframes sideNavSoftIn {
  from { opacity: 0; }
}
@keyframes sideNavBoxIn {
  from { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; }
  20% { background-image: none; }
}
body.side-nav-fade-in header.sideNav :is(
  .brandBlock, .sideUserName, .sideUser small, .authPanel, .sideMembership,
  .sideNavLabel, .navLabel, .navBadge, .sideFootText, .sideFootBadge,
  .sideLegal, #modeBadge, .sideStatusMeta, .sideResumeArrow
) {
  animation: sideNavTextIn 240ms ease-out 190ms both;
}
/* Kaesten (aktiver Eintrag, Konto-Karte) erst, wenn die Symbole angekommen
   sind: sie wandern nicht mit und stuenden sonst kurz daneben. */
body.side-nav-fade-in header.sideNav :is(.sideNavList button, .sideUser)::before,
body.side-nav-fade-in header.sideNav :is(.sideNavList button, .sideUser)::after {
  animation: sideNavSoftIn 220ms ease-out 290ms both;
}
body.side-nav-fade-in header.sideNav :is(.sideNavList button, .sideUser, .sideFootBtn, .sideStatus) {
  animation: sideNavBoxIn 220ms ease-out 290ms both;
}