.pf-listbox {
  box-sizing: border-box;
  position: absolute;
  z-index: 20;
  width: min(100%, 32rem);
  max-height: 18rem;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  overflow-y: auto;
  list-style: none;
  border: 1px solid #cfd6df;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 28px rgb(15 23 42 / 14%);
}

.pf-option {
  min-height: 2.25rem;
  padding: 0.55rem 0.65rem;
  border-radius: 4px;
  color: #172033;
  cursor: pointer;
}

.pf-option:hover,
.pf-option.is-active {
  background: #eef5ff;
}

@media (max-width: 640px) {
  .pf-listbox {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    max-height: 55vh;
    margin: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 10px 10px 0 0;
  }
}