.block-link{
    /* @apply grid grid-cols-2 items-center; */
    &.block-container{
        /* @ TODO */
        width: calc(100% - calc(var(--grid-gutter)*4));
        @apply mx-[calc(var(--grid-gutter)*2)];
    }
    @apply flex text-size-lg border-y border-grey-200 relative;
    &:last-child:not(:first-child){
        @apply border-b;
    }
    &::before{
        content: '';
        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");
        background-size: 100%;
        @apply 
            absolute 
            top-0 left-0 
            w-9 xl:w-12.5 
            aspect-square 
            bg-no-repeat bg-center 
        ;
    }
    > span{
        @apply 
            /* flex items-center  */
            min-h-[2.25rem]
            pl-12 xl:pl-16 
            py-0.5 xl:py-1.5 
            pr-5
        ;
    }
    &:hover{
        @apply bg-black text-white;
        &::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");
        }
    }
    &[href]:not(:where(
        /* exclude hash only links */
        [href^="#"],
        /* exclude relative but not double slash only links */
        [href^="/"]:not([href^="//"]),
    )){
        &::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");
        }
        span{
            span{                
                @apply inline-block text-size-sm text-grey-300 /*self-start*/ ml-1 -translate-y-[0.875rem];
            }
        }
        &: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='white'/%3E%3C/svg%3E%0A");
            }
        }
    }
    &--sm{
        @apply text-size-md;
        &::before{
            @apply w-9 top-0.5;
        }
        > span{
            @apply 
                pl-12
            ;
        }    
    }
    &--white{
        @apply text-white border-grey-500;
        &::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='white'/%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");
            }
        }
    }
    @at-root body.has-primary-bg{
        .block-link{
            @apply border-yellow-300;
            span{
                span{                
                    @apply text-yellow-400;
                }
            }
            &:hover{
                @apply text-yellow-100;
                span{
                    span{
                        @apply text-yellow-100;
                    }
                }
                &::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='%23FFCC00'/%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='%23FFCC00'/%3E%3C/svg%3E%0A");
                    }
                }        
            }
        }
    }
    + .block-link{
        @apply -mt-px;
    }
}