@use "../../../_base";
@use "../../../_colors";

// TODO (SS-38765) - Replace this with fontawesome react packages
$fa-font-path: "../node_modules/font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

$border: 1px solid colors.$light-gray;
$height: 3.5em;
$input-padding: 1ch;

%ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

$width: 100%;
@mixin dropdown-base {
  width: $width;
  position: absolute;
  background: colors.$white;
  border: 1px solid colors.$alto-gray;
}

.Dropdown {
  @include base.reset;
  height: $height;
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  min-width: 150px;
  cursor: pointer;
  width: 100%;

  input {
    box-sizing: border-box;
    padding: $input-padding;
    outline: none;
    border: 0;
    min-width: 0;
    background: colors.$white;
    border: 1px solid colors.$light-gray;
    height: 100%;
  }

  &.disabled {
    opacity: 0.5;
    color: colors.$dark-gray;
    cursor: not-allowed;
  }

  .selected-option {
    display: flex;
    align-items: center;
    border: $border;
    background: colors.$white;
    height: 100%;
    user-select: none;

    span {
      @extend %ellipsis;
      padding: $input-padding;
      flex-grow: 1;
    }
  }

  .ld-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 1em;
    border-left: $border;
    flex-shrink: 0;
  }

}

.Picklist {
  @include dropdown-base;
  box-sizing: border-box;
  z-index: 1;
  border-top: 0;

  .search {
    padding: 0.5em;
    display: flex;
    height: 30px;

    input {
      width: 100%;
      border: $border;
      background: colors.$wild-sand-gray;
    }
  }

  .no-results {
    padding: 0.5em;
    color: colors.$grenadier-red;
    background: colors.$your-pink;
  }

  &.search-active ul li:first-of-type {
    background-color: colors.$wild-sand-gray;
  }

  ul {
    position: absolute;
    left: -1px;
    right: -1px;
    overflow: auto;
    max-height: 400px;
    list-style-type: none;
    padding: 0;
    margin: 0;
    border: $border;
    border-top: 0;
    background: colors.$white;

    li {
      @extend %ellipsis;
      padding: 0.5em;
      &:hover {
        background: colors.$gallery-gray !important;
      }

      &.disabled {
        opacity: 0.5;
        color: colors.$dark-gray;
        cursor: not-allowed;
      }
    }
    li.clear-selection {
      opacity: 0.5;
    }
  }

  &.multiselect ul {
    li:before {
      margin-right: 1ch;
      font-family: FontAwesome;
      content: '\f0c8';
      color: colors.$light-gray;
    }
    li.selected:before {
      color: colors.$asparagus-green;
      content: '\f14a';
    }
  }
}

.Typeahead {
  @include base.reset;
  height: $height;
  background-color: colors.$white;
  border: $border;
  display: flex;
  align-items: center;

  .inputs {
    // Important: provides reference to the absolute positioned .search
    position: relative;
    flex-grow: 1;
    input {
      background: transparent;
      border: 0;
      width: 100%;
      padding-right: 0;
    }
  }

  .autofill {
    pointer-events: none;
    user-select: none;
    color: transparent;
    &.active {
      color: colors.$dark-gray;
    }
  }

  .search {
    position: absolute;
  }

  .clear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: colors.$dark-gray;
    width: 3ch;
    transition: all 0.2s;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    background: none;
    border: 0;
    cursor: pointer;
    i {
      padding: 0 1ch;
    }
    &:hover {
      color: colors.$black;
    }
  }
}

.highlighted {
  font-weight: bold;
  border-bottom: 1px dotted colors.$scorpion-gray;
}