@import '../../scss/variables/colors';
@import '../../scss/mixins/button';

$base-class: "search-bar";

.#{$base-class} {
  &__container {
    display: inline-flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    height: 32px;
    width: 100%;
  }

  &__icon {
    position: absolute;
    align-self: center;
  }

  &__search-icon {
    left: 0;
    padding: 7px 13px;
    fill: $icon-primary-color;

    &--interactive {
      cursor: pointer;
    }
  }

  &__clear-icon {
    display: block;
    right: 13px;
    cursor: pointer;
    fill: $icon-primary-color;

    @include icon-button-interactive-styles;

    &:active {
      box-shadow: none;
    }

    &:hover {
      cursor: pointer;
      fill: #4284f4;
    }

    &:focus {
      box-shadow: none;
      border-radius: 3px;
      box-sizing: border-box;
      border: 1px solid #8db4ee;
    }

    &--hidden {
      display: none;
    }
  }

  &__loader {
    right: 13px;
  }

  &__input {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 40px;
    border-radius: 4px;
    border: 1px solid #cfd3d5;
    transition: all ease-in 0.3s;
    transition-property: width, padding;

    &:focus,
    &:active {
      outline: none;
      border-color: $primary-color;
    }
  }

  &__input--collapsed {
    width: 0;
    padding-right: 0;
  }
}