/* ========================================================================== Reusable select2 skin for the front site (Figma: QF - BilAraby - WebsiteDesign-Concept-2, node 40004861:37556 "Select Country"). Applies to selects rendered through (or any select carrying .ba-select2), which init with containerCssClass 'ba-select2-container' and dropdownCssClass 'ba-select2-dropdown' - see select2-revamp.js. select2 re-parents the dropdown to , so it cannot be scoped under the container and needs its own class; everything here keys off those two so nothing leaks onto the admin theme or the pre-existing .select2 usages on the watchlist page. THEME: select2-revamp.js inits with theme 'ba', which switches off the skin select2 ships - every rule in its stylesheet is scoped under .select2-container--default, and none of that matches once the theme class is .select2-container--ba. What survives is its structural base layer, which still writes three-class rules like `.select2-container .select2-selection--single .select2-selection__rendered`. That is why the inner pieces below are reached through the longer `.ba-select2-container.select2-container .select2-selection ...` chain rather than the shortest selector that reads well - don't shorten them. Turning the theme off also means anything the default skin used to provide and the design still wants (the results cursor, for one) has to be written here explicitly. Three states come from the design: closed/empty - translucent cream tint, hairline border, regular label open - white pill + panel, inset highlight, ambient shadow closed/selected - cream-50 pill, white border, bold label, shadow ========================================================================== */ /* The native