.nb-ripple-button-v5 {
    --elastic-ease-out: linear( 0, 0.5737 7.6%, 0.8382 11.87%, 0.9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, 0.9995 46.99%, 0.9872 51.63%, 0.9842 58.77%, 1.0011 81.26%, 1 );
    --smooth-ease: cubic-bezier(.32, .72, 0, 1);
    --color-ease: cubic-bezier(.215, .61, .355, 1);
    transition: transform var(--ripple-duration) var(--elastic-ease-out);

    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    transform-style: preserve-3d;
    cursor: pointer;

    display: grid;
    width: fit-content;
}
.nb-ripple-button-v5__bg {
    grid-area: 1 / 1;
    display: grid;
    overflow: clip;
    transition: scale var(--ripple-duration) var(--smooth-ease), background-color calc(var(--ripple-duration) * 0.5) var(--color-ease);
}
.nb-ripple-button-v5__bg-inner {
    transform-origin: 100% 0;
    grid-area: 1 / 1;
    width: 120%;
    display: block;
    translate: -10% 100% 0;
    rotate: 0 0 1 -12deg;
    transition: translate calc(var(--ripple-duration) * 1.3) var(--smooth-ease), rotate calc(var(--ripple-duration) * 1.1) var(--smooth-ease);
    transition-delay: calc((var(--index) * -1) * .042s);
}
.nb-ripple-button-v5__bg-inner--first {
    background-color: var(--first-ripple--color);
}
.nb-ripple-button-v5__bg-inner--second {
    background-color: var(--second-ripple--color);
}
.nb-ripple-button-v5__inner {
    z-index: 1;
    grid-area: 1 / 1;
    display: grid;
    overflow: clip;
}
.nb-ripple-button-v5__inner::after {
    content: attr(data-text);
    display: block;
    grid-area: 1 / 1;
    translate: 0 2em 0;
    rotate: 1 1 .5 -30deg;
    transform-origin: top right;
    transition: translate var(--text-duration) var(--elastic-ease-out), rotate calc(var(--text-duration) * 0.75) var(--smooth-ease), opacity calc(var(--text-duration) * 0.3) ease-out;
}
.nb-ripple-button-v5__text {
    transform-origin: 0 0;
    grid-area: 1 / 1;
    display: block;
    transition: translate var(--text-duration) var(--elastic-ease-out), rotate calc(var(--text-duration) * 0.75) var(--smooth-ease), opacity calc(var(--text-duration) * 0.3) ease-out, color var(--text-duration) var(--color-ease);
}
@media (hover: hover) and (pointer: fine) {    
    .nb-ripple-button-v5:is(:hover, :focus-visible) .nb-ripple-button-v5__bg-inner {
        translate: -10% 0 0;
        rotate: 0 0 1 0deg;
        transition-delay: calc(var(--index) * var(--ripples-stagger));
    }
    
    .nb-ripple-button-v5:is(:hover, :focus-visible) .nb-ripple-button-v5__text {
        rotate: 1 1 0.45 -60deg;
        translate: 0 -2em 0;
        opacity: 0;
    }
    
    .nb-ripple-button-v5:is(:hover, :focus-visible) .nb-ripple-button-v5__inner::after {
        rotate: 1 1 .45 0deg;
        translate: 0 0 0;
        opacity: 1;
        transition-delay: .1s;
    }
}