.nb-arrow-button-v6 {
-webkit-user-select: none;
user-select: none;
transform-style: preserve-3d;
display: grid;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
width: fit-content;
--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);
}
.nb-arrow-button-v6__bg {
pointer-events: none;
grid-area: 1 / 1;
overflow: clip;
}
.nb-arrow-button-v6__inner {
grid-area: 1 / 1;
display: grid;
translate: 0;
}
.nb-arrow-button-v6__inner::before {
content: attr(data-text);
grid-area: 1 / 1;
scale: 0 1;
pointer-events: none;
transition: scale var(--text-duration) var(--smooth-ease);
transform-origin: right center;
}
.nb-arrow-button-v6__text {
grid-area: 1 / 1;
display: block;
transition: scale var(--text-duration) var(--smooth-ease);
transform-origin: left center;
}
.nb-arrow-button-v6__icon {
height: var(--dimensions);
pointer-events: none;
grid-area: 1 / 1;
place-self: center flex-end;
display: flex;
transform: translate(calc(100% + .375em));
transition: translate var(--arrow-translate-duration) var(--elastic-ease-out), opacity calc(var(--arrow-translate-duration) * 0.2) ease-out;
translate: var(--translate-from) 0 0;
opacity: 0;
animation: sneaky-bolt-right var(--arrow-animation-duration) var(--animation-ease) none infinite;
animation-play-state: running;
}
.nb-arrow-button-v6__icon-start {
flex: none;
margin-right: -0.03125em;
}
.nb-arrow-button-v6__icon-svg {
height: var(--dimensions);
min-height: unset !important;
min-width: unset !important;
}
.nb-arrow-button-v6__icon-mid {
transform-origin: 0%;
background-color: currentColor;
flex: none;
width: 10%;
transition: transform calc(var(--arrow-translate-duration) * 0.4) var(--smooth-ease);
transform: scaleX(33);
}
.nb-arrow-button-v6__icon-end {
flex: none;
margin-left: -0.03125em;
transition: transform calc(var(--arrow-translate-duration) * 0.4) var(--smooth-ease);
transform: translateX(2em);
}
.nb-arrow-button-v6:is(:hover, :focus-visible) .nb-arrow-button-v6__icon {
translate: 0 0 0;
transition: translate var(--arrow-translate-duration) var(--elastic-ease-out), opacity calc(var(--arrow-translate-duration) * 0.3) ease-in;
opacity: 1;
}
.nb-arrow-button-v6:is(:hover, :focus-visible) .nb-arrow-button-v6__icon-mid {
transform: scaleX(1);
}
.nb-arrow-button-v6:is(:hover, :focus-visible) .nb-arrow-button-v6__icon-end {
transform: translateX(0);
}
.nb-arrow-button-v6__icon {
animation: none;
}
.nb-arrow-button-v6:is(:hover, :focus-visible) .nb-arrow-button-v6__icon {
animation: sneaky-bolt-right var(--arrow-animation-duration) var(--animation-ease) none infinite;
animation-delay: .25s;
}
.nb-arrow-button-v6:is(:hover, :focus-visible) .nb-arrow-button-v6__text {
scale: 0 1;
transition-delay: .07s;
}
.nb-arrow-button-v6:is(:hover, :focus-visible) .nb-arrow-button-v6__inner::before {
scale: 1 1;
transition-delay: .07s;
}
@keyframes sneaky-bolt-right {
0% {
transform: translateX(calc(100% + .375em));
}
50% {
transform: translateX(calc(100% + .375em + 0.25em));
}
100% {
transform: translateX(calc(100% + .375em));
}
}