@use "../colors" as c;
@use "../mixins" as m;

@use "sass:color";

.user-search {
  position: relative;

  .results {
    @include m.ilios-list-reset;
    background: c.$white;
    border: 1px solid c.$slightWhite;
    border-radius: 3px;
    box-shadow: 0 2px 2px color.adjust(c.$black, $alpha: -0.8);
    color: c.$raisinBlack;
    left: 0;
    max-height: 15rem;
    overflow: scroll;
    top: 2rem;
    transition: all 0.2s ease-in-out;
    z-index: 100;

    li {
      border-bottom: 1px solid c.$culturedGrey;
      padding: 0.6rem;
      padding-left: 1rem;

      &.active:hover {
        background-color: color.adjust(c.$blueMunsell, $lightness: 50%);
        cursor: pointer;
      }

      &.inactive {
        color: color.adjust(c.$culturedGrey, $lightness: -20%);
        cursor: default;
        font-style: italic;
      }

      &.results-count {
        color: c.$fernGreen;
      }
    }

    .email {
      color: c.$davysGrey;
      font-style: italic;
      padding-right: 0.2rem;
    }
  }
}
