.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; } } } } }