@property --rotate{syntax:"<angle>";inherits:false;initial-value:0deg}.button{outline:1px solid hsla(0,0%,100%,.1);outline-offset:-1px;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;color:#fff;position:relative;overflow:hidden;padding:1px;z-index:0}.button:hover:before{opacity:1}.button:before{background:radial-gradient(84.92% 150% at 50% 138.75%,hsla(0,0%,100%,.16) 0,hsla(0,0%,100%,0) 100%),hsla(0,0%,100%,.01);opacity:0;transition:opacity .2s ease-in-out}.button:after,.button:before{content:"";position:absolute;inset:0}.button:after{background:conic-gradient(from var(--rotate),transparent 0,#fff 10%,transparent 20%);animation:rotate 6s linear infinite;z-index:-1}@keyframes rotate{to{--rotate:360deg}}.button__content{background:#060812;border-radius:inherit;height:100%}.button__content,.button__text{display:inline-flex;justify-content:center;align-items:center}.button__text{gap:.5rem;color:transparent;background-clip:text;background-image:linear-gradient(180deg,hsla(0,0%,100%,.3),#fff)}.button--md{height:48px}.button--md .button__content{padding:0 1.5rem}.button--md .button__text{font-size:1rem;line-height:140%}.button--sm{height:32px}.button--sm .button__content{padding:0 1rem}.button--sm .button__text{font-size:.875rem;line-height:140%}