@media (scripting: enabled) {
  .mainnav {
    --nav-position: absolute;
    inset-inline-end: 0;
  }

  .mainnav:has([aria-expanded='true']) {
    --nav-position: fixed;
    inset-inline-end: var(--gap);
  }

  .mainnav ul {
    --gutter: var(--space-xs);
    --cluster-vertical-alignment: normal;
    --list-block-padding: var(--space-2xl);
    --list-inline-padding: var(--space-s);
    z-index: 1;
    background: var(--list-background, var(--color-bg));
    box-shadow: var(--list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.2));
    flex-direction: var(--list-layout, column);
    block-size: var(--list-height, 100vh);
    position: var(--list-position, fixed);
    inset-block-start: 0;
    inset-inline-end: 0;
    inline-size: var(--list-width, min(18rem, 100vw));
    visibility: var(--list-visibility, visible);
  }

  .mainnav :where([aria-expanded='false']) + ul {
    transform: var(--list-transform, translateX(100%));
    --list-visibility: hidden;
  }

  /* animates ul only when opening to avoid flash on page load, svg always */
  @media (prefers-reduced-motion: no-preference) {
    .mainnav [aria-expanded='true'] + ul,
    .mainnav svg {
      transition:
        transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),
        visibility 0.05s linear;
    }
  }

  .mainnav [aria-expanded='true'] + ul {
    padding-top: var(--space-2xl);
    overflow: auto;
    overscroll-behavior: contain;
  }

  .mainnav button {
    display: var(--nav-button-display, flex);
    align-items: center;
    position: relative;
    z-index: 2;
    padding: var(--space-2xs) 0;
  }

  .mainnav span {
    font-weight: var(--font-extra-bold);
    text-transform: uppercase;
    padding-inline-end: 0.1em;
    font-size: var(--size-step-min-1);
    font-family: var(--font-display);
  }

  .mainnav svg {
    inline-size: auto;
    color: var(--color-text);
    stroke-width: 3;
  }

  .mainnav [aria-expanded='true'] svg {
    transform: var(--list-rotate, rotate(45deg));
  }

  .mainnav a {
    --item-border-color: transparent;
    --item-padding: var(--space-m) var(--space-xs);
    --item-background-color: transparent;
  }

  .mainnav a:where(:hover, :focus) {
    --item-background-color: var(--color-bg-accent);
    --item-text-color: var(--color-text);
    --item-border-color: transparent;
  }

  .mainnav [aria-current='page'],
  .mainnav [data-state='active'] {
    --item-border-color: transparent;
    --item-background-color: var(--color-primary);
    --item-text-color: var(--color-light);
  }
}