/* Sidebar (design-system.md, Structure), in the home's editorial voice: no panel, a rule down
   its edge, the isotype on top and the business in parentheses. The sections are an index with
   rules between them; the current one is violet and the logo's ring points at it. Above the page
   on a phone, one row that scrolls sideways; a column beside it from 64rem. */
@layer components {
  .sidebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--block-space-half) var(--inline-space-double);
    padding: var(--block-space) var(--inline-space-double);
    border-block-end: 1px solid var(--color-border-strong);

    @media (min-width: 64rem) {
      position: sticky;
      inset-block-start: 0;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: stretch;
      align-self: start;
      block-size: 100dvh;
      padding: var(--block-space-double) calc(var(--inline-space) * 3);
      border-block-end: 0;
      border-inline-end: 1px solid var(--color-border-strong);
    }
  }

  .sidebar__home {
    display: inline-block;
    align-self: start;

    & img { block-size: 2.25rem; inline-size: auto; }
  }

  .sidebar__business {
    margin: 0;
    font-size: var(--text-small);
    color: var(--color-subtle);

    &::before { content: "( " / ""; }
    &::after { content: " )" / ""; }

    @media (min-width: 64rem) { margin-block: var(--block-space) var(--block-space-double); }
  }

  .nav {
    inline-size: 100%;

    & ul {
      display: flex;
      gap: var(--inline-space-double);
      margin: 0;
      padding: 0;
      overflow-x: auto;
      list-style: none;
      scrollbar-width: none;

      @media (min-width: 64rem) {
        flex-direction: column;
        gap: 0;
        overflow: visible;
        border-block-start: 1px solid var(--color-border);
      }
    }

    & li {
      flex: none;

      @media (min-width: 64rem) { border-block-end: 1px solid var(--color-border); }
    }

    & a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--inline-space);
      min-block-size: var(--touch-target);
      font-size: var(--text-normal);
      font-weight: 600;
      color: var(--color-subtle);
      text-decoration: none;
      background: none; /* no drawn underline (base.css): the rules do that work */
      transition: padding var(--duration-flip) var(--ease-out-back), color var(--transition);

      @media (min-width: 64rem) { min-block-size: 3.25rem; }

      &:hover { color: var(--color-text); }
      @media (min-width: 64rem) { &:hover { padding-inline-start: var(--inline-space); } }

      /* The current section: violet, and the logo's ring pointing at it. */
      &[aria-current=page] {
        color: var(--color-link);

        &::after {
          content: "";
          flex: none;
          inline-size: 1.25em;
          aspect-ratio: 1;
          background: currentColor;
          mask: url("/assets/motifs/ring-e0d35887.svg") center / contain no-repeat;
          rotate: -123deg;
        }
      }
    }
  }

  /* Sign out: beside the isotype on a phone, at the foot of the column from 64rem. button_to
     wraps the button in a form, so the form is what moves. */
  .sidebar > .button_to {
    order: 1;
    margin-inline-start: auto;

    @media (min-width: 64rem) { order: 0; margin: auto 0 0; }
  }

  .nav { order: 2; }
  @media (min-width: 64rem) { .nav { order: 0; } }

  .sidebar__sign-out { padding-inline: 0; }

  /* Grella's support pages: the sidebar's isotype and parentheses, laid out as one ruled bar. */
  .admin-bar {
    display: flex;
    align-items: center;
    gap: var(--inline-space-double);
    padding-block-end: var(--block-space);
    border-block-end: 1px solid var(--color-border-strong);

    & .sidebar__business { margin: 0; }
    & .button_to { margin-inline-start: auto; }
  }
}