user-picker {
  display: block;
  .input, .display {
    display: flex;
  }
  .input .text-field {
    position: relative;
    flex-grow: 1;
    margin-right: 1rem;
  }
  .display {
    align-items: center;

    .name {
      flex-grow: 1;
      display: flex;
      align-items: center;
      padding-right: 1rem;

      a[field=username] {
        margin: 0 1rem;
      }
    }
  }

  suggestion-box {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;

    .outline {
      background-color: var(--back);
      border: solid 1px #000;
      border-radius: 0.5rem;
      overflow: hidden;
    }
    .select {
      cursor: pointer;
      padding: 0.2rem 1rem;
      display: flex;
      align-items: center;
    }
    .select:hover {
      background-color: var(--back-50);
    }
    .select:active {
      background-color: var(--back-90);
    }
  }
}

user-picker.input {
  .display {
    display: none;
  }
}
user-picker.display {
  .input {
    display: none;
  }
}