/*------------------------------------
  Search Form - Slide Down
------------------------------------*/

.u-search-slide-down {
  position: absolute;
  z-index: 1003;
  top: 0;
  left: 0;
  width: 23.75rem;

  &-trigger {
    &.active {
      .u-search-slide-down-trigger__icon {
        &::before {
          content: "\f00d";
        }
      }
    }
  }

  .input-group {
    background-color: $gray-8;
  }

  .form-control {
    min-height: 3.75rem;

    &::placeholder {
      color: $dark;
    }
  }

  .btn-icon__inner {
    color: $white;
  }

  .btn.btn-icon {
    margin-right: $header-search-slide-icon-margin-right;
    cursor: pointer !important;
  }

  .list-group-item {
    display: flex;
    align-items: center;
    padding: $header-search-slide-list-paddingY $header-search-slide-list-paddingX;

    @include hover-focus {
      background-color: $gray-10;
    }
  }

  .list-group-item-action {
    color: $dark;
  }

  &-bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    display: none;
    width: 100%;
    height: 100%;
  }

  .u-search-slide-down__input {
    opacity: 0;
    transform: translateY(-2rem);
    transition: transform $transition-timing cubic-bezier(.37,.41,.55,.98), opacity $transition-timing-sm;
  }

  .u-search-slide-down__suggestions {
    opacity: 0;
    transform: translateY(-3rem);
    transition: transform $transition-timing-md cubic-bezier(.37,.41,.55,.98), opacity $transition-timing-sm;
  }

  &.active .u-search-slide-down__input,
  &.active .u-search-slide-down__suggestions {
    opacity: 1;
    transform: none;
  }

  &.active .u-search-slide-down__suggestions {
    transition-delay: $transition-timing-sm;
  }
}