/* Keep the dropdown arrow inside the control, with room for long labels. */
select:not([multiple]):not([size]),
select[size="1"]:not([multiple]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-inline-end: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: right 12px center;
}
.dark select:not([multiple]):not([size]),
.dark select[size="1"]:not([multiple]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
select:not([multiple]):not([size]):dir(rtl),
select[size="1"]:not([multiple]):dir(rtl) { background-position: left 12px center; }
@media (forced-colors: active) {
  select:not([multiple]):not([size]),
  select[size="1"]:not([multiple]) { appearance: auto; background-image: none; }
}