/* Saved family-member picker shared by upload review forms. */

.morrow-person-picker{
  position:relative;
  width:100%;
}

.morrow-person-picker > .input{
  width:100%;
  padding-right:48px;
}

.morrow-person-picker-toggle{
  position:absolute;
  top:50%;
  right:5px;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  transform:translateY(-50%);
  border:0;
  border-radius:12px;
  background:transparent;
  color:#5f696d;
  font:700 22px/1 "DM Sans",sans-serif;
  cursor:pointer;
  touch-action:manipulation;
}

.morrow-person-picker-toggle:hover,
.morrow-person-picker.open .morrow-person-picker-toggle{
  background:#f0ece7;
  color:#0f2238;
}

.morrow-person-picker-toggle:focus-visible,
.morrow-person-picker-option:focus-visible{
  outline:3px solid rgba(125,152,139,.25);
  outline-offset:1px;
}

.morrow-person-picker-menu{
  position:absolute;
  z-index:80;
  top:calc(100% + 7px);
  right:0;
  left:0;
  display:none;
  max-height:230px;
  overflow-y:auto;
  padding:6px;
  border:1px solid rgba(15,34,56,.12);
  border-radius:15px;
  background:#fff;
  box-shadow:0 12px 30px rgba(15,34,56,.14);
}

.morrow-person-picker.open .morrow-person-picker-menu{
  display:grid;
  gap:3px;
}

.morrow-person-picker-option{
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#0f2238;
  font:600 14px/1.35 "DM Sans",sans-serif;
  text-align:left;
  cursor:pointer;
  touch-action:manipulation;
}

.morrow-person-picker-option:hover,
.morrow-person-picker-option:active{
  background:#f6f3ee;
}

@media(max-width:600px){
  .morrow-person-picker-toggle{
    width:44px;
    height:44px;
  }

  .morrow-person-picker-option{
    min-height:48px;
    font-size:15px;
  }
}