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

@mixin kendo-skeleton--layout-base() {

    .k-skeleton {
        display: block;
    }

    .k-skeleton-text {
        border-radius: $kendo-skeleton-text-border-radius;
        transform: $kendo-skeleton-text-transform;

        &:empty::before {
            content: "";
            display: inline-block;
        }
    }

    .k-skeleton-rect {
        border-radius: $kendo-skeleton-rect-border-radius;
    }

    .k-skeleton-circle {
        border-radius: $kendo-skeleton-circle-border-radius;
    }


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


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

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

        &::after {
            content: "";
            position: absolute;
            inset-block-start: 0;
            inset-inline-end: 0;
            inset-block-end: 0;
            inset-inline-start: 0;
            transform: translateX(-100%);
            animation: k-skeleton-wave 1.6s linear .5s infinite;
        }
    }


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

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

}