/*
 * The sections, kept in one element that is two things: a column beside the
 * page on wide screens, and on phones a popover that takes the whole screen
 * and is otherwise the same column. Only the buttons that open and close it
 * wear the action bar's glass; the sheet itself is plain page.
 *
 * Everything the UA gives a popover is reset here, so the wide-screen column
 * starts from nothing.
 */
.sidebar {
  background-color: var(--color-surface);
  block-size: auto;
  border-width: 0;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  inline-size: auto;
  inset: auto;
  margin: 0;
  overflow-y: auto;
  padding: var(--size-4) var(--size-3);
  position: static;
  row-gap: var(--size-2);

  /* Taller rows for thumbs, and padding past the notch and home indicator. */
  @media (width < 48rem) {
    --sidebar-from: translateX(-100%);
    --sidebar-link-block-size: var(--size-12);

    block-size: var(--size-full);
    inline-size: var(--size-full);
    inset: 0;
    max-block-size: none;
    max-inline-size: none;
    padding: calc(var(--size-4) + env(safe-area-inset-top)) calc(var(--size-3) + env(safe-area-inset-right))
             calc(var(--size-4) + env(safe-area-inset-bottom)) calc(var(--size-3) + env(safe-area-inset-left));
    position: fixed;

    /* Don't let the UA's popover rule be undone by the display above. */
    &:not(:popover-open) {
      display: none;
    }

    transition-behavior: allow-discrete;
    transition-duration: var(--time-300);
    transition-property: display, overlay, opacity, transform;
    transition-timing-function: var(--ease-out-4);

    & { opacity: 0; transform: var(--sidebar-from); }
    &:popover-open { opacity: 1; transform: none; }

    @starting-style {
      &:popover-open { opacity: 0; transform: var(--sidebar-from); }
    }

    @supports (-webkit-hyphens: none) {
      transition-behavior: normal;
    }

    @media (prefers-reduced-motion: reduce) {
      --sidebar-from: none;
    }
  }

  @media (width >= 48rem) {
    border-inline-end-width: var(--border);
    grid-area: sidebar;
  }
}

/* The action bar heading a dialog, as in the shopping list's. On phones the
   brand lines up with the rows below and the close button sits in main's
   gutter at the far edge: the sheet's padding plus this inset is that gutter. */
.sidebar__header {
  margin-block-end: var(--size-2);
  padding-inline: var(--size-3) var(--size-1);

  @media (width >= 48rem) {
    padding-inline: var(--size-3);
  }
}

.sidebar__brand {
  flex: 1;
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
}

/* Nothing to close when the column is always there. */
.sidebar__close {
  @media (width >= 48rem) {
    display: none;
  }
}

.sidebar__links {
  display: flex;
  flex-direction: column;
  row-gap: var(--size-0_5);
}

/* The current section is marked by weight and a filled ground rather than by
   colour, so it reads as "you are here" and not as another link. */
.sidebar__link {
  align-items: center;
  block-size: var(--sidebar-link-block-size, var(--size-10));
  border-radius: var(--rounded-lg);
  color: var(--color-text-subtle);
  column-gap: var(--size-3);
  display: flex;
  font-weight: var(--font-medium);
  inline-size: var(--size-full);
  padding-inline: var(--size-3);

  .icon {
    --icon-size: var(--size-5);
  }

  &:hover {
    background-color: var(--color-secondary);
    color: var(--color-text);
  }

  &:focus-visible {
    outline: 2px solid var(--color-selected-dark);
    outline-offset: -2px;
  }

  &[aria-current="page"] {
    background-color: var(--color-secondary);
    color: var(--color-text);
    font-weight: var(--font-semibold);
  }
}

.sidebar__link--quiet {
  font-size: var(--text-sm);
}

.sidebar__count {
  --badge-padding: 0 var(--size-1_5);

  margin-inline-start: auto;
}

/* Sign out sits apart from the sections, at the foot of the column. */
.sidebar__footer {
  border-block-start-width: var(--border);
  margin-block-start: auto;
  padding-block-start: var(--size-2);
}