/* Use the browser's in-page picker instead of a separate operating-system popup.
   Unsupported browsers keep their native select, labels, validation and keyboard support. */
@supports (appearance: base-select) {
  select:not([multiple]):not([size]),
  select:not([multiple]):not([size])::picker(select) {
    appearance: base-select;
  }
  select:not([multiple]):not([size]) {
    align-items: center;
    gap: 10px;
  }
  select:not([multiple]):not([size])::picker-icon {
    color: var(--theme-muted, #61758a);
    flex-shrink: 0;
    margin-inline-start: auto;
  }
  select:not([multiple]):not([size])::picker(select) {
    box-sizing: border-box;
    min-width: min(calc(100vw - 24px), max(180px, anchor-size(width)));
    max-width: min(480px, calc(100vw - 24px));
    max-height: min(360px, 60dvh);
    overflow: auto;
    overscroll-behavior: contain;
    margin-block: 6px;
    padding: 6px;
    border: 1px solid var(--theme-border, #dce4ee);
    border-radius: 12px;
    background: var(--theme-surface, #fff);
    color: var(--theme-text, #20334b);
    box-shadow: 0 12px 36px rgb(1 50 110 / 20%);
    font: inherit;
    font-size: 14px;
    text-align: start;
  }
  select:not([multiple]):not([size]) option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 9px 12px;
    border-radius: 7px;
    background: transparent;
    color: var(--theme-text, #20334b);
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
  }
  select:not([multiple]):not([size]) option:checked {
    background: var(--theme-raised, #edf3fa);
    font-weight: 600;
  }
  select:not([multiple]):not([size]) option:hover,
  select:not([multiple]):not([size]) option:focus-visible {
    background: var(--theme-orange-bg, #fff2e8);
    outline: 2px solid var(--theme-accent, #b84f0a);
    outline-offset: -2px;
  }
  select:not([multiple]):not([size]) option::checkmark {
    color: var(--theme-accent, #b84f0a);
  }
  select:not([multiple]):not([size]) option:disabled {
    color: var(--theme-subtle, #78899b);
    cursor: not-allowed;
  }
  select:not([multiple]):not([size]) optgroup {
    padding: 4px;
  }
}
@media (max-width: 680px) {
  @supports (appearance: base-select) {
    .cms-topbar-actions .theme-selector select {
      font-size: 0;
      gap: 0;
      padding-inline: 0;
    }
    .cms-topbar-actions .theme-selector select::picker-icon { display: none; }
  }
}