:root{
--cursor-sound: url('data:image/svg+xml,');
--cursor-mute: url('data:image/svg+xml,');
--cursor-play: url('data:image/svg+xml,');
--cursor-pause: url('data:image/svg+xml,');
--cursor-plus: url('data:image/svg+xml,');
--cursor-minus: url('data:image/svg+xml,');
--cursor-link: url('data:image/svg+xml,');
}
#special-cursor{
display: none;
}
@media (hover: hover){
#special-cursor{
pointer-events: none;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
aspect-ratio: 1;
transform: translate3d(-50%, -50%, 0);
transform-origin: center;
border-radius: 999px;
background: var(--wp--preset--color--farbe-2) url() center no-repeat;
transition: all .3s ease;
transition-property: width, height, background-color, background-image;
&::before{
content: var(--cursor-link);
font-size: 0;
line-height: 1;
opacity: 0;
transform: scale(0.5);
transition: all .3s ease;
transition-property: transform, opacity;
}
&.clickable{
width: 54px;
&::before{
opacity: 1;
transform: scale(1);
}
&.external::before{
transform: scale(1) rotate(-45deg);
}
&.sound::before{
content: var(--cursor-sound);
}
&.mute::before{
content: var(--cursor-mute);
}
&.play::before{
content: var(--cursor-play);
}
&.pause::before{
content: var(--cursor-pause);
}
&.plus::before{
content: var(--cursor-plus);
}
&.minus::before{
content: var(--cursor-minus);
}
}
&.contast-bg{
background-color: var(--wp--preset--color--farbe-1);
}
}
}