/* Side navigation (ui.md §2.6): from 64em a full-height sidebar collapsible to an
   icon rail, sized and colored like the back-office sidebar (expanded: 14 px text,
   29 px rows, 14 px icons, 230 px wide; collapsed: 64 px rail, 16 px icons on
   32 px tiles, 36 px rows); below 64em an off-canvas drawer under the top bar. */

.sv-sidenav {
  position: fixed;
  z-index: var(--sv-z-sidenav);
  inset-block: var(--sv-topbar-height) 0;
  inset-inline-start: 0;
  display: flex;
  flex-direction: column;
  width: min(18rem, 86vw);
  border-inline-end: 1px solid var(--sv-color-border);
  background: var(--sv-color-surface);
  box-shadow: var(--sv-shadow-lg);
  font-size: var(--sv-text-sm);
  line-height: var(--sv-leading-normal);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--sv-duration) var(--sv-ease), visibility 0s linear var(--sv-duration);
  /* Inset of the brand, the toggle and the items from the sidebar edges. */
  --sv-sidenav-inset: var(--sv-space-2);
  --sv-sidenav-icon: 0.875rem;
  /* Row height of an item: one line of text plus the padding (29 px). */
  --sv-sidenav-row: calc(var(--sv-text-sm) * var(--sv-leading-normal) + 2 * var(--sv-space-1));
  /* Collapsed: the hover and active tile around the icon and the row height (36 px),
     as in the back office's icon rail. */
  --sv-sidenav-tile: 2rem;
  --sv-sidenav-row-collapsed: 2.25rem;
  /* Icon axis: the center of the collapsed rail (32 px from its start edge, on a whole
     pixel like the back office's), measured from the start edge of the brand, the
     toggle and the items (minus their inset). The logo and the icon centers keep this
     position in both states and during the width transition. */
  --sv-sidenav-icon-axis: calc(var(--sv-sidenav-width-collapsed) / 2 - var(--sv-sidenav-inset));
}
.sv-sidenav.is-open {
  transform: none;
  visibility: visible;
  transition: transform var(--sv-duration) var(--sv-ease), visibility 0s;
}

@media (min-width: 64em) {
  .sv-sidenav {
    position: sticky;
    top: 0;
    align-self: start;
    flex: none;
    width: var(--sv-sidenav-width);
    height: 100vh;
    height: 100dvh;
    box-shadow: none;
    transform: none;
    visibility: visible;
    transition: width var(--sv-duration) var(--sv-ease);
  }
  :root[data-sv-nav="collapsed"] .sv-sidenav { width: var(--sv-sidenav-width-collapsed); }
  /* The server renders the collapsed state and data-sv-nav-init (layout/app.html.twig); the
     controller removes the latter after the first frames, so the restored state never animates. */
  :root[data-sv-nav-init] .sv-sidenav,
  :root[data-sv-nav-init] .sv-nav__link,
  :root[data-sv-nav-init] .sv-nav__group { transition: none; }
}

/* Brand at the top (≥ 64em; the top bar shows it below). */
.sv-sidenav__brand {
  display: none;
  flex: none;
  box-sizing: border-box;
  height: 4.5rem;
  margin-inline: var(--sv-sidenav-inset);
  padding-block: var(--sv-space-4) 1.75rem;
  padding-inline: calc(var(--sv-sidenav-icon-axis) - 0.875rem) var(--sv-space-2);
}
@media (min-width: 64em) {
  .sv-sidenav__brand { display: flex; }
}

.sv-sidenav__scroll {
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sv-space-2) var(--sv-sidenav-inset) var(--sv-space-4);
}

