.button{font-size:clamp(.8rem,1.5cqw,1em);--brdr: 1px solid transparent;--display: grid;height:6.4em;display:var(--display);grid-auto-flow:column;place-items:center;place-content:center;gap:1.2em;cursor:pointer;padding:0 3.6em;border:var(--brdr, 1px solid transparent);border-radius:10em;background:var(--bg);color:var(--clr);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.button .icon{--width: 2em;--height: 2em}.button .emoji{font-size:2em}.button label{--fs: 1.8em;--fw: 700;font-size:max(1.3rem,var(--fs));text-align:center;white-space:nowrap}.button.btn-black{--bg: light-dark(var(--clr-metal-950), var(--clr-white));--bg-hvr: var(--clr-metal-800);--bg-dis: var(--clr-metal-800);--clr: light-dark(var(--clr-white), var(--clr-metal-950));--clr-hvr: var(--clr-white);--clr-dis: var(--clr-metal-500);--brdr: none}.button.btn-white{--bg: var(--clr-white);--clr: var(--clr-metal-950);--clr-hvr: var(--clr-metal-950);--bg-hvr: var(--clr-white);--brdr: none}.button.btn-destructive{--bg: var(--clr-white);--bg-hvr: var(--clr-destructive-200);--bg-dis: var(--clr-destructive-200);--clr: var(--clr-destructive-400);--clr-hvr: var(--clr-destructive-400);--clr-dis: var(--clr-destructive-500);--brdr: 1px solid var(--clr-destructive-500)}.button.btn-destructive-solid{--bg: var(--clr-destructive-400);--bg-hvr: var(--clr-destructive-500);--bg-dis: var(--clr-destructive-500);--clr: var(--clr-white);--clr-hvr: var(--clr-white);--clr-dis: var(--clr-destructive-300)}.button.btn-gray{--bg: var(--clr-metal-200);--bg-hvr: var(--clr-metal-300);--bg-dis: var(--clr-metal-100);--clr: var(--clr-metal-950);--clr-hvr: var(--clr-metal-950);--clr-dis: var(--clr-metal-400)}.button.btn-green{--bg: var(--clr-green-500);--bg-hvr: var(--clr-green-900);--bg-dis: #0001;--clr: var(--clr-metal-950);--clr-hvr: var(--clr-white);--clr-dis: var(--clr-metal-300)}.button.btn-outline{--bg: light-dark(var(--clr-white), var(--clr-metal-950));--bg-hvr: var(--clr-metal-50);--bg-actv: light-dark(var(--clr-green-400), var(--clr-white));--bg-dis: var(--clr-metal-50);--clr: light-dark(var(--clr-metal-950), var(--clr-white));--clr-hvr: var(--clr-metal-950);--clr-actv: var(--clr-metal-950);--clr-actv-icon: var(--clr-green-700);--clr-dis: var(--clr-metal-300);--brdr: 1px solid light-dark(var(--clr-metal-100), var(--clr-white));--brdr-actv: 1px solid var(--clr-green-400)}.button.btn-text{--bg: transparent;--bg-hvr: transparent;--clr: var(--clr-green-700);--clr-hvr: var(--clr-green-700);padding:0!important;height:auto!important;gap:.8em!important;border-radius:0!important}.button:hover{background:var(--bg-hvr, --bg);color:var(--clr-hvr, var(--clr))}.button:disabled,.button.disabled{pointer-events:none;background:var(--bg-dis, var(--bg-hvr));color:var(--clr-dis, var(--clr-hvr))}.button:active,.button.active{background:var(--bg-actv, var(--bg-hvr));color:var(--clr-actv, var(--clr-hvr));border:var(--brdr-actv, var(--brdr, none));transition:none}.button:active .icon,.button.active .icon{transition:none;color:var(--clr-actv-icon, var(--clr-actv))}.button.active *:last-child:is(.icon){transition:transform .3s ease;transform:rotateX(180deg)}.button.md{height:5.6em;gap:1.2em;padding:0 3em}.button.md .icon{--width: 1.8em;--height: 1.8em}.button.md label{--fs: 1.6em}.button.sm{height:5em;gap:.8em;padding:0 2.2em}.button.sm .icon{--width: 1.6em;--height: 1.6em}.button.sm label{--fs: 1.5em}.button.xs{height:3.1em;gap:.8em;padding:0 1.8em}.button.xs .icon{--width: 1.6em;--height: 1.6em}.button.xs label{--fs: .9em;--fw: 700}.button.mainnav{display:inline-block;height:49px;min-height:49px;width:137px;gap:.8em;padding:13px 22px;--fs: 14px;line-height:21px;letter-spacing:-.02em}@media screen and (max-width: 810px){.button.mainnav{width:130px;padding:13px 22px}}@media screen and (max-width: 600px){.button.mainnav{height:48px;width:130px}}.button.mainnav .icon{--width: 1.6em;--height: 1.6em}.button.mainnav label{--fs: 14px;line-height:21px}@media screen and (max-width: 810px){.button.mainnav label{--fs: 13px;line-height:20px}}