/* https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select */
/* TODO: move all of this into a class and use it in the formbuilder instead of mutating all the selects? */

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

option {
  padding: 4px 12px;
}

select::picker-icon {
  color: var(--color-main-gray-dark);
  transition: 0.1s rotate;
}

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

::picker(select) {
  border-color: var(--color-main-gray);
  border-radius: 6px;
}

selectedcontent .icon {
  display: none;
}

option:checked {
  font-weight: bold;
}

option::checkmark {
  order: 1;
}

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

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

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

::picker(select) {
  top: calc(anchor(bottom) + 1px);
}