@property --angle-1{syntax:"<angle>";inherits:false;initial-value:-75deg}.glass-button-wrap{--anim-time:.4s;--anim-ease:cubic-bezier(.25, 1, .5, 1);--border-width:clamp(1px, .0625em, 4px);z-index:2;transition:transform var(--anim-time) var(--anim-ease);position:relative}.glass-button-wrap:has(.glass-button:active){transform:rotateX(25deg)}.glass-button-shadow{--shadow-cutoff-fix:2em;width:calc(100% + var(--shadow-cutoff-fix));height:calc(100% + var(--shadow-cutoff-fix));top:calc(0% - var(--shadow-cutoff-fix) / 2);left:calc(0% - var(--shadow-cutoff-fix) / 2);filter:blur(clamp(2px,.125em,12px));transition:filter var(--anim-time) var(--anim-ease);pointer-events:none;position:absolute}.glass-button-shadow:after{content:"";box-sizing:border-box;background:linear-gradient(180deg, oklch(from var(--color-text) l c h / 20%), oklch(from var(--color-text) l c h / 10%));width:calc(100% - var(--shadow-cutoff-fix) - .25em);height:calc(100% - var(--shadow-cutoff-fix) - .25em);bottom:0;right:0;top:calc(var(--shadow-cutoff-fix) - .5em);left:calc(var(--shadow-cutoff-fix) - .875em);opacity:1;transition:all var(--anim-time) var(--anim-ease);border-radius:9999px;padding:.125em;position:absolute;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor,source-over;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}.glass-button-wrap:has(.glass-button:hover) .glass-button-shadow{filter:blur(clamp(2px,.0625em,6px))}.glass-button-wrap:has(.glass-button:hover) .glass-button-shadow:after{top:calc(var(--shadow-cutoff-fix) - .875em);opacity:1}.glass-button-wrap:has(.glass-button:active) .glass-button-shadow{filter:blur(clamp(2px,.125em,12px))}.glass-button-wrap:has(.glass-button:active) .glass-button-shadow:after{top:calc(var(--shadow-cutoff-fix) - .5em);opacity:.75}.glass-button{width:100%;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-backdrop-filter:blur(clamp(1px,.125em,4px));backdrop-filter:blur(clamp(1px,.125em,4px));transition:all var(--anim-time) var(--anim-ease);background:linear-gradient(-75deg, oklch(from var(--color-surface) l c h / 5%), oklch(from var(--color-surface) l c h / 20%), oklch(from var(--color-surface) l c h / 5%));box-shadow:inset 0 .125em .125em oklch(from var(--color-text) l c h / 5%), inset 0 -.125em .125em oklch(from var(--color-surface) l c h / 50%), 0 .25em .125em -.125em oklch(from var(--color-text) l c h / 20%), 0 0 .1em .25em inset oklch(from var(--color-surface) l c h / 20%), 0 0 oklch(from var(--color-surface) l c h);border:none;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex;position:relative}.glass-button:hover{-webkit-backdrop-filter:blur(.01em);backdrop-filter:blur(.01em);box-shadow:inset 0 .125em .125em oklch(from var(--color-text) l c h / 5%), inset 0 -.125em .125em oklch(from var(--color-surface) l c h / 50%), 0 .15em .05em -.1em oklch(from var(--color-text) l c h / 25%), 0 0 .05em .1em inset oklch(from var(--color-surface) l c h / 50%), 0 0 oklch(from var(--color-surface) l c h);transform:scale(.975)}.glass-button-wrap:has(.glass-button:active) .glass-button{box-shadow:inset 0 .125em .125em oklch(from var(--color-text) l c h / 5%), inset 0 -.125em .125em oklch(from var(--color-surface) l c h / 50%), 0 .125em .125em -.125em oklch(from var(--color-text) l c h / 20%), 0 0 .1em .25em inset oklch(from var(--color-surface) l c h / 20%), 0 .225em .05em oklch(from var(--color-text) l c h / 5%), 0 .25em oklch(from var(--color-surface) l c h / 75%), inset 0 .25em .05em oklch(from var(--color-text) l c h / 15%)}.glass-button:after{content:"";z-index:1;width:calc(100% + var(--border-width));height:calc(100% + var(--border-width));bottom:0;right: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%, oklch(from var(--color-text) l c h / 50%) 0%, transparent 5% 40%, oklch(from var(--color-text) l c h / 50%) 50%, transparent 60% 95%, oklch(from var(--color-text) l c h / 50%) 100%), linear-gradient(180deg, oklch(from var(--color-surface) l c h / 50%), oklch(from var(--color-surface) l c h / 50%));box-shadow:inset 0 0 0 calc(var(--border-width) / 2) oklch(from var(--color-surface) l c h / 50%);transition:all var(--anim-time) var(--anim-ease), --angle-1 .5s ease;border-radius:9999px;position:absolute;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor,source-over;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}.glass-button:hover:after{--angle-1:-125deg}.glass-button:active:after{--angle-1:-75deg}.glass-button-text{color:oklch(from var(--color-text) l c h / 90%);text-shadow:0em .25em .05em oklch(from var(--color-text) l c h / 10%);transition:all var(--anim-time) var(--anim-ease);position:relative}.glass-button:hover .glass-button-text{text-shadow:.025em .025em .025em oklch(from var(--color-text) l c h / 12%)}.glass-button-wrap:has(.glass-button:active) .glass-button-text{text-shadow:.025em .25em .05em oklch(from var(--color-text) l c h / 12%)}.glass-button:disabled{opacity:.6;cursor:not-allowed}@media (hover:none) and (pointer:coarse){.glass-button:after,.glass-button:hover:after,.glass-button:active:after{--angle-1:-75deg}}