// ┌────────┐
// │ Search │
// └────────┘
//  ↳ http://esri.github.io/calcite-web/documentation/patterns/#search
//  ↳ patterns → _search.md

@mixin search-overlay() {
  @include modal-overlay();
  z-index: 99;
  background: $white;
  padding: $baseline * 3 0 $baseline 0;
  overflow: auto;
  &.is-active {
    opacity: 0.98;
    .search-content {
      visibility: visible;
      opacity: 1;
      @include transition-delay(0ms);
      @include transform(translate3d(0,0,0))
    }
  }
}

  @mixin search-top-nav() {
    @include top-nav-link();
    @include font-size(0);
    background-color: transparent;
    border: none;
    &:hover {
      background-color: transparent;
    }
  }

  @mixin search-content() {
    text-align: left;
    width: $container-width;
    max-width: $vw-ratio * 100vw;
    @include box-sizing(border-box);
    padding: 0 $column-gutter/2;
    @include transform(translate3d(0, -20px, 0));
    display: inline-block;
    margin-bottom: $baseline * 2;
    opacity: 0;
    visibility: hidden;
    @include transition-prefixed(transform 300ms $easing-function, visibility 0ms linear 300ms, opacity 300ms $easing-function);
    @include transform(translate3d(0, 20px, 0));
  }

  @mixin search-input () {
    @include input-minimal();
    @include input-search();
    margin-top: .25em;
    height: auto;
    padding-left: 1em;
    background-size: .45em;
    font-size: modular-scale(6);
    line-height: 1.25;
  }

@if $include-search == true {
  .search-overlay { @include search-overlay() ;}
  .search-content { @include search-content() ;}
  .search-top-nav { @include search-top-nav() ;}
  .search-icon-open, .search-icon-close {
    display: none;
    .is-active {
      display: block;
    }
  }
  .search-input { @include search-input() ;}
}
