.nb-dot-button-v3 {
display: inline-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);
}
.nb-dot-button-v3__dot-wrap {
z-index: 1;
grid-area: 1 / 1;
justify-content: flex-end;
align-items: center;
display: grid;
}
.nb-dot-button-v3__dot {
height: var(--btn-color-blob-dot-size);
width: var(--btn-color-blob-dot-size);
border-radius: 50%;
grid-area: 1 / 1;
display: block;
position: relative;
left: var(--dot-left);
transition: scale var(--dot-duration) var(--elastic-ease-out), translate var(--dot-duration) var(--elastic-ease-out);
scale: 0;
translate: -1em 0 0;
}
.nb-dot-button-v3__inner {
grid-area: 1 / 1;
display: grid;
}
.nb-dot-button-v3__bg {
border-radius: var(--border-radius);
grid-area: 1 / 1;
transition: width var(--dot-duration) var(--elastic-ease-out), border-radius calc(var(--dot-duration) * 0.6) var(--smooth-ease), scale calc(var(--dot-duration) * 0.6) var(--smooth-ease);
width: 100%;
}
.nb-dot-button-v3__text {
z-index: 1;
grid-area: 1 / 1;
}
.nb-dot-button-v3:is(:hover, :focus-visible) .nb-dot-button-v3__bg {
width: calc(100% + var(--wrap-dot-dimensions));
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.nb-dot-button-v3:is(:hover, :focus-visible) .nb-dot-button-v3__dot:is(.nb-dot-button-v3__dot--is-first) {
transition-delay: calc(var(--index) * var(--dots-stagger));
scale: 1;
translate: 0 0 0;
}
.nb-dot-button-v3:is(:hover, :focus-visible) .nb-dot-button-v3__dot:is(.nb-dot-button-v3__dot--is-second, .nb-dot-button-v3__dot--is-third) {
transition-delay: calc(var(--index) * var(--dots-stagger));
scale: .95;
translate: 0 0 0;
}