:root {
  --native-select-bg: #f8fafc;
  --native-select-text: #0f172a;
  --native-select-hover-bg: #e0f2fe;
  --native-select-checked-bg: #bae6fd;
  --native-select-checked-text: #0f172a;
}

[data-theme="dark"] {
  --native-select-bg: #17212e;
  --native-select-text: #e5edf6;
  --native-select-hover-bg: #1f3447;
  --native-select-checked-bg: #164b6d;
  --native-select-checked-text: #f8fafc;
}

select {
  color-scheme: light;
}

[data-theme="dark"] select {
  color-scheme: dark;
}

select option,
select optgroup {
  background-color: var(--native-select-bg);
  color: var(--native-select-text);
}

select option:checked {
  background-color: var(--native-select-checked-bg);
  color: var(--native-select-checked-text);
}

select option:hover,
select option:focus {
  background-color: var(--native-select-hover-bg);
  color: var(--native-select-text);
}