/* * ── One note before the rules ── * * select-upgrade.js replaces the native popup on most dropdowns and marks the * original `select.xs-native`. Every caret rule below excludes that class. * * Not for tidiness: `select:not([multiple]):not([size])` weighs (0,2,1), * because :not() carries its argument's specificity, and it was beating the * rules meant to hide the upgraded select — so the hidden element kept its * caret image and its padding and painted them over the button that replaced * it. That is the mark on the closed control that the open list never had. * * Two stylesheets fighting over one element is a bug waiting to come back. * This one stops claiming the ones the other owns. */ /* Selects that look like selects. * * `.a-select` sets `appearance: none` and nothing puts an arrow back. Every * dropdown in the admin panel and the customer portal has therefore rendered * as a plain box with text in it — indistinguishable from a read-only field, * which is why the coupon "who can use it" control read as broken rather than * as a menu nobody had opened. * * It looked worse in Arabic for two reasons. Longer option text fills the box, * so there is no empty space on the right where an arrow would be expected; * and any arrow added with `right:` would have sat on the wrong side anyway. * * Everything below uses logical properties, so the caret follows the writing * direction rather than the viewport. */ .a-select, .p-select, /* * …and every other select on the page. * * :not([multiple]):not([size]) because a list box has no dropdown to point at * — an arrow on one is a caret floating beside a scrolling list, which is how * you can tell a stylesheet was written for one case and applied to all of * them. */ select:not([multiple]):not([size]):not(.xs-native), select.a-input, select.form-input { /* The caret, inline. No file to fetch, no request to fail, and it inherits nothing — which is why the colour is repeated per theme below rather than using currentColor, which SVG in a background-image cannot see. */ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235A6472' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 16px 16px; /* logical, so RTL puts it on the left without a second rule */ background-position: right 0.85rem center; padding-inline-end: 2.4rem; cursor: pointer; } [dir="rtl"] select:not([multiple]):not([size]):not(.xs-native), [dir="rtl"] .a-select, [dir="rtl"] .p-select, [dir="rtl"] select.a-input, [dir="rtl"] select.form-input { /* The caret moves to the left edge, where the line ends in Arabic. Without this it sits on the right, on top of the first word. */ background-position: left 0.85rem center; } /* Dark: the same caret, lighter, because a #5A6472 stroke disappears on a dark field. */ [data-theme="dark"] select:not([multiple]):not([size]):not(.xs-native), [data-admin-theme="dark"] select:not([multiple]):not([size]):not(.xs-native), [data-theme="dark"] .a-select, [data-admin-theme="dark"] .a-select, [data-theme="dark"] .p-select, [data-admin-theme="dark"] .p-select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A7B0BC' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); } .a-select:hover, .p-select:hover { border-color: var(--a-border); } /* Open, or focused. The caret turns accent so the control reads as live. */ .a-select:focus, .p-select:focus { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23B07D18' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); } /* A select nobody can change should not invite a click. */ .a-select:disabled, .p-select:disabled { opacity: .55; cursor: not-allowed; background-image: none; } /* * The option list itself. * * A browser draws this with the operating system, and most of it cannot be * styled — but background and colour are honoured on every current engine, and * without them a dark admin panel opens a white menu. Padding is respected on * Firefox and ignored elsewhere; harmless where it is. */ /* * ── The fix that actually matters ── * * color-scheme tells the browser which palette to draw NATIVE controls with. * Without it Chrome renders a