select,::picker(select) {
  appearance: base-select;
}

select {
  border: 0.1vw solid white;
  background-color: #492772;
  padding: 0.25vw;
  padding-left: 0.5vw;
  transition: 0.4s;
  font-family: ADLaM Display;
  font-size: 1.5vw;
  color: white;
}

select:hover,select:focus {
  background-color: #311B4B;
  cursor: pointer;
}

select::picker-icon {
  color: white;
  transition: 0.4s rotate;
}

select:open::picker-icon {
  rotate: 180deg;
}

::picker(select) {
  border: none;
}

option {
  display: flex;
  justify-content: flex-start;
  gap: 1vw;
  border: 0.1vw solid white;
  background-color: #492772;
  padding: 0.5vw;
  transition: 0.4s;
  color: white;
}

option:first-of-type {
  border-radius: 0.4vw 0.4vw 0 0;
}

option:last-of-type {
  border-radius: 0 0 0.4vw 0.4vw;
}

option:not(option:last-of-type) {
  border-bottom: none;
}

option:nth-of-type(odd) {
  background-color: #311A4C;
}

option:hover, option:focus {
  background-color: #633498;
  border-color: gray;
  cursor: pointer;
}

option:checked {
  font-weight: bold;
}

option::checkmark {
  order: 1;
  margin-left: auto;
  content: "☑️";
}

::picker(select) {
  opacity: 0;
  transition: all 0.4s allow-discrete;
}

::picker(select):popover-open {
  opacity: 1;
}

@starting-style {
  ::picker(select):popover-open {
    opacity: 0;
  }
}

::picker(select) {
  top: calc(anchor(bottom) + 0.05vw);
  left: anchor(10%);
}