.nb-flipflop-button {
    --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(.216, .62, .356, 1);

    transition: transform var(--flipflop-duration) var(--elastic-ease-out);
    -webkit-tap-highlight-color: transparent;

    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    width: fit-content;
}
.nb-flipflop-button__inner {
    pointer-events: none;
    perspective: var(--perspective);
    transform-style: preserve-3d;
    display: grid;
}
.nb-flipflop-button__back {
    transition: translate calc(var(--flipflop-duration) * 1.9) var(--elastic-ease-out), rotate calc(var(--flipflop-duration) * 1.8) var(--elastic-ease-out), opacity calc(var(--flipflop-duration) * 0.33) ease-out;
    opacity: 0;
    translate: 0 2em -6em;
    rotate: 1 0 0 -90deg;
}
.nb-flipflop-button__back {
    grid-area: 1 / 1;
    justify-content: center;
    place-self: center;
    align-items: center;
    width: calc(100% - .125em);
    height: calc(100% - .125em);
    display: flex;
    translate: 0 .5em -3.5em;
}
.nb-flipflop-button__back::before {
    --index: 1;
    content: attr(data-text);
    display: contents;
}
.nb-flipflop-button__front {
    transition: translate calc(var(--flipflop-duration) * 1.9) var(--elastic-ease-out), rotate calc(var(--flipflop-duration) * 1.8) var(--elastic-ease-out), opacity calc(var(--flipflop-duration) * 0.33) ease-out;
}
.nb-flipflop-button__front {
    grid-area: 1 / 1;
    display: grid;
}
.nb-flipflop-button__bg {
    transition: background-color calc(var(--flipflop-duration) * 0.4) var(--color-ease);
}
.nb-flipflop-button__bg {
    grid-area: 1 / 1;
    display: grid;
}
.nb-flipflop-button__text {
    transition: translate calc(var(--flipflop-duration) * 1.8) var(--elastic-ease-out);
}
.nb-flipflop-button__text {
    grid-area: 1 / 1;
}

.nb-flipflop-button__bg {
    transition: background-color .2s var(--color-ease);
}

.nb-flipflop-button__front {
    transition: translate calc(var(--flipflop-duration) * 1.9) var(--elastic-ease-out), rotate calc(var(--flipflop-duration) * 1.8) var(--elastic-ease-out), opacity calc(var(--flipflop-duration) * 0.33) ease-out;
}

.nb-flipflop-button__text {
    transition: translate calc(var(--flipflop-duration) * 1.8) var(--elastic-ease-out);
}

.nb-flipflop-button__back::before{
    transition: translate calc(var(--flipflop-duration) * 1.8) var(--elastic-ease-out);
    translate: 0 .75em 0;
}

.nb-flipflop-button__back {
    transition: translate calc(var(--flipflop-duration) * 1.9) var(--elastic-ease-out), rotate calc(var(--flipflop-duration) * 1.8) var(--elastic-ease-out), opacity calc(var(--flipflop-duration) * 0.33) ease-out;
    opacity: 0;
    translate: 0 2em -6em;
    rotate: 1 0 0 -90deg;
}

.nb-flipflop-button__back::before {
    --index: 1;
    content: attr(data-text);
    display: contents;
}

@media (hover: hover) and (pointer: fine) {
    .nb-flipflop-button:is(:hover, :focus-visible) .nb-flipflop-button__front {
        translate: 0 -2em -6em;
        rotate: 1 0 0 85deg;
        opacity: 0;
    }
    
    .nb-flipflop-button:is(:hover, :focus-visible) .nb-flipflop-button__text {
        translate: 0 -.75em 0;
        transition-delay: 0s;
    }
    
    .nb-flipflop-button:is(:hover, :focus-visible) .nb-flipflop-button__back {
        transition: translate calc(var(--flipflop-duration) * 1.9) var(--elastic-ease-out), rotate calc(var(--flipflop-duration) * 1.8) var(--elastic-ease-out), opacity calc(var(--flipflop-duration) * 0.33) ease-in;
        rotate: 1 0 0 0deg;
        translate: 0 0 0;
        opacity: 1;
    }
    
    .nb-flipflop-button:is(:hover, :focus-visible) :is(.nb-flipflop-button__back::before) {
        translate: 0 0 0;
        transition-delay: calc(var(--index) * .012s);
    }
}