select-enhancer {
  --blocks: 5; /* Number of option blocks to display before needing to scroll */

  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: min(100%, 200px);
  height: inherit;

  @media only screen and (min-width: 600px) {
    --blocks: 10;
  }

  & > [role="combobox"] {
    --border-width: 1.5px;

    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 8px;
    border: var(--border-width) solid #cecece;
    border-radius: 4px;
    outline: none;
    overflow-x: auto;

    cursor: pointer;
    white-space: pre;
    text-align: left;
    font-size: inherit;
    font-family: inherit;
    color: currentcolor;
    background-color: white;

    &[filter] {
      cursor: auto;
    }

    &:focus {
      border-color: dodgerblue;
    }

    & + [role="listbox"] {
      --listbox-border: 2px;
      --option-height: 38px;
      --option-padding: 8px;

      position: absolute;
      z-index: 2;

      box-sizing: border-box;
      width: 100%;
      max-height: calc(var(--option-height) * var(--blocks) + var(--listbox-border) * 2);
      padding: 0;
      border: var(--listbox-border) solid #cecece;
      border-radius: 4px;
      margin: 0;

      overflow: auto;
      background-color: white;

      &:is([role="combobox"]:not([aria-expanded="true"]) + [role="listbox"]) {
        display: none;
      }

      & > [role="option"],
      &:where([role="combobox"][data-bad-filter] + [role="listbox"])::before {
        display: block;
        box-sizing: border-box;
        height: var(--option-height);
        padding: var(--option-padding);
        align-content: center;
        cursor: pointer;

        &[data-active="true"]:not([aria-selected="true"]) {
          background-color: #bddaff; /* This color is the `background-color` for `selected` items, brightened by 70% */
        }

        &[aria-selected="true"] {
          color: white;
          background-color: #2684ff;
        }

        &[data-filtered-out] {
          display: none;
          visibility: hidden; /* Needed to hide filtered-out `option`s in Safari + VoiceOver (Bug in Browser) */
        }

        /* TODO: Add clearer/better `disabled` styles. */
        &[aria-disabled="true"] {
          cursor: not-allowed;
        }
      }

      &:where([role="combobox"][data-bad-filter] + [role="listbox"])::before {
        content: attr(nomatchesmessage, "No options found") / "";
        cursor: auto;
      }
    }
  }
}