select {
  outline: none;
  height: 40px;
  min-width: 100px;
  max-width: 200px;
  padding: 4px 35px 4px 12px;
  font-size: 16px;
  font-family: 'Inter', sans-serif;
  border: solid 1px var(--color-border-primary);
  color: var(--color-text-secondary);
  border-radius: 2px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--color-bg-primary) var(--select-chevron) no-repeat;
  background-position-x: calc(100% - 8px);
  background-position-y: 15px;

  &.expand {
    width: 100%;
    max-width: 100%;
  }
}

@media(min-width: 1240px) {
  select {
    max-width: 275px;
  }
}