@use "./_variables.scss" as *;

@mixin kendo-skeleton--layout() {

    .k-skeleton {
        display: block;
    }

    // Text
    .k-skeleton-text {
        border-radius: var( --kendo-skeleton-text-border-radius, #{$kendo-skeleton-text-border-radius} );
        transform: var( --kendo-skeleton-text-transform, #{$kendo-skeleton-text-transform} );

        &:empty::before {
            content: "\200b";
        }
    }

    // Shapes
    .k-skeleton-rect {
        border-radius: var( --kendo-skeleton-rect-border-radius, #{$kendo-skeleton-rect-border-radius} );
    }

    .k-skeleton-circle {
        border-radius: var( --kendo-skeleton-circle-border-radius, #{$kendo-skeleton-circle-border-radius} );
    }


    // Legacy alias
    .k-placeholder-line {
        @extend .k-skeleton !optional;
        @extend .k-skeleton-text !optional;
    }

    // Wave animation
    @keyframes k-skeleton-wave {
        0% {
            transform: translateX(-100%);
        }
        60% {
            transform: translateX(100%);
        }
        100% {
            transform: translateX(100%);
        }
    }

    .k-skeleton-wave .k-skeleton,
    .k-skeleton-wave.k-skeleton {
        position: relative;
        overflow: hidden;

        &::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            transform: translateX(-100%);
            animation: k-skeleton-wave 1.6s linear .5s infinite;
        }
    }

    // Pulse
    @keyframes k-skeleton-pulse {
        0% {
            opacity: 1;
        }
        50% {
            opacity: .4;
        }
        100% {
            opacity: 1;
        }
    }

    .k-skeleton-pulse .k-skeleton,
    .k-skeleton-pulse.k-skeleton {
        animation: k-skeleton-pulse 1.5s ease-in-out .5s infinite;
    }

}