assets/css/_select.css
select, ::picker(select) {
  appearance: base-select;
}

select {
  display: flex;
  padding: var(--padding_d2);
  background: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  gap: var(--padding_d2);
  cursor: pointer;
  color: var(--color-nav);
}

select:hover, select:focus {
  background: var(--foreground-hover);
  color: var(--color-nav);
}

select::picker-icon {
  content:"◂▸";
  rotate: 90deg;
  font-size: .8rem;
}

select:open::picker-icon {
  content:"▸◂";
  transition: 0.4s;
}

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

option {
  display: flex;
  justify-content: flex-start;
  padding: var(--padding_d2);
  background: var(--foreground);
  border: 1px solid var(--border);
  gap: var(--padding_d2);
  transition: 0.6s;
  color: var(--color-nav);
}

option:first-of-type {
  border-radius: var(--radius) var(--radius)  0 0;
}

option:last-of-type {
  border-radius: 0 0 var(--radius) var(--radius) ;
}

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

option:nth-of-type(even) {
  background: var(--background-grey);
}

option:hover, option:focus {
  background: var(--foreground-hover);
}

option .icon {
  text-box: trim-both cap alphabetic;
}

selectedcontent .icon {
  display: none;
}

option:checked {
  background: var(--background-grey-embed);
}

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

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

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

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

::picker(select) {
  top: calc(anchor(bottom) + 1px);
  left: calc(-1*var(--padding));
}
