/* Combobox: text input + listbox suggestions (issue #94).
   Partials: app/views/shared/components/_combobox.html.erb; address + @-menu reuse these classes. */
@layer components {

.combobox {
  position: relative;
}

/* Shared listbox panel */
.combobox__list {
  list-style: none;
  margin: 0;
  margin-top: 2px;
  padding: 0;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  max-height: 16rem;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: var(--text-sm);
}

.combobox__list--address {
  max-width: 36rem;
}

.combobox__list--at-menu {
  left: 0;
  right: auto;
  top: 100%;
  margin-top: var(--space-1);
  padding: var(--space-1);
  min-width: 12rem;
  max-width: 22rem;
  width: max-content;
  max-height: 12rem;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius);
  box-shadow:
    0 4px 14px color-mix(in srgb, var(--color-primary) 20%, transparent),
    var(--shadow-md);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: combobox-at-menu-enter var(--duration-fast) var(--ease-out);
}

@keyframes combobox-at-menu-enter {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.combobox__list--hidden,
.combobox__list[hidden] {
  display: none !important;
}

/* Options: <li> (address / static combobox) */
.combobox__list--address .combobox__option {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  border-bottom: 1px solid var(--color-slate-06);
  transition: background-color var(--duration-fast) var(--ease-default);
}

.combobox__list--address .combobox__option:last-child {
  border-bottom: none;
}

.combobox__list--address .combobox__option:hover,
.combobox__list--address .combobox__option[aria-selected="true"] {
  background: var(--color-primary-tint);
}

/* Static combobox list (no address dividers; exclude @-menu — buttons use .combobox__option--button) */
.combobox__list:not(.combobox__list--address):not(.combobox__list--at-menu) .combobox__option {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-default);
}

.combobox__list:not(.combobox__list--address):not(.combobox__list--at-menu) .combobox__option:hover,
.combobox__list:not(.combobox__list--address):not(.combobox__list--at-menu) .combobox__option[aria-selected="true"] {
  background: var(--color-primary-tint);
}

/* @-menu: buttons as options */
.combobox__option--button {
  display: block;
  width: 100%;
  text-align: left;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: none;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default);
}

.combobox__option--button:hover {
  background: var(--color-bg);
}

.combobox__option--button:focus-visible {
  outline: 1px solid var(--color-border);
  outline-offset: -1px;
  background: var(--color-bg);
}

.combobox__option--button[hidden],
.combobox__option[hidden] {
  display: none !important;
}

}