[data-active="true"] {
    position: relative;
    overflow: hidden;
    display: block;
    contain: layout paint; 
    isolation: isolate; 
    -webkit-tap-highlight-color: transparent;
}

.ripple {
    position: absolute;
    inset: 0;
    margin: auto;
    pointer-events: none;

    border-radius: 50%;
    background: color-mix(in srgb, var(--text-clr), transparent 85%);

    transform: scale(0);
    opacity: 0;

    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);

    will-change: transform, opacity;
}

.ripple.is-visible {
    transform: scale(1);
    opacity: 0.6;
}

.ripple.exit {
    opacity: 0;
    transform: scale(1.2);
}