.block-link{
/* @apply grid grid-cols-2 items-center; */
&.block-container{
/* @ TODO */
width: calc(100% - calc(var(--grid-gutter)*4));
@screen md{
width: calc(100vw - var(--grid-offset) - var(--grid-gutter)*2);
}
@apply mx-[calc(var(--grid-gutter)*2)] md:ml-[var(--grid-offset)];
@at-root :is(.block-container) .block-link.block-container{
@apply mx-0 w-full;
}
@at-root :is(.grid-container) .block-link.block-container{
@apply mx-0 w-full;
}
}
@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
;
}
&[href]:not(:where(
/* exclude hash only links */
[href^="#"],
/* exclude relative but not double slash only links */
[href^="/"]:not([href^="//"]),
)){
span{
span{
@apply -translate-y-[0.4rem];
}
}
}
}
&--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");
}
span{
span{
@apply text-grey-400;
}
}
}
}
@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;
}
}
