.search {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

.search .label {
  display: none;
}

.search-input {
  appearance: none;
  border: none;
  background-color: #fff;
  color: $dark;
  padding: 0 $spacing-2xl;
  text-overflow: ellipsis;
  width: 100%;
  min-height: 36px;
  order: 1;
  transition: background-color .2s ease,
    outline .2s ease;
  border: 1px solid $light-gray-2;
  border-radius: $border-radius;

  &:hover {
    background-color: $light-gray-3;
  }

  &:focus {
    border-color: $primary;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba($primary,.25);
  }

  &::placeholder {
    color: $dark-gray-3;
    font-weight: 400;
  }

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

.search-input[disabled] {
  outline: none;
  background-color: $light-gray-2;
  border: 1px solid $light-gray-1;
  color: $dark-gray-3;
  cursor: not-allowed;

  &::placeholder {
    color: $dark-gray-3;
    font-weight: 400;
  }
}

.search-input[disabled] ~ .search-magnifier path {
  fill: $dark-gray-3;
}

.search-magnifier {
  left: 0.75rem;
  z-index: 2;
  position: absolute;
  height: 16px;
  width: 16px;
  top: 50%;
  transform: translateY(-50%);
  // Ensure clear icon is rendered in Firefox (#1127)
  pointer-events: none;

  path {
    fill: $light-gray-1;
  }
}

.search-close {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s ease,
    background-color .2s ease, outline .2s ease,
    border .2s ease;
  cursor: pointer;
  visibility: visible;
  background-color: transparent;
  opacity: 1;
  position: absolute;
  height: 36px;
  width: 36px;
  right: 0;
  border: 1px solid $light-gray-2;
  border-left: none;
  border-top-right-radius: $border-radius;
  border-bottom-right-radius: $border-radius;

  path {
    fill: $dark-gray-3;
  }

  &:hover {
    background-color: $light-gray-3;
  }

  &:focus {
    outline: 0;
  }

  &:active {
    outline: 0;
    background-color: $light-gray-1;
  }
}


.search-input:focus ~ .search-close {
  border-color: $primary;
}

.search-input:focus ~ .search-magnifier path {
  fill: $primary;
}

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

.toolbar-search {
  width: 1.8rem;
  transition: all 175ms ease-in;

  &.toolbar-search--active {
    width: 250px;

    .search-magnifier {
      transform: scale(1);
      top: 9px;
    }

    .toolbar-search__btn {
      path {
        fill: $primary;
      }
    }

    .search-input {
      background-color: $light-gray-3;
    }

    .search-close {
      display: block;
    }
  }
}

.toolbar-search__btn {
  position: absolute;
  left: 0;
  top: 0;
  background: transparent;
  border: 0;
  height: 36px;
  width: 36px;
}

.skeleton .search-input {
  @include skeleton;
  width: 100%;

  &::placeholder {
    color: transparent;
  }
}