/* wgf-select.css - ONE shared client dropdown skin for native <select> (ig-51).
   COLLAPSED control wears the AH 3-slice dropdown (auctionhouse-ui-dropdown
   left / middle / right) with the real red-tabbed arrow slice riding the right
   edge; gold Friz text; squared (no radius). The OPEN option list stays native
   (CSS cannot restyle the OS popup) which owner law accepts; the option{} rule
   below only forces a dark row background so that native list is not blinding
   white. Mirrors #dealsSourceSelect in ah-deals.css and .wgf-dropdown in
   wgf-chrome.css (both READ-ONLY). Apply by adding class="wgf-select" to any
   native <select>.

   The rule doubles the class (.wgf-select.wgf-select) on purpose: it lifts the
   utility to specificity 0,0,2,0 so it wins over per-page single-class select
   skins (.ic-realm, .controls select, etc.) without coupling to any page or
   depending on stylesheet load order. */
.wgf-select.wgf-select {
  box-sizing: border-box;
  height: var(--wgf-dropdown-h, 34px);
  min-width: 160px;
  padding: 0 40px 0 12px;                 /* right pad clears the arrow slice */
  border: 0;
  border-radius: 0;
  background:
    url(/assets/ui/auctionhouse-ui-dropdown-arrow-down.png) right 6px center / auto 20px no-repeat,
    url(/assets/ui/auctionhouse-ui-dropdown-left.png) left center / auto 100% no-repeat,
    url(/assets/ui/auctionhouse-ui-dropdown-right.png) right center / auto 100% no-repeat,
    url(/assets/ui/auctionhouse-ui-dropdown-middle.png) left center / auto 100% repeat-x;
  color: var(--wgf-gold, #f4c45c);
  font-family: var(--font-game, "Friz Quadrata TT", Georgia, serif);
  font-size: var(--text-sm, 0.85rem);
  font-weight: 600;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  box-shadow: none;
}

.wgf-select.wgf-select:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 2px rgba(244, 196, 92, 0.65));
}

/* disabled control: swap in the greyed arrow slice, keep the frame slices.
   Only background-image is re-set so the position/size from the shorthand
   above are retained. */
.wgf-select.wgf-select[disabled] {
  cursor: default;
  color: var(--wgf-gold-dim, #8a7231);
  background-image:
    url(/assets/ui/auctionhouse-ui-dropdown-arrow-disabled.png),
    url(/assets/ui/auctionhouse-ui-dropdown-left.png),
    url(/assets/ui/auctionhouse-ui-dropdown-right.png),
    url(/assets/ui/auctionhouse-ui-dropdown-middle.png);
}

/* the OS-drawn option rows: force a dark background where the browser honours
   it so the native popup list is not blinding white. */
.wgf-select option {
  background: #0a0a0c;
  color: var(--wgf-text, #ece7dd);
}