@property --deg{syntax:"<angle>";inherits:false;initial-value:0deg}.button--rgb{background-color:var(--happ-white);border-radius:var(--radiusfull);max-height:80px;padding:1rem;position:relative}.button--rgb:after{content:"";z-index:-1;border-radius:inherit;background-image:conic-gradient(from var(--deg)at center,#4fff03,#dba8ff,#ffa8ce,#a8c2ff,#4fff03);filter:blur(.2rem);transform-origin:50%;width:100%;height:100%;position:absolute;top:0;left:0;scale:103% 105%}.button--rgb:before{z-index:-2}.button--rgb:has(input){justify-content:space-between;align-items:center;width:fit-content;padding:0 1rem;display:flex}.button--rgb:hover{cursor:pointer}.button--rgb>input{background-color:var(--happ-white);width:240px;transition:all .25s ease-in-out}.button--rgb>input:focus,.button--rgb>input:hover{outline:none}.button--rgb>input:focus{width:300px}.button--rgb:hover:after,.button--rgb:hover:before{animation:2s linear infinite autoRotate}.button--indicator{background-color:var(--happ-purple);border-radius:var(--radiusfull);justify-content:center;align-items:center;width:28px;height:28px;padding:.4rem;display:flex;position:absolute;transform:translate(1.6rem)translateY(-3rem)}@keyframes autoRotate{to{--deg:360deg}}