/* Navigation list (components/SideNav.html.twig). */
.sv-nav {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sv-nav li + li { margin: 0; }
.sv-nav--sub {
  margin: 0 0 var(--sv-space-1);
  padding-inline-start: var(--sv-space-4);
}

/* Section heading (the admin entry): 12 px semibold uppercase muted text, 16 px above the
   section, 8 px padding, the text on the start of the icons, like the back office's menu
   section labels (.ea-sidebar-group-label, admin-extras.css). */
.sv-nav .sv-nav__section { margin-block-start: var(--sv-space-4); }
.sv-nav .sv-nav__section:first-child { margin-block-start: 0; }
.sv-nav__heading {
  display: block;
  overflow: hidden;
  padding: var(--sv-space-2) var(--sv-space-2) var(--sv-space-2) calc(var(--sv-sidenav-icon-axis) - 0.4375rem);
  color: var(--sv-color-text-muted);
  font-size: var(--sv-text-xs);
  font-weight: var(--sv-weight-semibold);
  letter-spacing: 0.04em;
  line-height: var(--sv-leading-tight);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.sv-nav__link,
.sv-nav__group,
.sv-sidenav__collapse {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sv-space-3);
  width: 100%;
  min-height: var(--sv-sidenav-row);
  margin: 0;
  padding: var(--sv-space-1) var(--sv-space-2);
  padding-inline-start: calc(var(--sv-sidenav-icon-axis) - var(--sv-sidenav-icon) / 2);
  border: 0;
  border-radius: var(--sv-radius-sm);
  background: transparent;
  color: var(--sv-color-nav-text);
  font-size: var(--sv-text-sm);
  font-weight: var(--sv-weight-regular);
  line-height: var(--sv-leading-normal);
  text-align: start;
  text-decoration: none;
}
@media (pointer: coarse) {
  .sv-nav__link,
  .sv-nav__group { min-height: 2.75rem; }
}
.sv-nav__link .sv-icon,
.sv-nav__group .sv-icon,
.sv-sidenav__collapse .sv-icon {
  width: var(--sv-sidenav-icon);
  height: var(--sv-sidenav-icon);
  color: var(--sv-color-nav-icon);
  vertical-align: 0;
}
.sv-nav__link:hover,
.sv-nav__group:hover,
.sv-sidenav__collapse:hover {
  background: var(--sv-color-surface-sunken);
  color: var(--sv-color-primary);
  text-decoration: none;
}
.sv-nav__link.is-active,
.sv-nav__group.is-active {
  background: var(--sv-color-primary-subtle);
  color: var(--sv-color-primary);
  font-weight: var(--sv-weight-medium);
}
.sv-nav__label,
.sv-sidenav__collapse-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sv-nav__chevron {
  margin-inline-start: auto;
  transition: transform var(--sv-duration-fast) var(--sv-ease);
}
.sv-nav__group[aria-expanded="false"] .sv-nav__chevron { transform: rotate(-90deg); }

/* Collapse toggle under the brand, above the items (≥ 64em only). */
.sv-sidenav__collapse {
  display: none;
  flex: none;
  width: auto;
  margin-inline: var(--sv-sidenav-inset);
}
.sv-sidenav__collapse .sv-icon--expand { display: none; }
@media (min-width: 64em) {
  .sv-sidenav__collapse { display: flex; }
}

/* Collapsed (logo and icons only). */
@media (min-width: 64em) {
  /* The rows grow to the rail's 36 px with the width transition (the icons glide, the
     axis stays); the icon size switches at once around its fixed center. */
  .sv-nav__link,
  .sv-nav__group {
    transition: min-height var(--sv-duration) var(--sv-ease), margin-top var(--sv-duration) var(--sv-ease), margin-bottom var(--sv-duration) var(--sv-ease);
  }
  :root[data-sv-nav="collapsed"] .sv-sidenav { --sv-sidenav-icon: 1rem; }
  /* No re-centering: the logo and the icons stay on --sv-sidenav-icon-axis, the texts are clipped. */
  :root[data-sv-nav="collapsed"] .sv-sidenav .sv-brand__name,
  :root[data-sv-nav="collapsed"] .sv-nav__label,
  :root[data-sv-nav="collapsed"] .sv-nav__chevron,
  :root[data-sv-nav="collapsed"] .sv-sidenav__collapse-label,
  :root[data-sv-nav="collapsed"] .sv-nav__heading {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  /* The section heading's text goes (it still names its list); only the 16 px gap above the
     section stays, as between the back office's rail groups (no divider line there). */
  :root[data-sv-nav="collapsed"] .sv-nav__heading { padding: 0; }
  /* The hover and active backgrounds shrink to a 32 px tile centered on the icon axis
     (like the back office's icon rail), 36 px apart. */
  :root[data-sv-nav="collapsed"] .sv-nav__link,
  :root[data-sv-nav="collapsed"] .sv-nav__group,
  :root[data-sv-nav="collapsed"] .sv-sidenav__collapse {
    width: var(--sv-sidenav-tile);
    min-height: var(--sv-sidenav-tile);
    margin-block: calc((var(--sv-sidenav-row-collapsed) - var(--sv-sidenav-tile)) / 2);
    margin-inline-start: calc(var(--sv-sidenav-icon-axis) - var(--sv-sidenav-tile) / 2);
    padding-inline: calc((var(--sv-sidenav-tile) - var(--sv-sidenav-icon)) / 2) 0;
  }
  /* The toggle keeps its vertical center (its tile overlaps the 29 px row evenly), so
     its icon does not move. */
  :root[data-sv-nav="collapsed"] .sv-sidenav__collapse {
    margin-block: calc((var(--sv-sidenav-row) - var(--sv-sidenav-tile)) / 2);
    margin-inline-start: calc(var(--sv-sidenav-inset) + var(--sv-sidenav-icon-axis) - var(--sv-sidenav-tile) / 2);
  }
  :root[data-sv-nav="collapsed"] .sv-nav--sub { display: none; }
  :root[data-sv-nav="collapsed"] .sv-sidenav__collapse .sv-icon--collapse { display: none; }
  :root[data-sv-nav="collapsed"] .sv-sidenav__collapse .sv-icon--expand { display: inline-block; }
}