/**
 * UX2 searchable dropdown — appjs/common/ux2/searchSelect.js. It uses the people picker's look (assets/ux2/picker.css,
 * load that first); these are only the extras a dropdown needs: the caret, a smaller size, and the round slot showing
 * a month, a logo or an icon instead of a photo.
 */
.ux2-ss { min-width: 0; }
.ux2-ss-native { display: none !important; }
.ux2-ss .ux2-picker-box { flex-wrap: nowrap; padding-right: 30px; cursor: pointer; }
.ux2-ss .ux2-picker-input { flex: 1 1 auto; min-width: 40px; cursor: pointer; text-overflow: ellipsis; }
.ux2-ss .ux2-picker-input:focus { cursor: text; }
.ux2-ss.is-empty .ux2-picker-input { color: var(--ux2k-ink-2, #3f4254); }
.ux2-ss .ux2-picker-clear { flex: none; }
.ux2-ss-caret { position: absolute; top: 50%; right: 11px; font-size: 12px; color: var(--ux2k-muted, #6b6f85); transform: translateY(-50%); cursor: pointer; transition: transform .15s; }
.ux2-ss.is-open .ux2-ss-caret { transform: translateY(-50%) rotate(180deg); }
.ux2-ss.is-sm .ux2-picker-box { min-height: 36px; padding-top: 3px; padding-bottom: 3px; }
.ux2-ss.is-sm .ux2-picker-input { font-size: 13px; }
.ux2-ss .ux2-picker-list { right: auto; min-width: 100%; max-width: min(440px, 92vw); z-index: 1070; }
.ux2-ss .ux2-picker-list [role="option"].is-any { color: var(--ux2k-muted, #6b6f85); }
.ux2-ss .ux2-picker-list [role="option"].is-on b { font-weight: 700; }

/* The round slot: a month (two short lines), a brand logo in its colour, or an icon */
.ux2-picker-av.is-badge { flex-direction: column; gap: 0; line-height: 1; color: var(--ux2k-brand-dark, #154951); background: var(--ux2k-tint, #e9f0f1); }
.ux2-picker-av.is-badge b { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.ux2-picker-av.is-badge small { font-size: 8px; font-weight: 600; opacity: .8; }
.ux2-picker-list [role="option"] .ux2-picker-av.is-badge b { font-size: 9px; }
.ux2-picker-list [role="option"] .ux2-picker-av.is-badge small { font-size: 9px; }
.ux2-picker-av.is-logo { font-size: 15px; background: #fff; box-shadow: inset 0 0 0 1px var(--ux2k-line, #e4e7ec); }
.ux2-picker-list [role="option"] .ux2-picker-av.is-logo { font-size: 18px; }
.ux2-picker-av.is-icon { font-size: 12px; color: var(--ux2k-brand, #1e5f69); background: var(--ux2k-tint, #e9f0f1); }
.ux2-picker-list [role="option"] .ux2-picker-av.is-icon { font-size: 14px; }
.ux2-picker-av :is(i, svg) { font-size: inherit !important; line-height: 1; }

/* A disabled field (the <select> is disabled): shows its value, can't be opened, typed in or cleared */
.ux2-ss.is-disabled .ux2-picker-box { background: var(--ux2k-soft, #f6f7fb); cursor: not-allowed; }
.ux2-ss.is-disabled .ux2-picker-input { color: var(--ux2k-muted, #6b6f85); cursor: not-allowed; -webkit-text-fill-color: var(--ux2k-muted, #6b6f85); opacity: 1; }
.ux2-ss.is-disabled .ux2-ss-caret { opacity: .35; }