ilios/frontend

@use "../ilios-common/colors" as c;
@use "../ilios-common/mixins" as m;

@use "sass:color";

.global-search-box {
  display: inline-block;
  max-width: 40rem;
  position: relative;

  input[type="search"] {
    background-color: c.$white;
    border: 1px solid c.$tealBlue;
    border-radius: 3px;
    height: 100%;
    padding: 0 0.5rem 0 1.5rem;
    width: 100%;

    &.has-results {
      border-bottom: 0;
      border-radius: 3px 3px 0 0;
    }
  }

  .search-icon {
    color: c.$blueMunsell;
    cursor: pointer;
    display: inline-block;
    left: 0;
    margin-right: 2px;
    padding-left: 6px;
    position: absolute;
    top: 25%;
  }

  .autocomplete {
    @include m.ilios-list-reset;
    background: c.$white;
    border: 1px solid c.$tealBlue;
    border-radius: 0 0 3px 3px;
    box-shadow: 0 2px 2px color.adjust(c.$black, $alpha: 0.8);
    color: c.$raisinBlack;
    cursor: pointer;
    max-height: 23rem;
    max-width: 40rem;
    overflow-y: scroll;
    position: absolute;
    transition: all 0.2s ease-in-out;
    width: 100%;
    z-index: 100;

    &.hidden {
      display: none;
    }
  }

  .autocomplete-row {
    @include m.ilios-button-reset;
    overflow: hidden;
    padding: 0.25rem 0.375rem;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
    width: 100%;

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