@import (reference) "./../styles/variables/legacy-variables.less";
@import (reference) "./../styles/less/mixins/_logical-properties.less";

@animation-timing-function: ease-in-out;
@animation-duration: 0.03s;

.typeahead {
  &.open {
    .input-group {
      z-index: @zindex-popover;
    }
  }

  .dropdown.btn-block {
    display: block;
  }

  .dropdown-menu {
    max-width: 100%;
    width: 100%;
    .np-theme-personal--forest-green &,
    .np-theme-personal--bright-green &,
    .np-theme-personal--dark & {
      background-color: var(--color-background-elevated);
    }
  }

  &--multiple {
    .np-chip {
      margin-bottom: auto;
      animation-name: slide;
      animation-duration: @animation-duration;
      animation-timing-function: @animation-timing-function;

      &:first-child {
        animation-name: slideFirst;
      }

      &-remove {
        animation-name: fadeIn;
        animation-duration: @animation-duration;
        animation-timing-function: @animation-timing-function;
      }
    }

    .form-control {
      height: auto;
      min-height: auto;
      padding-top: 0;
      padding-bottom: 0;
      overflow: auto;
    }

    .typeahead__input {
      border: none;
      outline: none;
      float: none;
      align-self: stretch;
      padding: 0;
    }

    .typeahead__input-aligner {
      height: 40px;
      display: inline-block;
      width: 0;
    }

    .typeahead__input-container {
      cursor: text;
      display: flex;
    }

    .sizer {
      white-space: pre;
      position: absolute;
      visibility: hidden;
      width: auto;
    }

    &.typeahead--has-value {
      .typeahead__input-container {
        .padding(left, var(--size-8));
      }

      .input-group-addon + .typeahead__input-container {
        padding-left: 0;
      }

      .typeahead__input {
        margin-bottom: calc(-1 * var(--size-8) + 1px);
        .margin(left, var(--size-4));
      }

      .typeahead__input-wrapper {
        &::after {
          content: "";
          height: calc(var(--size-8) - 1);
          width: 100%;
        }
      }
    }
  }

  &__input-wrapper {
    width: 100%;
    margin-top: -1px;
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    align-items: center;
    .np-theme-personal & {
      margin-top: 0;
    }
  }

  &--empty {
    &.typeahead--multiple {
      .typeahead__input-wrapper {
        padding: 0;
        margin: 0;
      }
    }
  }

  &--prompt {
    margin-top: var(--size-4);
  }

  // SIZES
  &-sm {
    &.typeahead--multiple {
      .typeahead__input-container {
        min-height: @input-height-small;
      }

      .typeahead__input {
        padding-top: 0;
      }
    }
  }

  &-md {
    &.typeahead--multiple {
      .typeahead__input-container {
        min-height: var(--input-height-base);
      }
    }
  }

  &-lg {
    &.typeahead--multiple {
      .typeahead__input-container {
        min-height: var(--input-height-large);
      }

      .typeahead__input {
        padding-top: calc(var(--size-8) - 1);
      }

      .typeahead__input-wrapper {
        padding-bottom: var(--size-8);
        margin: 0;

        &::after {
          content: none;
        }
      }

      .np-chip {
        margin-bottom: 0;
      }
    }
  }

  @keyframes slide {
    from {
      transform: translateX(-12px);
    }

    to {
      transform: none;
    }
  }

  @keyframes slideFirst {
    from {
      transform: translateX(-4px);
    }

    to {
      transform: none;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 0.6;
    }
  }

  @media (--screen-xs-max) {
    .dropdown.open .dropdown-menu {
      position: absolute;
      bottom: auto;
      overflow: scroll;
    }
  }

  .np-theme-personal & {
    .input-group:not(.disabled, :disabled, .input-group--has-error):focus-within .tw-icon-search {
      color: var(--color-interactive-primary);
    }
    .tw-icon-search {
      color: var(--color-interactive-secondary);
    }
    .np-chip {
      margin-top: 9px !important;
    }
    .np-chip--removable {
      .np-text-body-default-bold {
        padding-right: var(--size-16);
        @media (--screen-400-zoom) {
          padding-right: var(--size-32);
        }
      }
    }
  }
}