.button{all:unset;appearance:none;box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;text-decoration:none;min-width:fit-content;width:fit-content;padding:.25em 1.25em;font:inherit;font-size:.9375em;font-weight:700;letter-spacing:0;line-height:1;color:var(--fg-color);background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--ui-border-radius);gap:0rem;transition:background-color .25s,border-color .25s,box-shadow .125s}.button .icon{transition:transform .2s;transform:translate(-.05rem)}.button:hover{cursor:pointer;color:var(--fg-color-hover);background-color:var(--bg-color-hover);border-color:var(--border-color-hover)}.button:hover .icon{transform:translate(.2rem)}@keyframes icon-hover{0%{opacity:1;transform:translate(0)}50%{opacity:0;transform:translate(.25rem)}51%{opacity:0}to{opacity:1;transform:translate(0)}}.button:focus{outline:none;border-radius:var(--ui-border-radius)}.button:focus-visible{outline:none;box-shadow:0 0 0 .25rem var(--focus-color)}.button:active{transition:none;color:var(--fg-color);background-color:var(--bg-color);border-color:var(--border-color)}.button-text{display:inline-block;margin:0 .5em}.button .icon{color:inherit;flex-shrink:0;fill:none;stroke:var(--fg-color)}.button.success{--color-light: #6ee7b7;--color-base: #10b981;--color-dark: #059669;--bg-color-subtle: color-mix(in srgb, transparent, var(--color-light) 20%);--ui-focus-color: var(--color-base);--ui-fg-color: #ffffff;--ui-bg-color: var(--color-base);--ui-border-color: var(--color-base);--ui-fg-color-hover: #ffffff;--ui-bg-color-hover: var(--color-dark);--ui-border-color-hover: var(--color-base)}.button.warning{--color-light: #fbbf24;--color-base: #fbbf24;--color-dark: #b45309;--bg-color-subtle: color-mix(in srgb, transparent, var(--color-light) 30%);--ui-focus-color: rgba(251, 191, 36, .5);--ui-fg-color: #0f3173;--ui-bg-color: var(--color-base);--ui-bg-color-hover: var(--color-light);--ui-fg-color-hover: #0f3173;--ui-border-color: var(--color-base);--ui-border-color-hover: var(--color-dark)}.button.danger{--color-light: #fda4af;--color-base: #f43f5e;--color-dark: #be123c;--bg-color-subtle: color-mix(in srgb, transparent, var(--color-light) 20%);--ui-focus-color: rgba(244, 63, 94, .5);--ui-fg-color: #ffffff;--ui-bg-color: var(--color-base);--ui-border-color: var(--color-base);--ui-fg-color-hover: #ffffff;--ui-bg-color-hover: var(--color-dark);--ui-border-color-hover: var(--color-base)}.button.info{--color-light: #c7efff;--color-base: #90deff;--color-dark: #225dc3;--bg-color-subtle: color-mix(in srgb, transparent, var(--color-base) 20%);--ui-focus-color: rgba(144, 222, 255, .5);--ui-fg-color: #0f3173;--ui-bg-color: var(--color-base);--ui-border-color: var(--color-base);--ui-fg-color-hover: var(--color-dark);--ui-bg-color-hover: var(--color-light);--ui-border-color-hover: var(--color-dark)}.button.grey{--color-light: #e7eef3;--color-base: #e2e9f0;--color-dark: #5c6d7e;--bg-color-subtle: color-mix(in srgb, transparent, var(--color-base) 20%);--ui-focus-color: rgba(226, 233, 240, .5);--ui-fg-color: var(--color-dark);--ui-bg-color: var(--color-base);--ui-border-color: var(--color-dark);--ui-bg-color-hover: var(--color-light);--ui-fg-color-hover: var(--color-dark);--ui-border-color-hover: var(--color-dark)}.button.default{--color-light: #7d8e9f;--color-base: #0f3173;--color-dark: #0e3b8d;--bg-color-subtle: color-mix(in srgb, transparent, var(--color-light) 10%);--ui-focus-color: inherit;--ui-fg-color: inherit;--ui-bg-color: inherit;--ui-border-color: inherit;--ui-bg-color-hover: inherit;--ui-fg-color-hover: inherit;--ui-border-color-hover: inherit}[data-theme=dark] .button.default,[data-theme=photo] .button.default{--color-light: #ffffff;--color-base: #ffffff;--color-dark: #ffffff;--ui-bg-color-hover: color-mix(in srgb, rgb(255, 255, 255), transparent 20%)}.button.solid{--focus-color: var(--ui-focus-color);--fg-color: var(--ui-fg-color);--bg-color: var(--ui-bg-color);--border-color: transparent;--fg-color-hover: var(--ui-fg-color-hover);--bg-color-hover: var(--ui-bg-color-hover);--border-color-hover: transparent}.button.outline{--focus-color: var(--ui-focus-color);--fg-color: var(--color-dark);--fg-color-hover: var(--color-dark);--bg-color: transparent;--bg-color-hover: color-mix(in srgb, var(--ui-bg-color), transparent 95%);--border-color: color-mix(in srgb, var(--ui-border-color), transparent 20%);--border-color-hover: var(--ui-border-color)}.button.subtle{--focus-color: var(--ui-focus-color);--fg-color: var(--color-dark);--bg-color: var(--bg-color-subtle);--border-color: color-mix(in srgb, transparent, var(--color-light) 5%);--fg-color-hover: var(--color-dark);--bg-color-hover: var(--bg-color-subtle);--border-color-hover: color-mix(in srgb, transparent, var(--color-light) 20%)}[data-theme=photo] .button.subtle,.button.glass{--fg-color: var(--ui-bg-color);--bg-color: rgb(255, 255, 255, .05);--bg-color-hover: rgb(255, 255, 255, .1);--focus-color: var(--ui-focus-color);--border-color: rgb(255, 255, 255, .1);--border-color-hover: rgb(255, 255, 255, .1);backdrop-filter:blur(1.25rem);-webkit-backdrop-filter:blur(1.25rem)}.button.ghost{--fg-color: var(--color-dark);--fg-color-hover: var(--color-dark);--bg-color: transparent;--bg-color-hover: transparent;--focus-color: var(--ui-focus-color);--border-color: transparent;--border-color-hover: color-mix(in srgb, var(--ui-border-color), transparent 75%)}[data-theme=dark] .button.outline,[data-theme=dark] .button.subtle,[data-theme=dark] .button.ghost,[data-theme=photo] .button.outline,[data-theme=photo] .button.subtle,[data-theme=photo] .button.ghost{--fg-color: var(--color-light);--fg-color-hover: var(--color-light)}.button.xs{font-size:.775em;min-height:1.75rem;padding:.1em 1em}.button.sm{font-size:.8125em;min-height:2.25rem;padding:.25em 1em .3em}.button.md{font-size:.9375em;min-height:2.75rem;padding:.25em 1.25em}.button.lg{font-size:1em;min-height:3rem;padding:.25em 1.25em}.button.xl{font-size:1.05em;min-height:3.5rem;padding:.25em 1.5em}.button.full-width{display:flex;width:100%;justify-content:center}.button-group{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.5rem;margin:.5rem 0}@media(max-width:639px){.button-group{flex-direction:column;align-items:stretch;width:100%;padding:0 4rem}.button-group>*{width:100%}}