vui-button {
    --button-text-color: var(--color-text-button-primary);
    --button-disabled-text-color: var(--color-text-button-inactive);
    --button-radius: var(--border-radius-m);
    --button-blur: blur(0);
    font: var(--bold-xl-compact);
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: top;
    border-radius: var(--button-radius);
    cursor: pointer;
    -webkit-transition: background-color var(--transition-fastest) var(--cubic-ease-out);
    transition: background-color var(--transition-fastest) var(--cubic-ease-out);
    background-color: var(--button-bg-color);
    -webkit-backdrop-filter: var(--button-blur);
    backdrop-filter: var(--button-blur);
    color: var(--button-text-color)
}

@media (hover: hover) and (pointer: fine) {
    vui-button:not(:active, .button_disabled__2EO-U):hover {
        background-color: var(--button-hover-bg-color)
    }
}

vui-button:active {
    background-color: var(--button-bg-color)
}

vui-button.button_disabled__2EO-U {
    cursor: default;
    pointer-events: none;
    background-color: var(--button-disabled-bg-color);
    color: var(--button-disabled-text-color)
}

vui-button.button_disabled__2EO-U vui-spinner {
    --spinner-circle-color: var(--button-disabled-text-color)
}

vui-button.button_round__3L_QP {
    --button-radius: var(--border-radius-round)
}

vui-button.button_round__3L_QP .button_text-wrapper__3nklk {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center
}

vui-button.button_square__G0cbJ .button_text-wrapper__3nklk {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center
}

.button_primary__1ZDek {
    --button-bg-color: var(--color-button-primary-active);
    --button-hover-bg-color: var(--color-button-primary-highlight);
    --button-disabled-bg-color: var(--color-button-primary-inactive);
    --button-disabled-text-color: var(--color-text-inactive)
}

.button_red__37fKV {
    --button-bg-color: var(--color-button-negative-active);
    --button-hover-bg-color: var(--color-button-negative-highlight);
    --button-disabled-bg-color: var(--color-button-negative-inactive);
    --button-text-color: var(--color-text-button-secondary)
}

.button_green__2_PkB {
    --button-bg-color: var(--color-button-positive-active);
    --button-hover-bg-color: var(--color-button-positive-highlight);
    --button-disabled-bg-color: var(--color-button-positive-inactive);
    --button-text-color: var(--color-text-button-secondary)
}

.button_blue__2yfeF {
    --button-bg-color: var(--color-button-secondary-active);
    --button-hover-bg-color: var(--color-button-secondary-highlight);
    --button-disabled-bg-color: var(--color-button-secondary-inactive);
    --button-text-color: var(--color-text-button-secondary)
}

.button_secondary__1SyN1 {
    --button-bg-color: var(--color-button-neutral-active);
    --button-hover-bg-color: var(--color-button-neutral-highlight);
    --button-disabled-bg-color: var(--color-button-neutral-inactive);
    --button-text-color: var(--color-text-primary)
}

.button_stroke__35iKI {
    --button-bg-color: transparent;
    --button-hover-bg-color: transparent;
    --button-disabled-bg-color: transparent;
    --button-text-color: var(--color-text-primary);
    border: var(--border-width-s) solid var(--color-stroke-active);
    -webkit-transition: border-color var(--transition-fastest) var(--cubic-ease-out);
    transition: border-color var(--transition-fastest) var(--cubic-ease-out)
}

@media (hover: hover) and (pointer: fine) {
    .button_stroke__35iKI:not(:active, .button_disabled__2EO-U):hover {
        border: var(--border-width-s) solid var(--color-stroke-highlight)
    }
}

.button_stroke__35iKI.button_disabled__2EO-U {
    border: var(--border-width-s) solid var(--color-stroke-inactive)
}

.button_text__3oKFG {
    --button-bg-color: transparent;
    --button-hover-bg-color: transparent;
    --button-disabled-bg-color: transparent;
    --button-text-color: var(--color-text-primary);
    --button-radius: 0
}

.button_stretch__7ae86 {
    width: var(--width-full)
}

.button_btn__dCMn2 {
    position: relative;
    width: var(--width-full);
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 var(--offset-sm-xxl);
    border: none;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    text-transform: inherit
}

