/*
 * The sidebar of the tablet in landscape: the logo, the four sections and, on the menu, the categories (the one
 * that is in view is marked by the scroll-spy). On the desktop website only the categories are left of it (see
 * layout.css), as a quiet list at the left of the dishes.
 */

@layer components {
  /* Only on an expanded screen (1024px and wider). */
  .sidebar {
    display: none;
  }

  @media (min-width: 1024px) {
    .sidebar {
      display: flex;
      /* A link that gets the focus is scrolled in with room for its ring, which the sidebar would clip at its edge. */
      scroll-padding-block: var(--s-3);
    }
  }

  /* The logo and the sections: one navigation. */
  .sidebar__main {
    flex: none;
  }

  /* The logo is made for the colour of the header, so it sits on a block in that colour. */
  .sidebar__brand {
    display: flex;
    flex: none;
    align-items: center;
    min-height: var(--header-row-h);
    padding: calc(env(safe-area-inset-top) + var(--s-2)) var(--s-5) var(--s-2);
    background: var(--header);
  }

  /* The sidebar scrolls, so it clips: the ring of the logo link runs inside the link. */
  .sidebar__brand:focus-visible {
    outline-offset: -3px;
  }

  .sidebar__brand:active {
    opacity: 0.6;
  }

  .sidebar__logo {
    display: block;
    width: auto;
    height: 44px;
  }

  .side-nav {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding: var(--s-3);
  }

  .side-nav__link {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 48px;
    padding: 0 var(--s-3);
    border-radius: var(--r-md);
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
  }

  /* The number of items on the Mandje link. */
  .side-nav__badge {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    margin-left: auto;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--primary);
    color: var(--on-primary);
    font-size: min(0.75rem, 12px);
    font-weight: 700;
  }

  /* Pressed comes before the current one, which keeps its colour under the finger. */
  .side-nav__link:active {
    background: var(--surface-2);
  }

  /* At large text "Bestellingen" is wider than the sidebar: a label breaks instead of running out of its link. */
  .side-nav__link > span,
  .side-categories__link > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .side-nav__link[aria-current='page'] {
    background: var(--primary-soft);
    color: var(--primary);
  }

  /* Not shrunk to the height of the sidebar: the sidebar scrolls, and the last link keeps the room around it for its focus ring. */
  .sidebar__categories {
    display: flex;
    flex: none;
    flex-direction: column;
    padding: var(--s-3);
    border-top: 1px solid var(--border);
  }

  .sidebar__title {
    padding: var(--s-2) var(--s-3);
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .side-categories {
    display: flex;
    flex-direction: column;
  }

  .side-categories__link {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0 var(--s-3);
    border-radius: var(--r-md);
    color: var(--text);
    font-size: 0.9375rem;
    text-decoration: none;
  }

  .side-categories__link:active {
    background: var(--surface-2);
  }

  .side-categories__link[aria-current='true'] {
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 700;
  }

  /* The desktop website has the sections in its header: the sidebar is the list of categories, on the menu only. */
  @media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .sidebar__main {
      display: none;
    }

    .frame:not(.frame--categories) .sidebar {
      display: none;
    }

    /* What is left is only the list of categories: no rule above it. */
    .sidebar__categories {
      padding: 0;
      border-top: 0;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .side-categories__link:hover,
    .side-nav__link:hover {
      background: var(--surface-2);
    }

    .side-categories__link[aria-current='true']:hover,
    .side-nav__link[aria-current='page']:hover {
      background: var(--primary-soft);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .side-categories__link,
    .side-nav__link {
      transition:
        background-color var(--dur) ease-out,
        color var(--dur) ease-out;
    }
  }
}