$ripple-focus-opacity: 0.25;
$ripple-pulse-opacity: 0.5;
$ripple-focus-delay: 300ms;

.ripple-base {
    position: absolute;
    overflow: hidden;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    z-index: 0;

    span {
        position: absolute;
        border-radius: 50%;
        background-color: currentColor;
        opacity: 0;
        transform: scale(0);
        transition: all $ripple-focus-delay;
    }

    .ripple-focus {
        opacity: $ripple-focus-opacity;
        transform: scale(1);
        transition: all $ripple-focus-delay;
        animation: ripple-focus-keyframes 2500ms cubic-bezier(0.4, 0, 0.2, 1) $ripple-focus-delay infinite;
    }

    .ripple-pulse {
        opacity: $ripple-pulse-opacity;
        transform: scale(0);
        animation: ripple-pulse-keyframes 550ms cubic-bezier(0.4, 0, 0.2, 1);
    }
}

@keyframes ripple-pulse-keyframes {
    to {
        transform: scale(1);
        opacity: 0;
    }
}

@keyframes ripple-focus-keyframes {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.92);
    }

    100% {
        transform: scale(1);
    }
}