.popup-picker--sticky {
  position: sticky;
  position: -webkit-sticky;
  top: calc(6.5rem + env(safe-area-inset-top));
  z-index: 9;
}

.popup-picker__inputs {
  display: flex;
  position: relative;
}

.popup-picker__input {
  border-radius: 2rem;

  .popup-picker--filtering &,
  .popup-picker--blank & {
    padding-right: 3rem;
  }

  .popup-picker--blank & {
    padding-right: 6rem;
    padding-left: 2rem;
    background-image: none;
  }
}

.popup-picker__filter {
  margin-right: 0.5rem;

  .popup-picker--filtering & {
    width: 100%;
    margin: 0;
  }

  .popup-picker--adding &,
  .popup-picker--blank & {
    display: none;
  }
}

.popup-picker__add {
  .popup-picker--filtering & { display: none; }

  .popup-picker--adding &,
  .popup-picker--blank & {
    width: 100%;
  }
}

.popup-picker__actions {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 5.5rem;

  .popup-picker--filtering &,
  .popup-picker--adding &,
  .popup-picker--blank & {
    display: flex;
    align-items: center;
  }

  .popup-picker--filtering &,
  .popup-picker--blank & {
    width: 3.5rem;
  }
}

.popup-picker__action-submit {
  &::before {
    filter: var(--colorize-green);
    background-image: url("/assets/icons/submit-outline-3a91aa57.svg");
  }

  .popup-picker--filtering & {
    display: none;
  }

  .popup-picker--blank & {
    margin-right: var(--half-space);
    margin-left: var(--quarter-space);
  }
}

.popup-picker__action-cancel {
  &::before {
    filter: var(--colorize-red);
    background-image: url("/assets/icons/cancel-outline-79da8af9.svg");
  }

  .popup-picker--blank & {
    display: none;
  }
}

.popup-picker__show-when-filtered { display: none; }

.popup-picker--filtered {
  .popup-picker__hide-when-filtered { display: none; }
  .popup-picker__show-when-filtered { display: unset; }
}

.popup-picker--empty {
  > * { display: none; }

  .popup-picker__show-when-empty { display: block; }
}

.popup-picker--searching {
  .popup-picker__show-when-empty { display: none; }
}

.popup-picker__show-when-empty { display: none; }