.select {
  align-items: center;
  max-width: var(--size-31);
  display: grid;
  grid-template-areas: 'select';
  height: var(--size-15);
  margin-block-start: var(--size-4);
  width: 100%;
}

select {
  appearance: none;
  border: var(--size-0) solid var(--color-orange-550);
  border-radius: calc(var(--size-15) / 2);
  color: var(--color-orange-550);
  cursor: inherit;
  height: var(--size-15);
  line-height: inherit;
  margin-block: 0;
  margin-inline: 0;
  padding-block: 0;
  padding-inline: var(--size-8);
}

select,
.select:after {
  grid-area: select;
}

select::-ms-expand {
  display: none;
}

select:focus {
  border-color: var(--color-orange-700);
  color: var(--color-orange-700);
  outline: var(--focus-ring);
}

.select::after {
  content: '';
  justify-self: end;
  margin-inline-end: var(--size-8);
  mask-position: cover;
  mask-repeat: no-repeat;
  mask-image: url('data:image/svg+xml,<svg width="17" height="10" viewBox="0 0 17 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 1L8.5 8.5L1 0.999999" stroke="black" stroke-width="2"/></svg>');
  width: 17px;
  height: 10px;
  background-color: var(--color-purple-650);
}