@scope (htmlpress-sidebar) {
  :scope {
    display: block;
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow-y: auto;
    padding: 0.5rem 0.5rem 2rem;
    border-right: 1px solid var(--htmlpress-border);
    background: var(--htmlpress-surface);
    font-size: 0.875rem;
    line-height: 1.43;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.2s;
    view-transition-name: htmlpress-sidebar;
  }
  :scope:hover,
  :scope:focus-within {
    scrollbar-color: color-mix(in oklch, var(--htmlpress-text) 20%, transparent)
      transparent;
  }
  /* Safari ignores scrollbar-color; Chromium ignores these once it is set */
  :scope::-webkit-scrollbar {
    width: 8px;
  }
  :scope::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 9999px;
  }
  :scope:hover::-webkit-scrollbar-thumb,
  :scope:focus-within::-webkit-scrollbar-thumb {
    background: color-mix(in oklch, var(--htmlpress-text) 20%, transparent);
  }
  :scope htmlpress-brand {
    display: flex;
    align-items: center;
    height: 3rem;
    margin-bottom: 0.5rem;
    padding: 0 0.5rem;
  }

  @media (width > 56rem) {
    :scope {
      width: var(--htmlpress-nav-width);
      transition:
        translate 0.2s,
        visibility 0.2s,
        scrollbar-color 0.2s;
    }
    :root[data-nav-collapsed] :scope {
      visibility: hidden;
      translate: -100%;
    }
  }

  @media (max-width: 56rem) {
    :scope {
      position: static;
      height: auto;
      border-right: 0;
      border-bottom: 1px solid var(--htmlpress-border);
    }
    :root:not([data-scripted]:has(htmlpress-nav-toggle)) :scope htmlpress-brand {
      display: none;
    }

    /* With the script the sidebar becomes a drawer; without it, it stays above the page */
    :root[data-scripted]:has(htmlpress-nav-toggle) :scope {
      position: fixed;
      inset: 0 auto 0 0;
      z-index: 40;
      width: min(17.5rem, 85vw);
      height: 100dvh;
      border-right: 1px solid var(--htmlpress-border);
      translate: -100%;
      transition:
        translate 0.2s,
        scrollbar-color 0.2s;
    }
    :root[data-scripted]:has(htmlpress-nav-toggle)[data-nav-open] :scope {
      translate: 0;
      box-shadow: 0 0 2rem oklch(0 0 0 / 0.2);
    }
  }
}