/* ==========================================================
   IROZON DESIGN SYSTEM — Select (canonical, v1)
   Public API:
   <div class="iz-select-wrap">
     <select class="iz-select">...</select>
     <svg class="iz-select-chevron" aria-hidden="true">...</svg>
   </div>
   A native <select> — full keyboard behavior, screen-reader behavior,
   mobile picker and forms integration stay exactly as the browser
   provides them. Only the closed-state chrome (native OS arrow) is
   normalized; the chevron drawn here is a real, decorative SVG so it
   can use currentColor like every other Irozon icon, layered on top
   with pointer-events:none so it never intercepts a click — the
   native control underneath still owns the whole box.
   Shares its field surface (border/focus/invalid/disabled) with
   input.css's grouped :where() selector.
   ========================================================== */

.iz-select-wrap {
  position: relative;
  display: block;
}

.iz-select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 40px;
  cursor: pointer;
}
.iz-select:disabled {
  cursor: not-allowed;
}

.iz-select-chevron {
  position: absolute;
  inset-inline-end: 14px;
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 16px;
  block-size: 16px;
  color: var(--color-text-muted);
  pointer-events: none;
  flex: none;
}
.iz-select-wrap:focus-within .iz-select-chevron {
  color: var(--color-text-primary);
}
.iz-select:disabled ~ .iz-select-chevron {
  color: var(--color-text-muted);
  opacity: 0.6;
}