.nb-flipflop-button-v2 {
z-index: 1;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
user-select: none;
text-decoration: none;
position: relative;
cursor: pointer;
width: fit-content;
--elastic-ease: linear( 0, 0.2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, 0.941 24.01%, 0.8912 25.91%, 0.8694 27.84%, 0.8698 29.21%, 0.8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, 0.9961 53.26%, 0.9839 57.54%, 0.9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, 0.9981 86.66%, 1 100% );
--transform-ease: cubic-bezier(.32, .72, 0, 1);
--opacity-ease: ease-out;
--color-ease: ease-out;
}
.nb-flipflop-button-v2::before {
content: "";
display: block;
position: absolute;
}
.nb-flipflop-button-v2::after {
content: attr(data-text);
display: flex;
align-items: center;
justify-content: center;
position: absolute;
inset: 0;
z-index: 1;
transform-origin: bottom center;
transform: scale(1) translateZ(0);
}
.nb-flipflop-button-v2__container {
display: block;
transform-origin: top center;
transform: scale(0) translateZ(0);
}
.nb-flipflop-button-v2__text {
display: block;
}
.nb-flipflop-button-v2__background {
z-index: -1;
width: 100%;
height: 100%;
position: absolute;
inset: 0%;
}
.nb-flipflop-button-v2::after {
transform: scale(0) translateZ(0);
transition: transform var(--flipflop-duration) var(--transform-ease), color calc(var(--flipflop-duration) * 0.3) var(--color-ease);
}
.nb-flipflop-button-v2__container {
transition: transform var(--flipflop-duration) var(--transform-ease);
transform: scale(1) translateZ(0);
}
.nb-flipflop-button-v2__text {
transition: opacity calc(var(--flipflop-duration) * 0.5) var(--opacity-ease);
}
.nb-flipflop-button-v2:hover .nb-flipflop-button-v2__container,
.nb-flipflop-button-v2:focus-visible .nb-flipflop-button-v2__container {
transform: scale(0) translateZ(0);
}
.nb-flipflop-button-v2:hover .nb-flipflop-button-v2__text,
.nb-flipflop-button-v2:focus-visible .nb-flipflop-button-v2__text {
opacity: 0;
}
.nb-flipflop-button-v2:hover::after,
.nb-flipflop-button-v2:focus-visible::after {
transform: scale(1) translateZ(0);
}