Timezone Picker

<div class="timezone-picker">
38 collapsed lines
  <label for="timezone">Timezone</label>

  <sv-combobox id="timezone" name="timezone" placeholder="Search city">
    <sv-flyout class="timezone-flyout">
      <div class="group" aria-labelledby="tz-americas" role="group">
        <span id="tz-americas" class="group-label">Americas</span>
        <button type="button" value="America/New_York">New York</button>
        <button type="button" value="America/Chicago">Chicago</button>
        <button type="button" value="America/Denver">Denver</button>
        <button type="button" value="America/Los_Angeles">Los Angeles</button>
        <button type="button" value="America/Sao_Paulo">São Paulo</button>
      </div>

      <div class="group" aria-labelledby="tz-europe" role="group">
        <span id="tz-europe" class="group-label">Europe</span>
        <button type="button" value="Europe/London">London</button>
        <button type="button" value="Europe/Paris">Paris</button>
        <button type="button" value="Europe/Berlin">Berlin</button>
        <button type="button" value="Europe/Athens">Athens</button>
      </div>

      <div class="group" aria-labelledby="tz-asia" role="group">
        <span id="tz-asia" class="group-label">Asia</span>
        <button type="button" value="Asia/Dubai">Dubai</button>
        <button type="button" value="Asia/Kolkata">Kolkata</button>
        <button type="button" value="Asia/Singapore">Singapore</button>
        <button type="button" value="Asia/Tokyo">Tokyo</button>
      </div>

      <div class="group" aria-labelledby="tz-pacific" role="group">
        <span id="tz-pacific" class="group-label">Pacific</span>
        <button type="button" value="Australia/Sydney">Sydney</button>
        <button type="button" value="Pacific/Auckland">Auckland</button>
      </div>

      <p class="empty" data-combobox-no-results>No city matches your search</p>
    </sv-flyout>
  </sv-combobox>
</div>

<style>
71 collapsed lines
  .timezone-picker {
    display: grid;
    gap: 0.5em;
    inline-size: min(100%, 20rem);
    margin-inline: auto;
    color: var(--sv-gray-2);

    label {
      justify-self: start;
      cursor: pointer;
    }

    .group {
      display: grid;

      &:not(:has(button:not([hidden]))) {
        display: none;
      }

      &:has(button:not([hidden])) ~ & {
        padding-block-start: 0.25em;
        border-block-start: solid var(--sv-bdr-sz-sm) var(--sv-gray-5);
      }
    }

    .group-label {
      padding: 0.5em 0.75em 0.25em;
      font-size: 0.8em;
      font-weight: 600;
      color: var(--sv-gray-3);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .group button {
      padding: 0.5em 0.75em;
      font: inherit;
      color: var(--sv-gray-2);
      text-align: start;
      cursor: pointer;
      background-color: transparent;
      border: none;
      border-radius: var(--sv-bdr-rad-sm);

      &[data-active-option] {
        outline: auto;
      }

      &[aria-selected="true"] {
        color: var(--sv-accent-content);
        background-color: var(--sv-accent);
      }

      @media (hover: hover) and (pointer: fine) {
        &:not([aria-selected="true"]):hover {
          background-color: var(--sv-gray-5);
        }
      }
    }

    .timezone-flyout::part(content) {
      gap: 0.25em;
      max-block-size: min(var(--sv-anchor-available-height), 18rem);
    }

    .empty {
      padding: 0.5em;
      margin: 0;
      color: var(--sv-gray-3);
    }
  }
</style>