//-----------------------------
// Search
//-----------------------------

@import '../../globals/scss/vars';
@import '../../globals/scss/colors';
@import '../../globals/scss/spacing';
@import '../../globals/scss/layout';
@import '../../globals/scss/helper-mixins';
@import '../../globals/scss/css--reset';
@import '../../globals/scss/typography';
@import '../../globals/scss/layout';
@import '../../globals/scss/import-once';

@include exports('search') {
  .#{$prefix}--search {
    display: flex;
    position: relative;
    width: 100%;
  }

  .#{$prefix}--search .#{$prefix}--label {
    @include hidden;
  }

  .#{$prefix}--search-input {
    @include reset;
    @include font-family;
    appearance: none;
    border: none;
    background-color: $field-01;
    color: $text-01;
    font-weight: 600;
    padding: 0 $spacing-2xl;
    text-overflow: ellipsis;
    width: 100%;

    &:focus {
      @include focus-outline('border');
    }

    &::placeholder {
      @include placeholder-colors;
      font-weight: 400;
    }

    &::-ms-clear {
      display: none;
    }
  }

  .#{$prefix}--search--sm .#{$prefix}--search-input {
    @include typescale('zeta');
    height: rem(32px);
  }

  .#{$prefix}--search--lg .#{$prefix}--search-input {
    @include typescale('zeta');
    height: rem(40px);
  }

  .#{$prefix}--search-magnifier,
  .#{$prefix}--search-close {
    position: absolute;
    height: 1rem;
    width: 1rem;
    top: calc(50% - 0.5rem);
  }

  .#{$prefix}--search-magnifier {
    left: 0.75rem;
    fill: $ui-05;
  }

  .#{$prefix}--search-close {
    transition: $transition--base;
    fill: $ui-05;
    cursor: pointer;
    visibility: visible;
    opacity: 1;
  }

  .#{$prefix}--search--sm .#{$prefix}--search-close {
    right: 0.75rem;
  }

  .#{$prefix}--search--lg .#{$prefix}--search-close {
    right: rem(100px);
  }

  .#{$prefix}--search-button {
    @include reset;
    border: 0;
    transition: $transition--base;
    height: rem(40px);
    width: rem(40px);
    min-width: rem(40px);
    margin-left: $spacing-2xs;;
    background-color: $ui-01;
    position: relative;
    padding: 0;
  }

  .#{$prefix}--search-button svg {
    position: relative;
    top: -1px;
    box-sizing: border-box;
    vertical-align: middle;
    transition: $transition--base;
    fill: $brand-01;
    height: 1rem;
    width: 1rem;
  }

  .#{$prefix}--search-button:hover,
  .#{$prefix}--search-button:focus {
    cursor: pointer;
    background-color: $brand-01;
    outline: 1px solid transparent;
  }

  .#{$prefix}--search-button:hover svg,
  .#{$prefix}--search-button:focus svg {
    fill: $ui-01;
  }

  .#{$prefix}--search-close--hidden {
    visibility: hidden;
    opacity: 0;
  }

  .#{$prefix}--search-view--hidden {
    display: none;
  }
}