.ads-SearchFilter {
  @apply bg-white
    rounded
    border
    border-gray-500
    inline-flex
    relative
    h-8;
}

.ads-SearchFilter-submit-button,
.ads-SearchFilter-clear-button {
  @apply border-0
    bg-transparent
    shadow-none
    text-brandGreen-400
    relative
    right-0
    -my-px;
}

.ads-SearchFilter-submit-button:hover,
.ads-SearchFilter-submit-button:active,
.ads-SearchFilter-submit-button:focus,
.ads-SearchFilter-clear-button:hover,
.ads-SearchFilter-clear-button:active,
.ads-SearchFilter-clear-button:focus {
  @apply text-brandGreen-500
    bg-transparent;
}

.ads-SearchFilter-toggle-button {
  @apply w-8
    h-8
    bg-gray-200
    text-gray-600
    border
    border-gray-500
    rounded
    flex
    items-center
    justify-center
    -m-px
    duration-200;
}

.ads-SearchFilter-toggle-button--autoClose:hover,
.ads-SearchFilter-toggle-button--autoClose:focus,
.ads-SearchFilter-toggle-button--autoClose:active {
  @apply bg-gray-400;
}

.ads-SearchFilter--left .ads-SearchFilter-toggle-button--isOpen {
  @apply rounded-tl-none
    rounded-bl-none
    ml-0;
}

.ads-SearchFilter--right .ads-SearchFilter-toggle-button--isOpen {
  @apply rounded-tr-none
    rounded-br-none
    mr-0;
}

.ads-SearchFilter-input {
  @apply duration-300
    bg-transparent
    appearance-none
    px-0
    rounded;

  width: 0;
}

.ads-SearchFilter-input--isOpen {
  @apply w-42
    pl-2;
}

.ads-SearchFilter-toggle-button:focus,
.ads-SearchFilter-input:focus {
  @apply outline-none;
}