.q-ripple {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: inherit;
    border-radius: inherit;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    contain: strict;

    &__inner {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        color: inherit;
        border-radius: 50%;
        background: currentColor;
        pointer-events: none;
        will-change: transform, opacity;

        &--enter {
            transition: transform .225s cubic-bezier(.4, 0, .2, 1), opacity .1s cubic-bezier(.4, 0, .2, 1)
        }

        &--leave {
            transition: opacity .25s cubic-bezier(.4, 0, .2, 1)
        }
    }
}