.button-styles.svelte-lyde5p{--border-color: linear-gradient(-45deg, #ffae00, #7e03aa, #00fffb);--border-width: .125em;--curve-size: .5em;--blur: 30px;--bg: #080312;--color: #afffff;color:var(--color);position:relative;isolation:isolate;display:inline-grid;place-content:center;padding:.5em 1.5em;font-size:17px;border:0;text-transform:uppercase;box-shadow:10px 10px 20px #0009;cursor:pointer;text-decoration:none;clip-path:polygon(0% var(--curve-size),var(--curve-size) 0,100% 0,100% calc(100% - var(--curve-size)),calc(100% - var(--curve-size)) 100%,0 100%);transition:color .25s}.button-styles.svelte-lyde5p:after,.button-styles.svelte-lyde5p:before{content:"";position:absolute;inset:0}.button-styles.svelte-lyde5p:before{background:var(--border-color);background-size:300% 300%;animation:svelte-lyde5p-move-bg 5s ease infinite;z-index:-2}@keyframes svelte-lyde5p-move-bg{0%{background-position:31% 0%}50%{background-position:70% 100%}to{background-position:31% 0%}}.button-styles.svelte-lyde5p:after{background:var(--bg);z-index:-1;clip-path:polygon(var(--border-width) calc(var(--curve-size) + var(--border-width) * .5),calc(var(--curve-size) + var(--border-width) * .5) var(--border-width),calc(100% - var(--border-width)) var(--border-width),calc(100% - var(--border-width)) calc(100% - calc(var(--curve-size) + var(--border-width) * .5)),calc(100% - calc(var(--curve-size) + var(--border-width) * .5)) calc(100% - var(--border-width)),var(--border-width) calc(100% - var(--border-width)));transition:clip-path .5s}.button-styles.svelte-lyde5p:where(:where(.svelte-lyde5p):hover,:where(.svelte-lyde5p):focus):after{clip-path:polygon(calc(100% - var(--border-width)) calc(100% - calc(var(--curve-size) + var(--border-width) * .5)),calc(100% - var(--border-width)) var(--border-width),calc(100% - var(--border-width)) var(--border-width),calc(100% - var(--border-width)) calc(100% - calc(var(--curve-size) + var(--border-width) * .5)),calc(100% - calc(var(--curve-size) + var(--border-width) * .5)) calc(100% - var(--border-width)),calc(100% - calc(var(--curve-size) + var(--border-width) * .5)) calc(100% - var(--border-width)));transition:.2s}.button-styles.svelte-lyde5p:where(:where(.svelte-lyde5p):hover,:where(.svelte-lyde5p):focus){color:#fff}
