.hover-underline-effect{--base-color:#101010;--off-color:#fff;display:inline-block;position:relative}.hover-underline-effect:after{content:"";position:absolute;width:100%;transform:scaleX(0);height:2px;bottom:0;left:0;background-color:var(--base-color);transform-origin:bottom right;transition:transform .25s ease-out}.hover-underline-effect.is-root:after{background-color:var(--off-color)}.hover-underline-effect.is-active:after,.hover-underline-effect:hover:after{transform:scaleX(1);transform-origin:bottom left}.hover-underline-effect.is-active:after{height:3px;border-radius:100px;background-color:var(--base-color)}.hover-underline-effect.is-root.is-active:after{background-color:var(--off-color)}