asi-calculator/components/Select/Select.module.css

.selectWrapper {
  position: relative;
}

.select {
  display: inline-block;
  all: unset;
  padding: 0 0.75rem;
}

.select:hover:not(.select[disabled]) {
  background-color: rgba(var(--background-rgb), 0.5);
}

.select:focus-within {
  outline: none;
  background-color: rgba(var(--background-rgb), 0.9);
}

@media (prefers-color-scheme: dark) {
  .select:hover:not(.select[disabled]) {
    background-color: rgba(var(--foreground-rgb), 0.1);
  }

  .select:focus-within {
    background-color: rgba(var(--foreground-rgb), 0.2);
  }
}

.icon {
  position: absolute;
  right: 0.1rem;
  width: 1em;
  height: 100%;
  z-index: -1;
}