.animation {
    position: relative;
    overflow: hidden;

    &::before {
        content: '';
        opacity: 0;
        border-radius: var(--radius-full);
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(
            120deg,
            transparent 20%,
            var(--brand-alpha-medium) 50%,
            transparent 80%
        );
        transform: skewX(-20deg);
        animation: shineDefault 9s ease-in-out infinite;
    }

    &:hover {
        &::before {
            animation: shineHover 3s ease-in-out infinite;
        }
    }
}

@keyframes shineDefault {
    0% {
        left: -100%;
    }
    1% {
        left: -100%;
        opacity: 1;
    }
    15% {
        left: 100%;
        opacity: 1;
    }
    16% {
        opacity: 0;
    }
    100% {
        left: -100%;
    }
}

@keyframes shineHover {
    0% {
        left: -100%;
    }
    1% {
        left: -100%;
        opacity: 1;
    }
    45% {
        left: 100%;
        opacity: 1;
    }
    46% {
        opacity: 0;
    }
    100% {
        left: -100%;
    }
}
