/* Select menu: a native select that the select-menu controller dresses as a
   listbox (data-enhanced once it has); the native control stays for forms
   and screen readers. Its button reads like the native one: the choice, or
   a muted prompt while there is none (data-empty), and a caret that turns
   while the list is open. */
.select-menu {
  position: relative;
}

.select-menu[data-enhanced] .select-menu__native {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

.select-menu__trigger {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: var(--space-xs);
  justify-content: space-between;
  min-block-size: calc(var(--leading-normal) * 1em + 2 * var(--space-2xs) + 2 * var(--border-width));
  text-align: start;

  &[data-empty] {
    color: var(--color-muted);
  }

  &[hidden] {
    display: none;
  }
}

.select-menu__caret {
  color: var(--color-muted);
  flex: none;
  transition: rotate var(--duration-fast) var(--ease-out);

  [aria-expanded="true"] > & {
    rotate: 180deg;
  }
}

.select-menu__menu {
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--color-surface-3);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-raised);
  inset-block-start: calc(100% + var(--space-3xs));
  inset-inline: 0;
  list-style: none;
  margin: 0;
  padding: var(--space-3xs);
  position: absolute;
  z-index: var(--z-raised);
}

.select-menu__option {
  background: transparent;
  border: 0;
  border-radius: var(--radius-xs);
  color: inherit;
  cursor: pointer;
  display: block;
  font: inherit;
  inline-size: 100%;
  padding: var(--space-2xs) var(--space-xs);
  text-align: start;

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