.btn-dot{--btn-dot-hover-duration: .65s;--btn-dot-hover-ease: cubic-bezier(.16, 1, .3, 1);--btn-dot-bg: var(--bg-dark);--btn-dot-color: var(--c-text-white);position:relative;display:inline-flex;justify-content:center;align-items:center;text-align:center;gap:.5rem;border-radius:62.5rem;min-block-size:2.625rem;background-color:var(--btn-dot-bg);padding:1rem;color:var(--btn-dot-color);overflow:hidden}.btn-dot:after{content:"";flex:0 0 .5rem;inline-size:.5rem;block-size:.5rem;border-radius:50%;border:.0625rem solid currentColor;transition:transform .3s;color:var(--btn-dot-color)}.btn-dot__text-wrap{display:block;overflow:hidden}.btn-dot__text{display:block;position:relative;transition:all var(--btn-dot-hover-duration) var(--btn-dot-hover-ease)}.btn-dot__text:after{content:attr(data-text);position:absolute;inset-inline-start:0;color:var(--btn-dot-color);inset-block-start:100%;opacity:0;transition:all var(--btn-dot-hover-duration) var(--btn-dot-hover-ease)}@media(any-hover:hover){.btn-dot:hover:after,.btn-dot:focus-visible:after{transform:scale(.8);background-color:var(--btn-dot-color)}.btn-dot:hover .btn-dot__text,.btn-dot:focus-visible .btn-dot__text{transform:translateY(-100%)}.btn-dot:hover .btn-dot__text:after,.btn-dot:focus-visible .btn-dot__text:after{opacity:1}}.color-inverse .btn-dot{--btn-dot-bg: var(--bg-light);--btn-dot-color: var(--c-text-dark)}