@layer components {
  /* Base: a text input with an anchored options popup
  /* -------------------------------------------------------------------------- */

  .combobox {
    position: relative;

    .input { --input-padding: 0.5em 2em 0.5em 0.75em; }
  }

  /* Elements
  /* -------------------------------------------------------------------------- */

  .combobox__chevron {
    --icon-size: 0.9em;

    color: var(--color-ink-muted);
    inset-block-start: 50%;
    inset-inline-end: 0.75em;
    position: absolute;
    translate: 0 -50%;
  }

  .combobox__options {
    --combobox-options-gap: var(--block-space-half);
    --combobox-options-max-block-size: 20em;
    --combobox-options-padding: var(--block-space-half);

    background-color: var(--color-canvas);
    border: var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-large);
    inset-block-start: calc(100% + var(--combobox-options-gap));
    inset-inline: 0;
    list-style: none;
    margin: 0;
    max-block-size: var(--combobox-options-max-block-size);
    overflow: auto;
    padding: var(--combobox-options-padding);
    position: absolute;
    z-index: var(--z-popup);
  }

  .combobox__option {
    border-radius: var(--border-radius);
    cursor: pointer;
    padding: 0.4em 0.75em;

    &[aria-selected="true"] {
      background-color: var(--color-surface-subtle);
    }

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-surface-subtle);
      }
    }
  }
}