@use "../../z-index/index.scss" as *;
@use "../../motion/index.scss" as *;

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

    .k-ripple-target {
        position: relative;
    }

    .k-ripple {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        inset-inline-end: 0;
        inset-block-end: 0;
        z-index: k-z-index("base", 1);
        overflow: hidden;
        pointer-events: none;
    }

    .k-ripple-blob {
        pointer-events: none;
        position: absolute;
        border-radius: 50%;
        padding: 0;
        transform: translate(-50%, -50%) scale(0);
        transition: opacity k-transition(fade-out), transform k-transition(smooth);
        opacity: .1;
        background-color: currentColor;
    }

    .k-primary .k-ripple-blob {
        opacity: .2;
    }

    .k-ripple-focus::after {
        visibility: visible;
        animation: ripple k-transition(fluid);
    }

    @keyframes ripple {
        0% {
            transform: translate(-50%, -50%) scale(0);
        }
        20% {
            transform: translate(-50%, -50%) scale(1);
        }
        100% {
            opacity: 0;
            transform: translate(-50%, -50%) scale(1);
        }
    }

}