/* Option list */
.bs-dropdown-options {
  list-style: none;
  margin-bottom: 0.25rem;
  margin-top: 0.25rem;
  max-height: var(--options-height-max, 20rem);
  /* constrain scrollable to options section */
  overflow-y: auto;
  padding: 0;
}

.bs-dropdown-options :where(li:first-child) {
  margin-top: 0.5rem;
}

/* Option list item */
.bs-dropdown-options :where(li) {
  align-items: center;
  border-bottom: 2px solid transparent;
  border-left: 4px solid transparent;
  border-radius: 3px;
  border-right: 2px solid transparent;
  border-top: 2px solid transparent;
  color: var(--bs-ink-base);
  column-gap: 0.5rem;
  cursor: pointer;
  display: grid;
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  padding-left: 1.25rem;
  padding-right: 1.375rem;
  padding-top: 0.25rem;
  row-gap: 0.125rem;
  word-break: break-word;
  word-wrap: break-word;
}

/* Variant: 2-col */
.bs-dropdown-options :where(li[data-variant~="2-col"]) {
  grid-template-columns: min-content 1fr;
}

/* Variant: description */
.bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"] :nth-child(2)) {
  color: var(--bs-ink-light);
  font-size: var(--bs-text-xs);
  min-height: 1.125rem;
  line-height: 1.125rem;
}

/* Variant: 2-col description */
.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"] :nth-child(3)) {
  color: var(--bs-ink-light);
  font-size: var(--bs-text-xs);
  grid-column-start: 2;
  min-height: 1.125rem;
  line-height: 1.125rem;
}

/* Hover or data-selected */
.bs-dropdown-options :where(li:hover),
.bs-dropdown-options :where(li[data-selected]) {
  background-color: var(--bs-bg-medium);
  border-left: 4px solid var(--bs-blue-base);
  color: var(--bs-blue-base);
  outline: none;
}

/* Variant: negative */
.bs-dropdown-options :where(li[data-variant~="negative"]:hover),
.bs-dropdown-options :where(li[data-variant~="negative"][data-selected]),
.bs-dropdown-options :where(li[data-variant~="negative"][data-selected]:hover) {
  /* 25% alpha version of --bs-red-400 */
  background-color: rgba(248, 169, 170, 0.25);
  border-left: 4px solid var(--bs-red-500);
  color: var(--bs-red-500);
}

/* Hover or data-selected for 2-col/description variants */
.bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"]:hover :nth-child(2)),
.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"]:hover :nth-child(3)),
.bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"][data-selected] :nth-child(2)),
.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"][data-selected] :nth-child(3)) {
  color: var(--bs-blue-base);
}

/* Hover or data-selected for negative + 2-col/description variants */
.bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant~="2-col"])[data-variant~="description"]:hover :nth-child(2)),
.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"]:hover :nth-child(3)),
.bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant~="2-col"])[data-variant~="description"][data-selected] :nth-child(2)),
.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"][data-selected] :nth-child(3)) {
  color: var(--bs-red-500);
}

/* List option mouse click focus (do not show) */
.bs-dropdown-options :where(li:focus:not(:focus-visible)) {
  outline: none;
}

/* data-variant="negative" list option mouse click focus (do not show) */
.bs-dropdown-options :where(li[data-variant~="negative"]:focus:not(:focus-visible)) {
  outline: none;
}

/* List option keyboard navigation focus */
.bs-dropdown-options :where(li:focus-visible) {
  --focus-border-color: var(--bs-blue-base);
  border: 2px solid var(--focus-border-color);
  outline: none;
  padding-left: 0.625rem;
}

/* Navigation focus on a selected element should preserve 4px left border */
.bs-dropdown-options :where(li[data-selected]:focus-visible) {
  border-left: 4px solid var(--focus-border-color);
  padding-left: 0.5rem;
}

/* data-variant="negative" list option keyboard navigation focus */
.bs-dropdown-options :where(li[data-variant~="negative"]:focus-visible) {
  --focus-border-color: var(--bs-red-200);
}

@media (min-width: 752px) {
  .bs-dropdown-options :where(li) {
    padding-left: 0.5rem;
    padding-right: 0.75rem;
  }

  .bs-dropdown-options :where(li:focus-visible) {
    padding-left: 0.625rem;
  }

  .bs-dropdown-options :where(li[data-selected]:focus-visible) {
    padding-left: 0.5rem;
  }
}
bs-dropdown-option-list {
  display: block;
}