.block-filters{
    @apply my-md xl:my-lg bg-grey-100 lg:bg-transparent;
    &__header{
        @apply font-bold py-xs flex lg:hidden items-center relative h-[3.125rem] cursor-pointer;
        &::after{
            content: '';
            background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 37'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m18.504 21.319 5.66-5.241.68.733-6.34 5.87-6.34-5.87.68-.733 5.66 5.24Z' fill='%23000'/%3E%3C/svg%3E");
            @apply absolute right-0 top-0 bg-no-repeat bg-contain w-[3.125rem] h-[3.125rem] pointer-events-none;
        }
        &.is-toggled{
            &::after{
                @apply rotate-180;
            }
        }
    }
    &__inner{
        @apply hidden lg:flex flex-wrap -mx-[var(--grid-gutter)] mt-sm lg:mt-0;
        > *{
            @apply mb-sm xl:mb-0 w-full lg:flex-1 px-[var(--grid-gutter)];
        }
        &.is-visible{
            @apply flex;
        }
    }
    &--alt{
        .block-filters__inner{
            .input{
                @apply border-yellow-300;
                > *{
                    @apply placeholder-yellow-300;
                }
            }
        }
    }
}