@layer components {
  .dropdown {
    position: relative;
    --dropdown-menu-top: 100%;
    --dropdown-menu-left: 0;
    --dropdown-menu-right: auto;
    --dropdown-menu-bottom: auto;
    --dropdown-menu-color: black;
    --dropdown-menu-background-color: white;
    --dropdown-menu-hover-color: hsl(0, 0%, 96%);
    --dropdown-menu-selected-color: hsl(0, 0%, 94%);
    --dropdown-menu-max-height: 500px;
  }

  /* Flex (not block) so the toggle has no line box: an inline toggle
     would otherwise be baseline-aligned and pulled off-center by the
     surrounding line-height strut. width: fit-content keeps the click
     target tight to its content. */
  .dropdown-toggle {
    display: flex;
    align-items: center;
    width: fit-content;
    cursor: pointer;
  }

  /* Default toggle (rendered when no :toggle slot is given). Reset the
     user-agent button chrome so the icon is always centered and never
     offset by browser padding. */
  .dropdown-toggle-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
  }

  .dropdown-menu {
    display: none;
    position: absolute;
    box-sizing: border-box;
    top: var(--dropdown-menu-top);
    left: var(--dropdown-menu-left);
    right: var(--dropdown-menu-right);
    bottom: var(--dropdown-menu-bottom);
    color: var(--dropdown-menu-color);
    background: var(--dropdown-menu-background-color);
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    width: fit-content;
    max-height: var(--dropdown-menu-max-height);
    overflow-y: auto;
    /* Keep wheel/touch scrolling inside the menu — don't chain to the page. */
    overscroll-behavior: contain;
    padding: 0;
    z-index: 50;
  }

  /* Kept as two separate rules on purpose: :popover-open is unknown to
     Safari < 17. In a shared selector list an invalid selector drops the
     whole rule, which would leave .show without display: block on old
     iPads. Split, only the popover rule is dropped there. */
  .dropdown-menu.show {
    display: block;
    animation: dropdownFade 0.2s ease forwards;
  }

  .dropdown-menu:popover-open {
    display: block;
    animation: dropdownFade 0.2s ease forwards;
  }

  .dropdown-menu[popover] {
    inset: auto;
    margin: 0;
  }

  .dropdown-menu a, .dropdown-menu button, .dropdown-menu form.button_to {
    display: block;
    padding: 5px 1.5rem 5px 1rem;
    white-space: nowrap;
  }

  .dropdown-menu form.button_to {
    padding: 0;
  }

  .dropdown-menu form.button_to button {
    width: 100%;
    text-align: left;
  }

  .dropdown-menu [hidden] {
    display: none;
  }

  .dropdown-menu a:hover,
  .dropdown-menu button:hover,
  .dropdown-menu form.button_to:hover,
  .dropdown-menu a:focus-visible,
  .dropdown-menu button:focus-visible,
  .dropdown-menu form.button_to:has(:focus-visible) {
    background-color: var(--dropdown-menu-hover-color);
  }

  .dropdown-menu a:focus-visible,
  .dropdown-menu button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
  }

  .dropdown-menu a.selected {
    position: relative;
    background-color: var(--dropdown-menu-selected-color);
    &::after {
      position: absolute;
      margin-top: auto;
      margin-bottom: auto;
      top: 5px;
      right: 5px;
      bottom: 0;
      content: "\2713";
    }
  }

  .dropdown-filter {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 14rem;
    padding: 0.4rem 0.75rem;
    background: var(--dropdown-menu-background-color);
    border-bottom: 1px solid hsl(0, 0%, 92%);
    z-index: 1;
  }

  .dropdown-filter-icon {
    --icon-size: 1rem;
    color: var(--form-placeholder-color, #9ca3af);
    flex-shrink: 0;
  }

  .dropdown-filter-input {
    appearance: none;
    border: 0;
    outline: none;
    background: transparent;
    padding: 0;
    margin: 0;
    width: 100%;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--form-color, #111827);
    box-shadow: none;
  }

  .dropdown-filter-input::placeholder {
    color: var(--form-placeholder-color, #9ca3af);
    font-style: italic;
  }

  .dropdown-filter-input::-webkit-search-cancel-button {
    appearance: none;
    height: 0.9rem;
    width: 0.9rem;
    background-color: var(--form-placeholder-color, #9ca3af);
    -webkit-mask: var(--blitz-icon-x-light) center/contain no-repeat;
            mask: var(--blitz-icon-x-light) center/contain no-repeat;
    cursor: pointer;
  }

  @supports (position-anchor: --dropdown-anchor) {
    .dropdown-menu[popover]:popover-open {
      position: fixed;
      top: anchor(bottom);
      left: anchor(left);
      margin-top: 4px;
      position-try-fallbacks: flip-block, flip-inline;
    }
  }

  @keyframes dropdownFade {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}