.button.svelte-x4wtex{--main-color: red;--light-color: blue;--contrast-color: green;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;text-decoration:none;transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:center;gap:10px;border:none;border-radius:20px;font-weight:700}.button.svelte-x4wtex .icon:where(.svelte-x4wtex){width:24px;height:24px}.button.color--primary.svelte-x4wtex{--main-color: var(--color--primary-rgb);--light-color: var(--color--primary-tint-rgb);--contrast-color: var(--color--text)}.button.color--secondary.svelte-x4wtex{--main-color: var(--color--secondary-rgb);--light-color: var(--color--secondary-tint-rgb);--contrast-color: var(--color--secondary-contrast)}.button.color--tertiary.svelte-x4wtex{--main-color: var(--color--tertiary-rgb);--light-color: var(--color--tertiary-tint-rgb);--contrast-color: var(--color--tertiary-contrast)}.button.color--plain.svelte-x4wtex{--main-color: var(--color--page-background);--light-color: var(--color--text);--contrast-color: var(--color--text)}.button.size--small.svelte-x4wtex{padding:5px 10px;font-size:var(--small-font-size)}.button.size--small.svelte-x4wtex .icon:where(.svelte-x4wtex){width:20px;height:20px}.button.size--medium.svelte-x4wtex{padding:10px 20px;font-size:var(--p-font-size)}.button.size--large.svelte-x4wtex{padding:15px 30px;font-size:var(--p-font-size)}.button.size--large.svelte-x4wtex .icon:where(.svelte-x4wtex){width:28px;height:28px}.button.style--solid.svelte-x4wtex{background-color:rgb(var(--main-color));color:var(--contrast-color);border-style:solid;border-width:2px;background-image:none}.button.style--solid.svelte-x4wtex:hover{background-color:rgb(var(--main-color));color:var(--contrast-color)}.button.style--understated.svelte-x4wtex{background-color:rgb(var(--light-color));color:rgb(var(--main-color));background-image:none}.button.style--understated.svelte-x4wtex:hover{box-shadow:0 0 1px 7px rgba(var(--main-color),.3)}.button.style--clear.svelte-x4wtex{background-color:transparent;color:rgb(var(--main-color));padding-left:0;padding-right:0;background-image:none;font-weight:400}.button.style--clear.svelte-x4wtex:hover{background-color:rgb(var(--light-color));font-weight:800}