.button_btn__dCMn2 .button_has-icon-start__3Gfm6,
.button_btn__dCMn2 .button_has-icon-end__3eUa3 {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.button_btn__dCMn2 .button_has-icon-start__3Gfm6 {
    margin-right: var(--offset-sm-xs)
}

.button_btn__dCMn2 .button_has-icon-end__3eUa3 {
    margin-left: var(--offset-sm-xs)
}

.button_btn__dCMn2 .button_text__3oKFG {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.button_btn__dCMn2 .button_preloader-wrapper__1fziO {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    background: inherit;
    width: var(--width-full);
    height: 100%;
    left: 0;
    top: 0
}

.button_btn__dCMn2 vui-spinner {
    --spinner-circle-color: var(--button-text-color);
    width: var(--width-md-2xs);
    height: var(--height-md-2xs)
}

.button_btn__dCMn2 .button_hidden__30clR {
    opacity: 0
}

.button_size-2xs__16q4I {
    height: var(--height-md-2xs)
}

.button_size-2xs__16q4I.button_square__G0cbJ,
.button_size-2xs__16q4I.button_round__3L_QP {
    width: var(--width-md-2xs)
}

.button_size-2xs__16q4I .button_btn__dCMn2 {
    padding: 0 var(--offset-sm-2xs)
}

.button_size-xs__m2r5p {
    height: var(--height-md-s)
}

.button_size-xs__m2r5p.button_square__G0cbJ,
.button_size-xs__m2r5p.button_round__3L_QP {
    width: var(--width-md-s)
}

.button_size-xs__m2r5p .button_btn__dCMn2 {
    padding: 0 var(--offset-sm-m)
}

.button_size-xs__m2r5p vui-spinner {
    width: var(--width-sm-l);
    height: var(--height-sm-l)
}

.button_size-s__1ZYCF {
    height: var(--height-md-l)
}

.button_size-s__1ZYCF.button_square__G0cbJ,
.button_size-s__1ZYCF.button_round__3L_QP {
    width: var(--width-md-l)
}

.button_size-s__1ZYCF .button_btn__dCMn2 {
    padding: 0 var(--offset-sm-l)
}

.button_size-m__RQWsQ {
    height: var(--height-md-2xl)
}

.button_size-m__RQWsQ.button_square__G0cbJ,
.button_size-m__RQWsQ.button_round__3L_QP {
    width: var(--width-md-2xl)
}

.button_size-m__RQWsQ .button_btn__dCMn2 {
    padding: 0 var(--offset-sm-xxl)
}

.button_size-l__3iHTS {
    --button-radius: var(--border-radius-l);
    height: var(--height-lg-s)
}

.button_size-l__3iHTS.button_square__G0cbJ,
.button_size-l__3iHTS.button_round__3L_QP {
    width: var(--width-lg-s)
}

.button_size-l__3iHTS .button_btn__dCMn2 {
    padding: 0 var(--offset-md-2xs)
}

.button_size-xl__1jisb {
    --button-radius: var(--border-radius-l);
    height: var(--height-lg-l);
    font: var(--bold-xxl-compact)
}

.button_size-xl__1jisb.button_square__G0cbJ,
.button_size-xl__1jisb.button_round__3L_QP {
    width: var(--width-lg-l)
}

.button_size-xl__1jisb .button_btn__dCMn2 {
    padding: 0 var(--offset-md-l)
}

.button_square__G0cbJ .button_btn__dCMn2,
.button_round__3L_QP .button_btn__dCMn2 {
    padding: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.button_size-2xs__16q4I .button_has-icon-start__3Gfm6,
.button_size-xs__m2r5p .button_has-icon-start__3Gfm6 {
    margin-right: var(--offset-sm-2xs)
}

.button_size-2xs__16q4I .button_has-icon-end__3eUa3,
.button_size-xs__m2r5p .button_has-icon-end__3eUa3 {
    margin-left: var(--offset-sm-2xs)
}

.button_size-2xs__16q4I vui-spinner,
.button_size-xs__m2r5p vui-spinner {
    width: var(--width-sm-l);
    height: var(--height-sm-l)
}

.button_size-s__1ZYCF .button_has-icon-start__3Gfm6,
.button_size-m__RQWsQ .button_has-icon-start__3Gfm6 {
    margin-right: var(--offset-sm-xs)
}

.button_size-s__1ZYCF .button_has-icon-end__3eUa3,
.button_size-m__RQWsQ .button_has-icon-end__3eUa3 {
    margin-left: var(--offset-sm-xs)
}

.button_size-l__3iHTS .button_has-icon-start__3Gfm6,
.button_size-xl__1jisb .button_has-icon-start__3Gfm6 {
    margin-right: var(--offset-sm-s)
}

.button_size-l__3iHTS .button_has-icon-end__3eUa3,
.button_size-xl__1jisb .button_has-icon-end__3eUa3 {
    margin-left: var(--offset-sm-s)
}

[dir=rtl] .button_has-icon-start__3Gfm6 {
    margin-left: var(--offset-sm-2xs);
    margin-right: 0
}

[dir=rtl] .button_has-icon-end__3eUa3 {
    margin-right: var(--offset-sm-2xs);
    margin-left: 0
}

[dir=rtl] .button_size-l__3iHTS .button_has-icon-start__3Gfm6,
[dir=rtl] .button_size-xl__1jisb .button_has-icon-start__3Gfm6 {
    margin-left: var(--offset-sm-s);
    margin-right: 0
}

[dir=rtl] .button_size-l__3iHTS .button_has-icon-end__3eUa3,
[dir=rtl] .button_size-xl__1jisb .button_has-icon-end__3eUa3 {
    margin-right: var(--offset-sm-s);
    margin-left: 0
}

[dir=rtl] .button_size-s__1ZYCF .button_has-icon-start__3Gfm6,
[dir=rtl] .button_size-m__RQWsQ .button_has-icon-start__3Gfm6 {
    margin-left: var(--offset-sm-xs);
    margin-right: 0
}

[dir=rtl] .button_size-s__1ZYCF .button_has-icon-end__3eUa3,
[dir=rtl] .button_size-m__RQWsQ .button_has-icon-end__3eUa3 {
    margin-right: var(--offset-sm-xs);
    margin-left: 0
}