@import 'search-bar-mobile';
@import 'search-overlay-mobile';
@import 'search-result-header';

.search-bar-with-options-container
{
  padding: .6rem 0 .7rem 0;

  .search-no-result
  {
    color: white;
    padding-top: .7rem;
    text-decoration: underline;
    text-align: center;
    font-weight: bold;
  }
}

.search-bar-container
{
  padding: 0 .7rem;
  text-align: center;
  margin: 0;
  padding-bottom: 0;
  padding-left: .7rem;

  .search-icon
  {
    position: absolute;
    font-size: 1.2rem;
    height: 2rem;
    line-height: 2rem;

    &:before { line-height: 2rem; }
    &:hover { cursor: pointer; }

    &.search-bar-icon
    {
      left: 1.2rem;
    }
    &.search-geolocalize
    {
      right: 1.4rem;
    }
  }

  .search-bar
  {
    font-size: 16px;
    padding: 0 2.2rem 0 2.3rem;
    box-shadow: none !important;
    margin: 0;
    text-align: left;
    font-weight: bold;
    height: 2rem;
    width: 100%;
    border: none !important;
    @include border-radius(5px);
    @include box-sizing(border-box);

    @media (min-width: 850px) {
      text-transform: uppercase;
      font-size: .8rem;
    }

    &.invalid
    {
      border-color: $error-color !important;
    }

    &::-webkit-input-placeholder {
      color: #949494;
    }
    &::-moz-placeholder {
      color: #949494;
    }
    &:-ms-input-placeholder {
      color: #949494;
    }
    &:-moz-placeholder {
      color: #949494;
    }
  }
}

.search-bar-autocomplete-results-container
{
  position: absolute;
  z-index: 5;
  padding: .5rem 0;
  left: 0 !important;
  top: auto !important;
  margin-top: .5rem;
  width: 400px;
  max-width: 100vw;
  box-shadow: 0 0 0 1px rgba(99,114,130,.16), 0 8px 16px rgba(27,39,51,.08);
  border-radius: 0 4px 4px 4px;
  max-height: 80vh;
  overflow: auto;

  .search-bar-autocomplete-result-item
  {
    cursor: pointer;
    &.option .icon::before {
      float: left;
    }

    .search-bar-autocomplete-result-item-wrapper
    {
      padding: .7rem 1rem;
      @include flexbox;
      @include flex-wrap(nowrap);
      @include align(center);
      text-align: left;

      &:hover, &.ui-state-active
      {
        background-color: rgba(125, 125, 125, 0.08);
      }

      &.nested
      {
        padding-left: 1rem;
      }

      .label
      {
        @include flex(1 auto);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .subLabel
      {
        text-align: right;
        opacity: .8;
        font-size: .85rem;
        width: 7.5rem;
        flex-shrink: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .icon {
        padding: 0;
        margin-right: 0 !important;
        font-size: 1.1rem;
        width: 2rem;
        flex-shrink: 0;
      }
      .category-label {
        opacity: .9;
        font-size: .9rem;
      }
      .category-name {
        font-style: italic;
        font-size: .9rem;
        font-weight: bold;
        margin-left: .3rem;
      }
      .element-name {
        font-size: .9rem;
        font-weight: bold;
        font-style: italic;
      }
      .search-term {
        margin: 0 3px;
        &:after { content: '"'; }
        &:before { content: '"'; }
      }
    }
    + .search_elements, &.search_geocoded + .option, &.geocoded + .option {
      border-top: 1px solid #eee;
      padding-top: .3rem;
      margin-top: .3rem;
    }

    &.search_elements, &.search_geocoded {
      .label {
        text-transform: uppercase;
        font-weight: bold;
        font-size: .8rem;
      }
    }
    &.search_elements {
      padding-top: .6rem;
      .icon {
        line-height: 1rem;
        opacity: .9;
        font-size: 1rem;
      }
    }
    &.geocoded {
      .label {
        font-size: .9rem;
      }
      .icon {
        line-height: .9rem;
        opacity: .9;
      }
    }
  }
}

#search-spinner-loader
{
  top: 7px;
  height: 18px;
  width: 18px;
  display: none;
  position: absolute;
  .spinner-layer { border-color: #5d5d5d; }
  .circle-clipper .circle { border-width: 2px; }
}
#search-spinner-loader {
  left: 0;
}
.search-bar-icon.loading {
  &:before { content: none; }
  #search-spinner-loader { display: block; }
}
