@property --gradient-color-light{syntax:"<color>";inherits:false;initial-value:#969eff}@property --gradient-color-dark{syntax:"<color>";inherits:false;initial-value:#171717}.button-gradient{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);color:#fff;border-radius:12px;padding:.5rem 1rem;position:relative}.button-gradient:before{content:"";z-index:-1;border-radius:inherit;background:linear-gradient(to bottom right,var(--gradient-color-dark)0%,var(--gradient-color-light)62%,var(--gradient-color-dark)100%);-webkit-mask-composite:xor;padding:1px;transition:--gradient-color-light .2s ease-in-out,--gradient-color-dark .2s ease-in-out;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 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}.button-gradient:hover:before{--gradient-color-light:#171717;--gradient-color-dark:#969eff}