/*!
* Ripple CSS
*/
:root {
    --ripple-x: 0;
    --ripple-y: 0;
}

.btn-ripple,
.btn.btn-ripple {
    position: relative;
}

.btn-ripple-shadow:hover {
    box-shadow: 0 1px 3px -5px rgba(var(--bs-black-rgb), 0.3);
}

.ripple-wrapper .ripple-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    overflow: hidden;
    outline: none;
    cursor: pointer;
}

.ripple-wrapper .ripple-mask::before,
.ripple-wrapper .ripple-mask::after {
    content: '';
    position: absolute;
    display: inline;
    top: calc(100% * var(--ripple-y));
    left: calc(100% * var(--ripple-x));
    width: auto;
    height: auto;
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    padding: 50%;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0;
}

.ripple-wrapper .ripple-mask::before {
    -webkit-transition: transform 1s, opacity 1s;
    transition: transform 1s, opacity 1s;
}

.ripple-wrapper .ripple-mask::after {
    -webkit-transition: transform 2s, opacity 2s;
    transition: transform 2s, opacity 2s;
    opacity: 0;
}

.ripple-wrapper:active .ripple-mask::before,
.ripple-wrapper:active .ripple-mask::after {
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    transition: 0s;
    opacity: 1;
}