@import "../../../sass/webpack_deps";

.lp-search {
  $input-height: 3.8rem;
  background-color: $color-white;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity ($animation-speed-ui / 2);
  z-index: z("menu");

  @media (min-width: $min-720) {
    box-shadow: -5rem 0 15rem rgba($color-black, .5);
  }

  &--visible {
    opacity: 1;
  }

  &__inner {
    height: $header-height-mobile;
    line-height: $input-height;
    position: relative;

    @media (min-width: $min-720) {
      height: $header-height;
    }

    &::after {
      @media (max-width: $max-720) {
        $offset: ($header-height-mobile / 2 + .4rem);
        @include fade-edge("right", $offset);
      }
    }
  }

  &__container {
    @include container-header;
  }

  &__input {
    border: 0;
    bottom: 0;
    color: $titlegray;
    font-size: 1.6rem;
    height: $input-height;
    left: ($header-height-mobile / 2);
    margin-bottom: auto;
    margin-top: auto;
    outline: 0;
    position: absolute;
    right: ($header-height-mobile + .9rem);
    top: 0;
    width: calc(100% - #{$header-height-mobile} - .9rem);

    @media (max-width: $max-720) {
      padding-top: .3rem;
    }

    @media (min-width: $min-720) {
      font-size: 2.4rem;
      font-weight: 300;
      left: 3.4rem;
      right: 3.4rem;
      width: calc(100% - 8rem);
    }

    @include placeholder {
      color: rgba($titlegray, .38);
    }
  }

  &__label {
    bottom: 0;
    color: $titlegray;
    display: block;
    font-size: 0;
    height: 1.8rem;
    left: 0;
    line-height: 1;
    margin-bottom: auto;
    margin-top: auto;
    position: absolute;
    top: 0;
    width: 1.8rem;

    @media (min-width: $min-720) {
      top: -.4rem;
    }

    .svg-icon {
      font-size: 1.8rem;
      vertical-align: 0;
    }
  }

  &__close {
    background-color: transparent;
    border: 0;
    bottom: 0;
    color: $color-light-blue;
    cursor: pointer;
    display: block;
    font-size: 0;
    height: $input-height;
    margin-bottom: auto;
    margin-top: auto;
    outline: 0;
    padding: 0;
    position: absolute;
    right: -.9rem;
    top: 0;
    transition: color $animation-speed;
    width: $input-height;

    @media (min-width: $min-720) {
      right: 0;
      top: -.4rem;
    }

    &:hover,
    &:active,
    &:focus {
      color: $titlegray;
    }

    .svg-icon {
      font-size: 1.8rem;
      vertical-align: 0;
    }
  }
}

.lp-search-results {
  height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-2rem);
  transition: opacity $animation-speed, transform $animation-speed;

  &--visible {
    height: auto;
    opacity: 1;
    transform: translateY(0);
  }

  &__list {
    border-top: .1rem solid $color-light-slate;
    display: block;
    list-style: none;
    margin-bottom: ($gutter * 1.5);
    padding-top: 1rem;
  }

  &__more {
    @include more();
    display: inline-block;
    font-size: 1.2rem;
    margin-bottom: ($gutter * 1.5);
  }
}