.select {
  composes: reset from '../../reset.module.css';

  flex: 1;
  border: 2px solid var(--color-border-dark);
  border-radius: 2px;
  background-color: var(--color-background);
  color: var(--color-text);
  padding: 6px 40px 6px 16px;
  line-height: 20px;
  transition: border-color .3s ease;
  appearance: none;
  background-image: url('./Select.light.svg');
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: right 12px center;
}

@media (prefers-color-scheme: dark) {
  .select {
    background-image: url('./Select.dark.svg');
  }
}

.select:focus {
  border-color: var(--color-focus);
  outline: none;
}

.select > option {
  padding: 8px;
}