.block-accordion{
    &__inner{
        @apply border-t border-grey-200;
        &:last-child:not(:first-child){
            @apply border-b;
        }
        > span{
            @apply 
                relative 
                flex items-center 
                w-full 
                text-size-lg 
                min-h-[2.25rem]
                py-1 /*xl:py-1.5 */
                pl-12 xl:pl-16 
                pr-5 
                cursor-pointer
            ;
            &::before{
                content: '';
                background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M37.5 26H12.5V24H37.5V26Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24 37.5L24 12.5L26 12.5L26 37.5L24 37.5Z' fill='black'/%3E%3C/svg%3E%0A");
                background-size: 100%;
                transition: transform .2s ease;
                @apply 
                    absolute 
                    top-0 left-0 
                    w-9 xl:w-12.5 
                    aspect-square 
                    bg-no-repeat bg-center 
                    rotate-0
                ;
            }
            &:hover{
                @apply bg-black text-white;
                &::before{
                    background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M37.5 26H12.5V24H37.5V26Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24 37.5L24 12.5L26 12.5L26 37.5L24 37.5Z' fill='white'/%3E%3C/svg%3E%0A");
                }
            } 
        }
        > div{
            @apply pt-xs pb-base pl-12 xl:pl-16 pr-[calc(var(--grid-gutter)*2)];
            > p{
                @apply text-white mb-0;
            }
            div[class^="block-"]{
                @apply mb-0;
                p{
                    @apply text-white;
                }
            }
        }
        &.is-toggled{
            @apply bg-black text-white;
            > span{
                &::before{
                    background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M37.5 26H12.5V24H37.5V26Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24 37.5L24 12.5L26 12.5L26 37.5L24 37.5Z' fill='white'/%3E%3C/svg%3E%0A");
                    @apply rotate-45;
                    /* background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M34.545 16.868 16.867 34.546l-1.414-1.414 17.678-17.678 1.414 1.414Z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M33.13 34.546 15.454 16.868l1.414-1.414 17.678 17.678-1.414 1.414Z' fill='%23fff'/%3E%3C/svg%3E"); */
                }
            }
            .block-link{
                &::before{
                    background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m34.711 24-6.778-7.32 1.467-1.36L38.363 25 29.4 34.68l-1.467-1.36L34.71 26H12v-2h22.711Z' fill='%23fff'/%3E%3C/svg%3E");
                }
                @apply border-grey-500;
                &:hover{
                    @apply bg-white text-black;
                    &::before{
                        background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m34.711 24-6.778-7.32 1.467-1.36L38.363 25 29.4 34.68l-1.467-1.36L34.71 26H12v-2h22.711Z' fill='%23000'/%3E%3C/svg%3E");
                    }
                }
                &[href]:not(:where(
                    /* exclude hash only links */
                    [href^="#"],
                    /* exclude relative but not double slash only links */
                    [href^="/"]:not([href^="//"]),
                    /* domains to exclude */
                    /* [href*="//stackoverflow.com"], */
                    /* subdomains to exclude */
                    /* [href*="//meta.stackoverflow.com"] */
                )){
                    &::before{
                        background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M31.0124 17.0725L21.043 16.6891L21.1198 14.6906L34.3016 15.1975L34.8086 28.3793L32.81 28.4562L32.4266 18.4867L16.3673 34.546L14.9531 33.1318L31.0124 17.0725Z' fill='white'/%3E%3C/svg%3E%0A");
                    }
                    &:hover{
                        &::before{
                            background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M31.0124 17.0725L21.043 16.6891L21.1198 14.6906L34.3016 15.1975L34.8086 28.3793L32.81 28.4562L32.4266 18.4867L16.3673 34.546L14.9531 33.1318L31.0124 17.0725Z' fill='black'/%3E%3C/svg%3E%0A");
                        }
                    }
                }
            }
        }
    }
    &--2cols{
        @apply xl:grid xl:grid-cols-2 gap-x-[calc(var(--grid-gutter)*2)];
    }
    &--sm{
        /* @apply lg:w-1/2; */
        .block-accordion__inner{
            > span{
                @apply text-size-md pl-[calc(2.25rem+0.625rem)];
                &::before{
                    @apply w-9 -translate-y-0;
                }
            }
            > div{
                @apply py-4 pl-[calc(2.25rem+0.625rem)];
            }    
        }
    }
}