:root{
--accordion-bg: theme(colors.black);
--accordion-text-color: theme(colors.white);
--accordion-border-color: theme(colors.grey.200);
}
.block-accordion{
@apply mb-md;
&__inner{
border-color: var(--accordion-border-color);
@apply border-t;
/* &:last-child:not(:first-child){
@apply border-b;
} */
&:last-child{
@apply border-b;
}
&:hover{
> button{
background: var(--accordion-bg);
color: var(--accordion-text-color);
&::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");
}
}
}
> button{
@apply
relative
text-left
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
;
}
}
> div{
@apply pt-xs pb-base pl-12 xl:pl-16 pr-[calc(var(--grid-gutter)*2)];
> p{
color: var(--accordion-text-color);
@apply mb-0;
}
div[class^="block-"]{
@apply mb-0;
p{
color: var(--accordion-text-color);
}
}
}
&.is-toggled{
background: var(--accordion-bg);
color: var(--accordion-text-color);
--accordion-border-color: theme(colors.grey.500);
> button{
&::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");
}
}
}
}
}
&:hover{
--accordion-border-color: theme(colors.grey.200);
/* @apply border-grey-500; */
}
}
&--2cols{
@apply xl:grid xl:grid-cols-2 gap-x-[calc(var(--grid-gutter)*2)];
.block-container-column{
+ .block-container-column{
@apply -mt-px xl:mt-0;
}
}
}
&--sm{
/* @apply lg:w-1/2; */
.block-accordion__inner{
> button{
@apply text-size-md pl-[calc(2.25rem+0.625rem)] py-1;
&::before{
@apply w-9 -translate-y-0;
}
}
> div{
@apply py-4 pl-[calc(2.25rem+0.625rem)];
}
}
}
@at-root body.has-primary-bg{
.block-accordion{
&__inner{
> button{
&:hover{
@apply text-yellow-100;
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='%23FFCC00'/%3E%3C/svg%3E%0A");
}
}
}
}
}
}
