/*------------------------------------*\
  Components > Search
\*------------------------------------*/

.c-search {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding-top: quadruple($base-spacing-unit) + $base-spacing-unit;
  background: $bg-white;

  z-index: -1;
  opacity: 0;
  transform: scale(.96);
  transition: transform half($global-transition) cubic-bezier(.694, 0, .335,  1),
              opacity   half($global-transition) cubic-bezier(.8,   0, .55, .94),
              z-index   half($global-transition) step-end;


  @include mq($from: tablet) {
    padding-top: quadruple($base-spacing-unit);
  }

  &.is-active {
    z-index: 10;
    opacity: 1;
    transform: scale(1);
    transition: transform half($global-transition) cubic-bezier(.8, 0, .55, .94),
                opacity   half($global-transition) cubic-bezier(.8, 0, .55, .94),
                z-index   half($global-transition) step-start;
  }

  &__form {
    position: relative;
    margin-left: $base-spacing-unit;
    padding-right: $base-spacing-unit;
  }

  &__icon {
    position: absolute;
    top: $base-spacing-unit - half(quarter($base-spacing-unit));
    left: $base-spacing-unit;
    fill: $color-gray;
    width: double($base-spacing-unit);
    height: double($base-spacing-unit);
  }

  &__input[type='search'] {
    width: 100%;
    outline: none;
    margin-bottom: $base-spacing-unit;
    padding-left: triple($base-spacing-unit) + half($base-spacing-unit);
    font-size: $font-size-base;

    border: 0;
    border-radius: $global-border-radius;
    background-color: $bg-gray;

    &::placeholder {
      opacity: 1;
      color: $color-gray;
    }

    @include mq($from: tablet) {
      font-size: double($font-size-tiny);
    }
  }

  &__close {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: $base-spacing-unit;
    right: double($base-spacing-unit);
    width: double($base-spacing-unit) + $base-spacing-unit;
    height: double($base-spacing-unit) + $base-spacing-unit;

    cursor: pointer;
    border-radius: 100%;
    background-color: $bg-gray;

    @include mq($from: tablet) {
      top: double($base-spacing-unit);
    }

    .icon {
      fill: $color-gray;
      transition: $global-transition;
    }

    &:hover {
      .icon {
        fill: $color-text;
        transform: rotate(90deg);
      }
    }
  }
}