.choosing {
  display: contents;
}

.choosing__menu {
  position: fixed;
  z-index: 100;
  display: flex;
  flex-direction: column;
  min-width: 16rem;
  max-width: calc(100vw - 1.6rem);
  padding: 0.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border-darker);
  border-radius: 0.5rem;
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.12);
}

.choosing__menu[hidden] {
  display: none;
}

.choosing__search {
  flex: none;
  width: 100%;
  margin-bottom: 0.35rem;
}

.choosing__list {
  flex: 1;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.choosing__option {
  padding: 0.55rem 0.75rem;
  font-size: 0.9375rem;
  color: var(--color-text);
  border-radius: 0.35rem;
  cursor: pointer;
}

.choosing__option:hover {
  background: var(--color-surface);
}

.choosing__option--chosen {
  background: var(--color-selected);
}

.choosing__option--chosen:hover {
  background: var(--color-selected);
}

.choosing__option--none {
  color: var(--color-text-muted);
}

.choosing__none {
  padding: 0.55rem 0.75rem;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.choosing__button {
  padding: 0.55em 0.85em;
  text-align: start;
  background: var(--input-background, transparent);
  border-radius: 0.5em;
  border: 1px solid var(--color-border-darker);
  font-family: inherit;
  font-size: max(16px, 1em);
  letter-spacing: inherit;
  color: var(--color-text);
  cursor: pointer;
  inline-size: 100%;
}

.choosing__button:focus {
  border-color: var(--color-selected-dark);
  box-shadow: 0 0 0 var(--hover-size, 2px) var(--color-selected-dark);
  outline: none;
}

.choosing__button[hidden] {
  display: none;
}

.choosing__button--none {
  color: var(--color-text-muted);
}