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: white url('data:image/svg+xml;utf8,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_246_5)"><path d="M6.52253 7.70265C6.23347 7.99171 5.76403 7.99171 5.47497 7.70265L1.03497 3.26265C0.745906 2.97359 0.745906 2.50415 1.03497 2.21509C1.32403 1.92603 1.79347 1.92603 2.08253 2.21509L5.99991 6.13246L9.91728 2.2174C10.2063 1.92834 10.6758 1.92834 10.9648 2.2174C11.2539 2.50646 11.2539 2.9759 10.9648 3.26496L6.52484 7.70496L6.52253 7.70265Z" fill="black"/></g><defs><clipPath id="clip0_246_5"><rect width="7.4" height="11.84" fill="white" transform="matrix(0 1 -1 0 11.9199 0.52002)"/></clipPath></defs></svg>') 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;
  }
}