.wrapper {
  --bg-color: var(--prj-input);
  --text-color: var(--prj-input-text);

  position: relative;
  padding: var(--prj-spacing-1);
  background-color: var(--bg-color);
  color: var(--text-color);

  display: flex;
  gap: var(--prj-spacing-1);
}

.input {
  width: 100%;
  display: flex;
  gap: var(--prj-spacing-1);

  font-size: 0.8em;
}

.selectedItem {
  background-color: var(--prj-surface-3);
  color: var(--prj-text);
  font-size: 0.9em;
}

.selectedItem > * {
  padding: var(--prj-spacing-1);
}

.deleteItem:hover {
  background-color: var(--prj-danger);
}

.optionList {
  position: absolute;
  left: 0;
  top: 120%;

  width: 100%;

  padding: var(--prj-spacing-1);
  text-align: start;

  background-color: var(--bg-color);
  color: var(--text-color);
}

.optionItem {
  display: block;
  width: 100%;
  border: none;
  background-color: transparent;
  text-align: start;
  padding: var(--prj-spacing-1);
}

.optionItem:disabled {
  color: var(--prj-disabled-text);
}

.optionItem:not(:first-child) {
  margin-top: var(--prj-spacing-1);
}

.optionItem:not(:disabled):hover {
  background-color: var(--prj-accent-bg);
}