@layer shared{.main-button{--font:var(--body-sm-semibold--single-line);--color:var(--text-dark);--bg-color:var(--background-primary);--bg-color-hover:var(--background-primary-hover);--bg-color-click:var(--background-primary-active);--bg-color-disabled:var(--background-disabled);--color-disabled:var(--text-disabled);--padding-block:15px;--padding-block-with-icon:var(--spacing-xs);--padding-inline:var(--spacing-xl);--gap:var(--spacing-3xs);--button-radius:var(--border-radius-sm);--icon-size:var(--spacing-lg);--icon-fill:var(--background-icon-dark);--spinner-size:var(--icon-size);display:flex;gap:var(--gap);position:relative;width:-moz-fit-content;width:fit-content;padding:var(--padding-block) var(--padding-inline);font:var(--font);text-decoration:none;color:var(--color);background-color:var(--bg-color);border-radius:var(--button-radius);transition:background-color var(--main-transition)}@layer mixins{.main-button{display:flex;justify-content:center;align-items:center}}.main-button:not(:disabled){cursor:pointer}@media(hover){.main-button:not(:disabled):hover{background-color:var(--bg-color-hover)}.main-button:not(:disabled):active{background-color:var(--bg-color-click)}}.main-button:disabled{color:var(--color-disabled);background-color:var(--bg-color-disabled)}.main-button>*{transition:opacity .3s}.main-button.is-full-width{width:100%}.main-button.is-secondary{--color:var(--text-light);--bg-color:var(--background-secondary);--bg-color-hover:var(--background-secondary-hover);--bg-color-click:var(--background-secondary-active);--icon-fill:var(--background-icon-primary)}.main-button.is-secondary:has(.main-button__label){--icon-fill:var(--background-icon-tertiary)}.main-button.is-destructive{--color:var(--text-light);--bg-color:var(--background-destructive);--bg-color-hover:var(--background-destructive-hover);--bg-color-click:var(--background-destructive-active);--icon-fill:var(--background-icon-primary)}.main-button.size-xxs{--font:var(--body-xs-bold--single-line);--padding-block:var(--spacing-4xs);--padding-block-with-icon:var(--spacing-5xs);--padding-inline:var(--spacing-3xs);--icon-size:var(--spacing-sm)}.main-button.size-xs{--padding-block:9px;--padding-block-with-icon:var(--spacing-3xs);--padding-inline:var(--spacing-xs);--icon-size:var(--spacing-sm)}.main-button.size-s{--padding-block:11px;--padding-block-with-icon:9px;--padding-inline:var(--spacing-md);--icon-size:var(--spacing-md)}.main-button.size-l{--font:var(--body-lg-semibold--single-line);--button-radius:var(--border-radius-lg);--padding-block:19px;--padding-block-with-icon:var(--spacing-sm);--padding-inline:var(--spacing-2xl);--icon-size:var(--spacing-xl)}.main-button:has(.main-button__icon){--padding-block:var(--padding-block-with-icon)}.main-button:has(.main-button__icon):not(:has(.main-button__label)){--padding-inline:var(--padding-block)}.main-button.is-loading{pointer-events:none}:is(.is-loading,.is-loaded) .main-button__label{opacity:0}.is-icon-right .main-button__icon{order:1}:is(.is-loading,.is-loaded) .main-button__icon{opacity:0}.main-button__spinner{--size:var(--spinner-size);--color:var(--icon-fill);position:absolute;opacity:0;margin:0}.is-loading:not(.is-loaded) .main-button__spinner{opacity:1}.main-button__checkmark{opacity:0}@layer mixins{.main-button__checkmark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}}.is-loaded .main-button__checkmark{opacity:1}}