.styled-button{border-radius:var(--border-radius);position:relative;display:flex;align-items:center;justify-content:center;font-weight:500;gap:12px;transition:all .2s,visibility 0s;cursor:pointer;user-select:none}.styled-button svg{color:red}.styled-button:hover{scale:1.1}.styled-button:hover .effect.effect-1{opacity:1;left:-10%}.styled-button:hover .effect.effect-3{background:linear-gradient(90deg,transparent,rgb(255,255,255),transparent)}.styled-button:active{scale:.9}.styled-button[data-size=md]{height:48px;padding:0 20px;--border-radius:18px}.styled-button[data-size=lg]{height:55px;padding:0 25px;--border-radius:20px}.styled-button[data-priority=primary]{background-color:#fff;color:#000;box-shadow:0 0 50px hsla(0,0%,100%,.2);outline:2px solid hsla(0,0%,100%,0);outline-offset:3px}.styled-button[data-priority=primary]:focus-visible,.styled-button[data-priority=primary]:hover{box-shadow:0 0 50px hsla(0,0%,100%,.4);outline:2px solid #fff;outline-offset:5px}.styled-button[data-priority=secondary]{overflow:hidden;color:#fff;backdrop-filter:blur(10px) saturate(1.2);box-shadow:0 0 50px hsla(0,0%,100%,0),inset 0 1px 0 hsla(0,0%,100%,.5),inset 0 -1px 0 hsla(0,0%,100%,.2),inset -1px 0 0 hsla(0,0%,100%,.15),inset 1px 0 0 hsla(0,0%,100%,.15)}.styled-button[data-priority=secondary]:focus-visible,.styled-button[data-priority=secondary]:hover{box-shadow:0 0 50px hsla(0,0%,100%,.1),inset 0 1px 0 hsla(0,0%,100%,.7),inset 0 -1px 0 hsla(0,0%,100%,.3),inset -1px 0 0 hsla(0,0%,100%,.15),inset 1px 0 0 hsla(0,0%,100%,.15)}.styled-button[data-priority=tertiary]{overflow:hidden;background-color:hsla(0,0%,100%,0);color:#fff;box-shadow:0 0 50px hsla(0,0%,100%,0),inset 0 1px 0 hsla(0,0%,100%,0),inset 0 -1px 0 hsla(0,0%,100%,0),inset -1px 0 0 hsla(0,0%,100%,0),inset 1px 0 0 hsla(0,0%,100%,0)}.styled-button[data-priority=tertiary]>.effect,.styled-button[data-priority=tertiary]>.effect.effect-1{opacity:0}.styled-button[data-priority=tertiary]:focus-visible,.styled-button[data-priority=tertiary]:hover{outline:none;box-shadow:0 0 50px hsla(0,0%,100%,.1),inset 0 1px 0 hsla(0,0%,100%,.25),inset 0 -1px 0 hsla(0,0%,100%,.1),inset -1px 0 0 hsla(0,0%,100%,.08),inset 1px 0 0 hsla(0,0%,100%,.08)}.styled-button[data-priority=tertiary]:focus-visible>.effect,.styled-button[data-priority=tertiary]:focus-visible>.effect.effect-3,.styled-button[data-priority=tertiary]:hover>.effect,.styled-button[data-priority=tertiary]:hover>.effect.effect-3{opacity:.7}.styled-button>.effect{position:absolute;pointer-events:none;transition:all .2s}.styled-button>.effect.effect-1{width:200%;height:100%;left:-80%;top:0;border-radius:calc(var(--border-radius) - 0px);background:radial-gradient(circle at 35% 20%,rgba(255,255,255,.2) 0,transparent 70%);mix-blend-mode:overlay;opacity:.5}.styled-button>.effect.effect-2{inset:0;border-radius:calc(var(--border-radius) - 0px);box-shadow:inset 0 0 2px 0 hsla(0,0%,100%,.15),inset 0 2px 2px 0 hsla(0,0%,100%,.05),inset 0 -2px 2px 0 hsla(0,0%,100%,.05);pointer-events:none}.styled-button>.effect.effect-3{top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent)}.styled-button>.effect.effect-4{inset:0;border-radius:var(--border-radius);padding:1px;background:linear-gradient(rgba(57,57,57,.05) 1%,rgba(151,151,151,.08));mask:linear-gradient(rgb(255,255,255),rgb(255,255,255) 0) content-box,linear-gradient(rgb(255,255,255),rgb(255,255,255) 0)}