@scope (htmlpress-links) {
  :scope {
    display: block;
    min-width: 0;
  }
  nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: 100%;
    padding: 0 1.5rem;
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.25rem;
    scrollbar-width: none;
  }
  a {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.375rem;
    color: color-mix(in srgb, var(--htmlpress-text) 80%, var(--htmlpress-bg));
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.15s;
  }
  a:hover {
    color: var(--htmlpress-text);
  }
  a[aria-current="page"] {
    margin-bottom: -0.125rem;
    padding-bottom: 0.125rem;
    border-bottom: 2px solid currentColor;
    color: var(--htmlpress-text);
    font-weight: 500;
  }
  small {
    color: var(--htmlpress-muted);
    font-size: inherit;
  }
  small::before {
    content: "(";
  }
  small::after {
    content: ")";
  }
  a > svg {
    width: 0.875rem;
    height: 0.875rem;
  }
  a[hidden] {
    display: none;
  }
  /* The script folds what does not fit into it, so nothing needs to scroll */
  :scope:defined nav {
    overflow: visible;
  }
  details {
    position: relative;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  summary {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: color-mix(in srgb, var(--htmlpress-text) 80%, var(--htmlpress-bg));
    cursor: pointer;
    list-style: none;
  }
  summary::-webkit-details-marker {
    display: none;
  }
  summary:hover {
    color: var(--htmlpress-text);
  }
  summary svg {
    width: 0.875rem;
    height: 0.875rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.15s;
  }
  details[open] > summary {
    margin: 0;
  }
  details[open] [data-icon="chevron"] {
    transform: rotate(180deg);
  }
  [data-icon="dots"] {
    display: none;
  }
  details > div {
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 11rem;
    padding: 0.375rem;
    border: 1px solid var(--htmlpress-border);
    border-radius: var(--htmlpress-radius);
    background: var(--htmlpress-bg);
    box-shadow: var(--htmlpress-shadow);
  }
  details > div > a {
    padding: 0.375rem 0.625rem;
    border-radius: calc(var(--htmlpress-radius) - 0.25rem);
  }
  details > div > a:hover {
    background: var(--htmlpress-surface);
  }
  details > div > a[aria-current="page"] {
    margin: 0;
    padding-bottom: 0.375rem;
    border-bottom: 0;
  }
  @media (min-width: 80rem) {
    nav {
      gap: 2rem;
    }
  }
  /* On a phone the sidebar drawer lists the sections instead */
  @media (max-width: 56rem) {
    nav {
      padding: 0;
    }
    /* A phone has room for the menu's icon only */
    summary :is(span, [data-icon="chevron"]) {
      display: none;
    }
    summary [data-icon="dots"] {
      display: block;
      width: 1.25rem;
      height: 1.25rem;
    }
    a[data-section] {
      display: none;
    }
  }
}