/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Keep native select semantics/pickers, with one inset arrow across all form
 * shells (including legacy inline backgrounds). Listboxes keep their own UI.
 * Only decoration/arrow clearance is important; field sizing/colors stay local.
 */
select:not([multiple]):is(:not([size]), [size="0"], [size="1"]) {
  -webkit-appearance: none;
  appearance: none;
  padding-inline-end: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23747f90' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: 16px 16px !important;
  background-position: right 12px center !important;
}

select:not([multiple]):is(:not([size]), [size="0"], [size="1"]):dir(rtl) {
  background-position: left 12px center !important;
}

/* Let high-contrast users' browser/system draw the arrow in their palette. */
@media (forced-colors: active) {
  select:not([multiple]):is(:not([size]), [size="0"], [size="1"]) {
    -webkit-appearance: auto;
    appearance: auto;
    padding-inline-end: 12px !important;
    background-image: none !important;
  }
}