@mixin ym-animation-bounce {
    animation: ym-motion-keyframes-bounce var(--ym-motion-duration-slow) ease;
}

@mixin ym-animation-fade-in {
    animation: ym-motion-keyframes-fade-in var(--ym-motion-duration-slow) ease;
}

@mixin ym-animation-pulse {
    animation: ym-motion-keyframes-pulse var(--ym-motion-duration-slow) ease;
}

@mixin ym-animation-spin {
    animation: ym-motion-keyframes-spin 2s infinite linear;
}

@mixin ym-animation-appear-above {
    animation: ym-motion-keyframes-appear-above var(--ym-motion-duration-slow) ease;
}

@mixin ym-animation-appear-below {
    animation: ym-motion-keyframes-appear-below var(--ym-motion-duration-slow) ease;
}

@mixin ym-animation-backdrop {
    animation: ym-motion-keyframes-backdrop var(--ym-motion-duration-slow) ease;
}

// Adds a sliding shining wave to element's background to indicate loading
//
// USAGE NOTES: if you're using `ym-max-w-xx` you'll need to add
// important (e.g. `ym-max-w-20!`). This is because `.ym-animation-skeleton-loader` already
// has a `max-width` statement, and we need to override it. You can override it
// only with lower numbers. Width rules (`ym-w-xx`) don't need an override, you
// can use them as-is. If you want to "synchronize" two elements next to each
// other, try adding `animation-delay` to offset elements.

@mixin ym-animation-skeleton-loader {
    overflow: hidden;
    background-color: var(--ym-bg-gray-50);
    background: linear-gradient(110deg, var(--ym-bg-gray-50) 35%, var(--ym-bg-white), var(--ym-bg-gray-50) 65%) 0px 0px / 100vw 100% fixed;

    // Enable animation only for users who don't have a preference
    // for reduced animation
    @media (prefers-reduced-motion: no-preference) {
        animation: ym-motion-keyframes-skeleton-loader 2s linear infinite;
        animation-delay: inherit;
    }
}