/* Keep native pickers, listboxes and plugin-enhanced selects intact. */
:is(#page, dialog)
  select:where(:not([multiple], .select2-hidden-accessible)):where(
    :not([size]),
    [size="0"],
    [size="1"]
  ) {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 48px;
  padding-inline-start: var(--spacing-12);
  background-image: url("../icons/select-chevron.svg");
  background-repeat: no-repeat;
  background-size: 16px 9px;
  background-position: right 16px center;
  transition:
    background-color 0.3s ease-out,
    border-color var(--transition-interactive);
}

:is(#page, dialog)
  select:where(:not([multiple], .select2-hidden-accessible)):where(
    :not([size]),
    [size="0"],
    [size="1"]
  ):open {
  background-color: var(--color-bg-page);
}

@media (hover: hover) {
  :is(#page, dialog)
    select:where(:not([multiple], .select2-hidden-accessible)):where(
      :not([size]),
      [size="0"],
      [size="1"]
    ):hover:not(:disabled) {
    background-color: var(--color-bg-page);
  }
}

.ov-native-select {
  position: relative;
  display: inline-grid;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  vertical-align: middle;
}
.woocommerce-ordering .ov-native-select {
  width: auto;
}
:is(#page, dialog) .ov-native-select > select {
  grid-area: 1 / 1;
  width: 100%;
  background-image: none;
}
.ov-native-select::after {
  content: "";
  position: absolute;
  inset-inline-end: 16px;
  top: calc(50% - 4.5px);
  width: 16px;
  height: 9px;
  background: url("../icons/select-chevron.svg") center / contain no-repeat;
  pointer-events: none;
  transform: rotate(0deg);
  transition: transform 0.3s ease-out;
}
/* Focus alone must not rotate the arrow. */
.ov-native-select:has(> select:open)::after {
  transform: rotate(180deg);
}

:is(#page, dialog)
  .ov-field__frame:has(select:not([multiple]))
  > .ov-field__chevron {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  :is(#page, dialog) select:where(:not([multiple], .select2-hidden-accessible)),
  .ov-native-select::after {
    transition: none;
  }
}

@media (forced-colors: active) {
  .ov-native-select::after {
    display: none;
  }
  :is(#page, dialog)
    select:where(:not([multiple], .select2-hidden-accessible)):where(
      :not([size]),
      [size="0"],
      [size="1"]
    ) {
    appearance: auto;
    -webkit-appearance: auto;
    background-image: none;
  }
}