@layer components {
  .site-search {
    position: relative;
  }

  .site-search input {
    font: inherit;
    font-size: var(--text-sm);
    color: var(--color-ink);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-1) var(--space-2);
    width: 14rem;
  }

  .site-search [role="listbox"] {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1;
    min-width: 100%;
    margin-top: var(--space-1);
    padding: var(--space-1);
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
  }

  .site-search [role="option"] {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    white-space: nowrap;
    cursor: pointer;
  }

  .site-search [role="option"]:hover,
  .site-search [role="option"][aria-selected="true"] {
    background: var(--color-accent);
    color: var(--color-accent-ink);
  }
}