@property --angle-1{syntax:"<angle>";inherits:false;initial-value:-75deg}@property --angle-2{syntax:"<angle>";inherits:false;initial-value:-45deg}:root{--global--size:1.6em;--anim--hover-time:.4s;--anim--hover-ease:cubic-bezier(.25, 1, .5, 1)}.glass-button-wrap{z-index:2;pointer-events:none;transition:all var(--anim--hover-time) var(--anim--hover-ease);background:0 0;border-radius:999vw;position:relative}.glass-button-wrap button{--border-width:clamp(1px, .0625em, 4px);all:unset;cursor:pointer;-webkit-tap-highlight-color:#0000;pointer-events:auto;z-index:3;-webkit-backdrop-filter:blur(clamp(8px,.5em,16px));-moz-backdrop-filter:blur(clamp(8px, .5em, 16px));-ms-backdrop-filter:blur(clamp(8px, .5em, 16px));transition:all var(--anim--hover-time) var(--anim--hover-ease);background:linear-gradient(-75deg,#ffffff26,#ffffff59,#ffffff26);border-radius:999vw;position:relative;box-shadow:inset 0 .125em .125em #00000014,inset 0 -.125em .125em #fff9,0 .35em .2em -.15em #0000004d,0 .1em .05em -.05em #00000026,inset 0 0 .1em .25em #ffffff40,0 0 #fff}.glass-button-wrap button:before{content:"";z-index:1;pointer-events:none;opacity:.8;transition:opacity var(--anim--hover-time) var(--anim--hover-ease);background:linear-gradient(135deg,#ffffff1a 0%,#ffffff0d 50%,#ffffff1a 100%);border-radius:999vw;position:absolute;inset:0}.glass-button-wrap button:hover:before{opacity:1}.glass-button-wrap button:hover{-webkit-backdrop-filter:blur(clamp(4px,.25em,8px));-moz-backdrop-filter:blur(clamp(4px, .25em, 8px));-ms-backdrop-filter:blur(clamp(4px, .25em, 8px));transform:scale(.975);box-shadow:inset 0 .125em .125em #00000014,inset 0 -.125em .125em #fff9,0 .25em .1em -.125em #00000059,0 .075em .025em -.05em #0003,inset 0 0 .05em .1em #fff9,0 0 #fff}.glass-button-wrap button span{-webkit-user-select:none;user-select:none;letter-spacing:-.05em;color:rgba(107, 114, 128, var(--tw-text-opacity,1));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-shadow:0 .25em .05em #0000001a;transition:all var(--anim--hover-time) var(--anim--hover-ease);padding-block:8px;padding-inline:18px;font-size:1em;font-weight:700;display:block;position:relative}.glass-button-wrap button:hover span{text-shadow:.025em .025em .025em #0000001f}.glass-button-wrap button span:after{content:"";width:calc(100% - var(--border-width));height:calc(100% - var(--border-width));top:calc(0% + var(--border-width) / 2);left:calc(0% + var(--border-width) / 2);box-sizing:border-box;background:linear-gradient(var(--angle-2), #fff0 0%, #ffffffb3 40% 50%, #fff0 55%);z-index:3;mix-blend-mode:screen;pointer-events:none;transition:background-position calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease), --angle-2 calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease);background-position:0%;background-repeat:no-repeat;background-size:200% 200%;border-radius:999vw;display:block;position:absolute;overflow:clip}.glass-button-wrap button:hover span:after{background-position:25%}.glass-button-wrap button:active span:after{--angle-2:-15deg;background-position:50% 15%}.glass-button-wrap button:after{content:"";z-index:1;width:calc(100% + var(--border-width));height:calc(100% + var(--border-width));inset:0;top:calc(0% - var(--border-width) / 2);left:calc(0% - var(--border-width) / 2);padding:var(--border-width);box-sizing:border-box;background:conic-gradient(from var(--angle-1) at 50% 50%, #0000004d, #0000 5% 40%, #0000004d 50%, #0000 60% 95%, #0000004d), linear-gradient(180deg, #ffffffb3, #ffffffb3);transition:all var(--anim--hover-time) var(--anim--hover-ease), --angle-1 .5s ease;box-shadow:inset 0 0 0 calc(var(--border-width) / 2) #fffc;border-radius:999vw;position:absolute;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.glass-button-wrap button:hover:after{--angle-1:-125deg}.glass-button-wrap button:active:after{--angle-1:-75deg}.glass-button-shadow{--shadow-cuttoff-fix:2em;width:calc(100% + var(--shadow-cuttoff-fix));height:calc(100% + var(--shadow-cuttoff-fix));top:calc(0% - var(--shadow-cuttoff-fix) / 2);left:calc(0% - var(--shadow-cuttoff-fix) / 2);-webkit-filter:blur(clamp(2px,.125em,12px));-moz-filter:blur(clamp(2px, .125em, 12px));-ms-filter:blur(clamp(2px, .125em, 12px));pointer-events:none;position:absolute;overflow:visible}.glass-button-shadow:after{content:"";z-index:0;width:calc(100% - var(--shadow-cuttoff-fix) - .25em);height:calc(100% - var(--shadow-cuttoff-fix) - .25em);inset:0;top:calc(var(--shadow-cuttoff-fix) - .5em);left:calc(var(--shadow-cuttoff-fix) - .875em);box-sizing:border-box;transition:all var(--anim--hover-time) var(--anim--hover-ease);opacity:1;background:linear-gradient(#00000059,#00000026);border-radius:999vw;padding:.125em;position:absolute;overflow:visible;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.glass-button-wrap:has(button:hover) .glass-button-shadow{-webkit-filter:blur(clamp(3px,.125em,8px));-moz-filter:blur(clamp(3px, .125em, 8px));-ms-filter:blur(clamp(3px, .125em, 8px));transition:filter var(--anim--hover-time) var(--anim--hover-ease)}.glass-button-wrap:has(button:hover) .glass-button-shadow:after{top:calc(var(--shadow-cuttoff-fix) - .875em);opacity:1}.glass-button-wrap:has(button:active){transform:rotateX(25deg)}.glass-button-wrap:has(button:active) button{box-shadow:inset 0 .125em .125em #0000001a,inset 0 -.125em .125em #fff9,0 .125em .125em -.125em #0000004d,inset 0 0 .1em .25em #ffffff40,0 .225em .05em #00000014,0 .25em #ffffffbf,inset 0 .25em .05em #0003}.glass-button-wrap:has(button:active) .glass-button-shadow{-webkit-filter:blur(clamp(4px,.25em,16px));-moz-filter:blur(clamp(4px, .25em, 16px));-ms-filter:blur(clamp(4px, .25em, 16px))}.glass-button-wrap:has(button:active) .glass-button-shadow:after{top:calc(var(--shadow-cuttoff-fix) - .5em);opacity:.75}.glass-button-wrap:has(button:active) span{text-shadow:.025em .25em .05em #0000001f}
