:where(.button){font-family:var(--font-family-main);font-weight:500;font-size:var(--typograpy-p);letter-spacing:var(--typograpy-letter-spacing-0);text-transform:none;line-height:1.3}.button{cursor:pointer;box-sizing:border-box;-webkit-user-select:none;user-select:none;touch-action:manipulation;border:none;border-radius:6.25rem;outline:none;justify-content:center;align-items:center;gap:.5rem;min-height:3.5rem;padding:0 1.5rem;text-decoration:none;transition:transform .32s cubic-bezier(.34,1.56,.64,1),background-color .2s,color .2s,border-color .2s,box-shadow .2s,opacity .2s;display:flex;position:relative}.button:focus-visible{box-shadow:0 0 0 .125rem var(--color-white),0 0 0 .25rem var(--color-fill-1)}.button.--border:focus-visible,.button.--fill-gray:focus-visible,.button.--fill-white:focus-visible,.button.--white:focus-visible{box-shadow:0 0 0 .125rem var(--color-dark),0 0 0 .25rem var(--color-fill-gray)}.button.--border-1:focus-visible,.button.--fill-1-opacity:focus-visible{box-shadow:0 0 0 .125rem var(--color-white),0 0 0 .25rem var(--color-fill-1)}.button__label{text-align:center;justify-content:center;align-items:center;display:flex}.button__label.is-invisible{opacity:0}.button__spinner-wrap{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.button__spinner{width:2rem;height:2rem;color:inherit;font-size:2rem}.button:active:not(:disabled):not(.is-disabled):not(.is-loading){transition-duration:.1s,.1s,.1s,.1s,.2s,.2s;transition-timing-function:ease-out;transform:scale(.97)}.button.--icon:active:not(:disabled):not(.is-disabled):not(.is-loading){transform:scale(.9)}@media (prefers-reduced-motion:reduce){.button,.button:active:not(:disabled):not(.is-disabled):not(.is-loading){transition-property:background-color,color,border-color,box-shadow,opacity;transform:none}}.button.is-disabled,.button:disabled{opacity:.4;pointer-events:none}.button.--fill-1{color:var(--color-white);background-color:var(--color-fill-1)}.button.--fill-1:active:not(:disabled):not(.is-disabled):not(.is-loading){background-color:var(--color-fill-1-a)}.button.--fill-1.is-loading{background-color:var(--color-fill-1-h);color:var(--color-white)}.button.--fill-gray{color:var(--color-dark);background-color:var(--color-fill-gray)}.button.--fill-gray:active:not(:disabled):not(.is-disabled):not(.is-loading){background-color:var(--color-fill-gray-a)}.button.--fill-gray.is-loading{background-color:var(--color-fill-gray-h);color:var(--color-dark)}.button.--border{color:var(--color-dark);border:2px solid var(--color-border);background-color:#0000}.button.--border:active:not(:disabled):not(.is-disabled):not(.is-loading){border-color:var(--color-fill-1-a)}.button.--border.is-loading{border-color:var(--color-fill-gray-h);color:var(--color-dark)}.button.--border-1{color:var(--color-fill-1);border:2px solid var(--color-fill-1);background-color:#0000}.button.--border-1:active:not(:disabled):not(.is-disabled):not(.is-loading){border-color:var(--color-fill-1-a);color:var(--color-fill-1-a)}.button.--border-1.is-loading{border-color:var(--color-fill-1-h);color:var(--color-fill-1-h)}.button.--fill-1-opacity{color:var(--color-fill-1-a);background-color:var(--color-fill-1-opacity-16)}.button.--fill-1-opacity:active:not(:disabled):not(.is-disabled):not(.is-loading){background-color:var(--color-fill-1-a);color:var(--color-white)}.button.--fill-1-opacity.is-loading{background-color:var(--color-fill-1-h);color:var(--color-white)}.button.--fill-white{color:var(--color-fill-1);background-color:var(--color-white)}.button.--fill-white.is-loading,.button.--fill-white:active:not(:disabled):not(.is-disabled):not(.is-loading){background-color:var(--color-fill-gray-a)}.button.--fill-white.is-loading{color:var(--color-fill-1)}.button.--white{color:var(--color-dark);background-color:var(--color-white)}.button.--white:active:not(:disabled):not(.is-disabled):not(.is-loading){background-color:var(--color-fill-gray-h)}.button.--glass{color:var(--color-white);background-color:var(--color-white-opacity-16);border:1px solid var(--color-white-opacity-17)}.button.--glass-light{color:var(--color-dark);background-color:var(--color-white-opacity-30);border:1px solid var(--color-dark-opacity-12)}.button.--plain{color:inherit;background-color:#0000}.button.--glass:active:not(:disabled):not(.is-disabled):not(.is-loading),.button.--plain:active:not(:disabled):not(.is-disabled):not(.is-loading){background-color:var(--color-white-opacity-24)}.button.--glass-light:active:not(:disabled):not(.is-disabled):not(.is-loading){background-color:var(--color-white-opacity-52)}.button.--row{min-height:3.5rem;color:var(--color-dark);background-color:var(--color-white-opacity-80);border:1px solid var(--color-dark-opacity-12);border-radius:var(--shape-16);letter-spacing:-.02em;justify-content:flex-start;padding:0 1rem}.button.--row .button__label{text-align:left;flex:auto;justify-content:space-between;gap:1rem}.button.--row:active:not(:disabled):not(.is-disabled):not(.is-loading){background-color:var(--color-white);transform:scale(.98)}.button.--icon{flex-shrink:0;width:3rem;height:3rem;min-height:0;padding:0}.button.is-loading{pointer-events:none}@media screen and (width>=1025px){.button.--fill-1:hover:not(:disabled):not(.is-disabled):not(.is-loading){background-color:var(--color-fill-1-h)}.button.--fill-gray:hover:not(:disabled):not(.is-disabled):not(.is-loading){background-color:var(--color-fill-gray-h)}.button.--border:hover:not(:disabled):not(.is-disabled):not(.is-loading){border-color:var(--color-fill-1)}.button.--border-1:hover:not(:disabled):not(.is-disabled):not(.is-loading){border-color:var(--color-fill-1-h);color:var(--color-fill-1-h)}.button.--fill-1-opacity:hover:not(:disabled):not(.is-disabled):not(.is-loading){background-color:var(--color-fill-1-h);color:var(--color-white)}.button.--fill-white:hover:not(:disabled):not(.is-disabled):not(.is-loading),.button.--white:hover:not(:disabled):not(.is-disabled):not(.is-loading){background-color:var(--color-fill-gray-h)}.button.--glass:hover:not(:disabled):not(.is-disabled):not(.is-loading),.button.--plain:hover:not(:disabled):not(.is-disabled):not(.is-loading){background-color:var(--color-white-opacity-24)}.button.--glass-light:hover:not(:disabled):not(.is-disabled):not(.is-loading){background-color:var(--color-white-opacity-52)}.button.--row:hover:not(:disabled):not(.is-disabled):not(.is-loading){background-color:var(--color-white)}}
