mk-badge {--badge-size: 3rem;
--badge-quarter-spin: (3 * 360deg) / 4;
--anim-duration: 1.4s;
display: block;
box-sizing: content-box;
height: var(--badge-size);
width: var(--badge-size);
border-radius: var(--badge-size);
overflow: clip;
border: 4px solid lightblue;
transition: box-shadow 0.15s ease-in, transform 0.15s ease-out;
box-shadow: 0 0 0 0 lightblue;
cursor: pointer;
img {
height: var(--badge-size);
width: var(--badge-size);
}
&:hover {
box-shadow: 0 0 20px -1px goldenrod;
}
&.spin {
animation: var(--anim-duration) ease-in-out badge-spin, var(--anim-duration) ease-in-out badge-wobble;
animation-composition: accumulate;
}
@media (prefers-reduced-motion) {
cursor: unset;
&.spin {
animation: unset;
}
}
}@keyframes badge-wobble {
from {
transform: rotateX(0turn);
}
50% {
transform: rotateX(30deg);
}
to {
transform: rotateX(0);
}
}
@keyframes badge-spin {
from {
transform: rotateY(0turn);
}
to {
transform: rotateY(2turn);
}
}