.nb-ripple-button-v6 {
    display: inline-grid;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;

    --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);
}
.nb-ripple-button-v6__inner {
    pointer-events: none;
    grid-area: 1 / 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    transition: clip-path var(--ripple-duration) var(--smooth-ease), scale calc(var(--ripple-duration) * 0.75) var(--smooth-ease), translate calc(var(--ripple-duration) * 0.9) var(--smooth-ease), opacity calc(var(--ripple-duration) * 0.5) ease-out;
}
.nb-ripple-button-v6::after {
    content: attr(data-text);
    display: block;
    grid-area: 1 / 1;
    z-index: 1;
    transition: clip-path var(--ripple-duration) var(--smooth-ease), scale calc(var(--ripple-duration) * 1.75) var(--elastic-ease-out), translate calc(var(--ripple-duration) * 1.75) var(--elastic-ease-out), opacity calc(var(--ripple-duration) * 0.5) ease-out;
    clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
    translate: 0 var(--ripple-translate) 0;
    scale: 1.05;
    opacity: 0;
    pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
    .nb-ripple-button-v6:is(:hover, :focus-visible) .nb-ripple-button-v6__inner {
        clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
        translate: 0 calc(var(--ripple-translate) * -1) 0;
        scale: 0.95;
        opacity: 0;
    }
    .nb-ripple-button-v6:is(:hover, :focus-visible)::after {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        translate: 0 0 0;
        scale: 1;
        opacity: 1;
        transition-delay: var(--ripple-delay);
    }
}