/* This file is part of the BIMData Platform package.
(c) BIMData support@bimdata.io
For the full copyright and license information, please view the LICENSE
file that was distributed with this source code. */
$search-border-color: $body-bg;
$search-btn-size: 44px;
$search-size-container: 216px;
$search-md-size-container: 290px;
$search-lg-size-container: 290px;
$search-size-input: $search-size-container - $search-btn-size;
$search-md-size-input: $search-md-size-container - $search-btn-size;
$search-lg-size-input: $search-lg-size-container - $search-btn-size;

.search-component {
  max-width: $search-size-container;
  position: relative;
  box-shadow: 0 2px 10px 0 rgba($color-black,.08);
  @include flexbox;

  @include media-breakpoint-up(md){
    max-width: $search-md-size-container;
  }
  @include media-breakpoint-up(lg){
    max-width: $search-lg-size-container;
  }
  .search-input{
    padding: 9px 14px;
    width: $search-size-input;
    min-width: auto;
    border: none;
    @include transition(all linear .25s);

    @include media-breakpoint-up(md){
      width: $search-md-size-input;
    }
    @include media-breakpoint-up(lg){
      width: $search-lg-size-input;
    }
    &.is-close{
      padding: 0;
      width: 0;
    }
    &::placeholder{
      color: $gray2;
      font-weight: 100;
      @include font-size(14px);
    }
    &:focus{
      outline: none;
    }
  }
  .base-button-icon{
    border-left: 1px solid $search-border-color;
    .svg-icon{
      fill: $color-primary;
      &.is-close{
        fill: $color-text;
      }
    }
  }
}
