.select {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--foreground-primary);
  background-color: var(--background-quaternary);
  border: var(--border-width-thin) solid var(--foreground-secondary);
  padding: 6px 32px 6px 10px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  transition:
    border-color 120ms,
    background-color 120ms;
}
.select:focus-visible {
  outline: none;
  border-color: var(--foreground-primary);
}
.select[aria-invalid='true'] {
  border-color: var(--danger-color);
}
.select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}