/* The one list of the site (select-list.js): what a <select> and a text field with suggestions open, on every page and in the
   panel (owner, 2026-10-30; DECISIONS 41), in the look of the list of the design (#203): a white panel with a row for every
   choice and a line between two. Written by hand; checked by design/_tools/check_web_css.py as a component's sheet is. */
.select-list {
  position: fixed;
  inset: auto;
  z-index: 1000;
  box-sizing: border-box;
  max-block-size: var(--select-list-max-height);
  margin: 0;
  padding: var(--option-list-pad-top) 0 var(--option-list-pad-bottom);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: var(--option-list-radius);
  background: var(--color-white);
  box-shadow: var(--shadow-md-4);
  color: var(--color-gray-20);

  /* read by select-list.js: how far it stands from its field */
  row-gap: var(--select-list-gap);
}

.select-option {
  display: block;
  position: relative;
  inline-size: 100%;
  min-block-size: var(--option-list-row);
  padding-inline: var(--option-list-text-start);
  border: 0;
  background: none;
  color: inherit;
  font: var(--text-17-medium);
  text-align: start;
  cursor: pointer;
}

.select-option + .select-option::before {
  content: "";
  position: absolute;
  inset-inline: var(--option-list-line-start);
  inset-block-start: 0;
  block-size: var(--border-1);
  background: var(--color-gray-81);
}

.select-option.active,
.select-option:hover {
  background: var(--color-gray-97);
}

.select-option[aria-selected="true"] {
  color: var(--theme-to);
}

.select-option:disabled {
  color: var(--color-gray-73);
  cursor: default;
}

.select-heading {
  padding: var(--option-list-pad-top) var(--option-list-text-start);
  color: var(--color-gray-60);
  font: var(--text-16-medium);
}

@media (max-width: 767.98px) {
  .mobile .select-option {
    font: var(--text-13-medium);
  }

  .mobile .select-heading {
    font: var(--text-12-medium);
  }
}