.btn {
    border-width: 0;
    border-radius: var(--button-btn-radius-md);
    display: inline-flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
    padding: var(--lgc-space-100) var(--lgc-space-300);
}

.btn--loading {
    position: relative;
}

.btn--loading .btn__text, .btn--loading .btn-icon {
    visibility: hidden;
}

.btn__loading {
    position: absolute;

    width: 24px;
    height: 24px;
    top: calc(50% - 12px);
    left: calc(50% - 12px);
    transform: translate(-50%, -50%);
}

.btn__text {
    font-family: "Roboto Flex";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
    letter-spacing: 0.15px;
}

.btn__icon {
    margin-inline-end: var(--lgc-space-100);
}

.btn--sm .btn__icon {
    margin-inline-end: var(--lgc-space-050);
}

.btn--sm {
    padding: var(--lgc-space-075) var(--lgc-space-150);
}
.btn--lg {
    padding: var(--lgc-space-150) var(--lgc-space-300);
    min-width: 86px;
}

.btn--withIcon {
    padding-inline-start: var(--lgc-space-200);
}
.btn--sm.btn--withIcon {
    padding-inline-start: var(--lgc-space-100);
}
.btn--lg.btn--withIcon {
    padding-inline-start: var(--lgc-space-200);
}

.btn--iconOnly {
    padding-inline-end: var(--lgc-space-200);
}

.btn--sm.btn--withIcon {
    padding-inline-end: var(--lgc-space-150);
}

.btn--iconOnly .btn__icon {
    margin-inline-end: 0;
}

.btn--fullwidth {
    width: 100%;
}

.btn--clickable {
    cursor: pointer;
}

.btn--disabled {
    background-color: var(--button-disabled-bg);
}


.btn--solid.btn--primary {
    background: var(--button-solid-primary-bg);
    color: var(--button-solid-primary-color);
}

.btn--solid.btn--primary:hover {
    background: var(--button-solid-primary-hover-bg);
}

.btn--solid.btn--primary.btn--down, .btn--solid.btn--primary:active, .btn--solid.btn--primary.btn--loading {
    background: var(--button-solid-primary-active-bg);
}

.btn--solid.btn--neutral {
    color: var(--button-solid-neutral-color);
    background: var(--button-solid-neutral-bg);
}

.btn--solid.btn--neutral:hover {
    background-color: var(--button-solid-neutral-hover-bg);
}

.btn--solid.btn--neutral.btn--down, .btn--solid.btn--neutral:active, .btn--solid.btn--neutral.btn--loading {
    background-color: var(--button-solid-neutral-active-bg);
}

.btn--solid.btn--danger {
    color: var(--button-solid-danger-color);
    background: var(--button-solid-danger-bg);
}

.btn--solid.btn--danger:hover {
    background-color: var(--button-solid-danger-hover-bg);
}

.btn--solid.btn--danger.btn--down, .btn--solid.btn--danger:active, .btn--solid.btn--danger.btn--loading {
    background-color: var(--button-solid-danger-active-bg);
}

.btn--solid.btn--success {
    color: var(--button-solid-success-color);
    background: var(--button-solid-success-bg);
}

.btn--solid.btn--success:hover {
    background-color: var(--button-solid-success-hover-bg);
}

.btn--solid.btn--success.btn--down, .btn--solid.btn--success:active, .btn--solid.btn--success.btn--loading {
    background-color: var(--button-solid-success-active-bg);
}

.btn--solid.btn--accent {
    color: var(--button-solid-accent-color);
    background: var(--button-solid-accent-bg);
}

.btn--solid.btn--accent:hover {
    background-color: var(--button-solid-accent-hover-bg);
}

.btn--solid.btn--accent.btn--down, .btn--solid.btn--accent:active, .btn--solid.btn--accent.btn--loading {
    background-color: var(--button-solid-accent-active-bg);
}

.btn--solid.btn--ai {
    color: var(--button-solid-ai-color);
    background: var(--button-solid-ai-bg);
}

.btn--solid.btn--ai:hover {
    background-color: var(--button-solid-ai-hover-bg);
}

.btn--solid.btn--ai.btn--down, .btn--solid.btn--ai:active, .btn--solid.btn--ai.btn--loading {
    background-color: var(--button-solid-ai-active-bg);
}


.btn--plain {
    background-color: transparent;
    border: none;
    outline: none;
    text-transform: none;
}

.btn--plain.btn--primary {
    color: var(--button-plain-primary-color);
}

.btn--plain.btn--primary:hover {
    color: var(--button-plain-primary-hover)    ;
    background-color: var(--button-plain-primary-hover-bg);
}

.btn--plain.btn--primary.btn--down, .btn--plain.btn--primary:active, .btn--plain.btn--primary.btn--loading {
    color: var(--button-plain-primary-active);
    background-color: var(--button-plain-primary-hover-bg);
}

.btn--plain.btn--neutral {
    color: var(--button-plain-neutral-color);
}

.btn--plain.btn--neutral:hover {
    color: var(--button-plain-neutral-hover);
    background-color: var(--button-plain-neutral-hover-bg);
}

.btn--plain.btn--neutral.btn--down, .btn--plain.btn--neutral:active, .btn--plain.btn--neutral.btn--loading {
    color: var(--button-plain-neutral-active);
    background-color: var(--button-plain-neutral-hover-bg);
}

.btn--plain.btn--danger {
    color: var(--button-plain-danger-color);
}

.btn--plain.btn--danger:hover {
    color: var(--button-plain-danger-hover);
    background-color: var(--button-plain-danger-hover-bg);
}

.btn--plain.btn--danger.btn--down, .btn--plain.btn--danger:active, .btn--plain.btn--danger.btn--loading {
    color: var(--button-plain-danger-active);
    background-color: var(--button-plain-danger-active-bg);
}

.btn--plain.btn--success {
    color: var(--button-plain-success-color);
}

.btn--plain.btn--success:hover {
    color: var(--button-plain-success-hover);
    background-color: var(--button-plain-success-hover-bg);
}

.btn--plain.btn--success.btn--down, .btn--plain.btn--success:active, .btn--plain.btn--success.btn--loading {
    color: var(--button-plain-success-active);
    background-color: var(--button-plain-success-hover-bg);
}

.btn--plain.btn--accent {
    color: var(--button-plain-accent-color);
}

.btn--plain.btn--accent:hover {
    color: var(--button-plain-accent-hover);
    background-color: var(--button-plain-accent-hover-bg);
}

.btn--plain.btn--accent.btn--down, .btn--plain.btn--accent:active, .btn--plain.btn--accent.btn--loading {
    color: var(--button-plain-accent-active);
    background-color: var(--button-plain-accent-hover-bg);
}

.btn--plain.btn--ai {
    color: var(--button-plain-ai-color);
}

.btn--plain.btn--ai:hover {
    color: var(--button-plain-ai-hover);
    background-color: var(--button-plain-ai-hover-bg);
}

.btn--plain.btn--ai.btn--down, .btn--plain.btn--ai:active, .btn--plain.btn--ai.btn--loading {
    color: var(--button-plain-ai-active);
    background-color: var(--button-plain-ai-hover-bg);
}


.btn--outlined {
    background: none;
    color: var(--button-outlined-primary-color);
    border: 1px solid var(--button-outlined-primary-color);
    padding-block: calc(var(--lgc-space-100) - 1px);
}

.btn--outlined.btn--lg {
    padding-block: calc(var(--lgc-space-150) - 1px);
}

.btn--outlined.btn--sm {
    padding-block: calc(var(--lgc-space-075) - 1px);
}

.btn--outlined:hover {
    color: var(--button-outlined-primary-hover);
    border-color: var(--button-outlined-primary-hover);
}

.btn--outlined.btn--down, .btn--outlined:active, .btn--outlined.btn--loading {
    color: var(--button-outlined-primary-active);
    border-color: var(--button-outlined-primary-active);
}

.btn--outlined.btn--neutral {
    color: var(--button-outlined-neutral-color);
    border-color: var(--button-outlined-neutral-color);
}

.btn--outlined.btn--neutral:hover {
    color: var(--button-outlined-neutral-hover);
    border-color: var(--button-outlined-neutral-hover);
}

.btn--outlined.btn--neutral.btn--down, .btn--outlined.btn--neutral:active, .btn--outlined.btn--neutral.btn--loading {
    color: var(--button-outlined-neutral-active);
    border-color: var(--button-outlined-neutral-active);
}

.btn--outlined.btn--danger {
    color: var(--button-outlined-danger-color);
    border-color: var(--button-outlined-danger-color);
}

.btn--outlined.btn--danger:hover {
    color: var(--button-outlined-danger-hover);
    border-color: var(--button-outlined-danger-hover);
}

.btn--outlined.btn--danger.btn--down, .btn--outlined.btn--danger:active, .btn--outlined.btn--danger.btn--loading {
    color: var(--button-outlined-danger-active);
    border-color: var(--button-outlined-danger-active);
}


.btn--outlined.btn--success {
    color: var(--button-outlined-success-color);
    border-color: var(--button-outlined-success-color);
}

.btn--outlined.btn--success:hover {
    color: var(--button-outlined-success-hover);
    border-color: var(--button-outlined-success-hover);
}

.btn--outlined.btn--success.btn--down, .btn--outlined.btn--success:active, .btn--outlined.btn--success.btn--loading {
    color: var(--button-outlined-success-active);
    border-color: var(--button-outlined-success-active);
}


.btn--outlined.btn--accent {
    color: var(--button-outlined-accent-color);
    border-color: var(--button-outlined-accent-color);
}

.btn--outlined.btn--accent:hover {
    color: var(--button-outlined-accent-hover);
    border-color: var(--button-outlined-accent-hover);
}

.btn--outlined.btn--accent.btn--down, .btn--outlined.btn--accent:active, .btn--outlined.btn--accent.btn--loading {
    color: var(--button-outlined-accent-active);
    border-color: var(--button-outlined-accent-active);
}

.btn--outlined.btn--ai {
    color: var(--button-outlined-ai-color);
    border-color: var(--button-outlined-ai-color);
}

.btn--outlined.btn--ai:hover {
    color: var(--button-outlined-ai-hover);
    border-color: var(--button-outlined-ai-hover);
}

.btn--outlined.btn--ai.btn--down, .btn--outlined.btn--ai:active, .btn--outlined.btn--ai.btn--loading {
    color: var(--button-outlined-ai-active);
    border-color: var(--button-outlined-ai-active);
}


.btn--soft {
    border: none;
    outline: none;
}

.btn--soft.btn--primary {
    color: var(--button-soft-primary-color);
    background: var(--button-soft-primary-bg);
}

.btn--soft.btn--primary:hover {
    color: var(--button-soft-primary-hover);
    background-color: var(--button-soft-primary-hover-bg);
}

.btn--soft.btn--primary.btn--down, .btn--soft.btn--primary:active, .btn--soft.btn--primary.btn--loading {
    color: var(--button-soft-primary-active);
    background-color: var(--button-soft-primary-active);
}

.btn--soft.btn--neutral {
    color: var(--button-soft-neutral-color);
    background: var(--button-soft-neutral-bg);
}

.btn--soft.btn--neutral:hover {
    color: var(--button-soft-neutral-hover);
    background-color: var(--button-soft-neutral-hover-bg);
}

.btn--soft.btn--neutral.btn--down, .btn--soft.btn--neutral:active, .btn--soft.btn--neutral.btn--loading {
    color: var(--button-soft-neutral-active);
    background-color: var(--button-soft-neutral-active-bg);
}

.btn--soft.btn--danger {
    color: var(--button-soft-danger-color);
    background: var(--button-soft-danger-bg);
}

.btn--soft.btn--danger:hover {
    color: var(--button-soft-danger-hover);
    background-color: var(--button-soft-danger-hover-bg);
}

.btn--soft.btn--danger.btn--down, .btn--soft.btn--danger:active, .btn--soft.btn--danger.btn--loading {
    color: var(--button-soft-danger-active);
    background-color: var(--button-soft-danger-active-bg);
}

.btn--soft.btn--success {
    color: var(--button-soft-success-color);
    background-color: var(--button-soft-success-bg);
}

.btn--soft.btn--success:hover {
    color: var(--button-soft-success-hover);
    background-color: var(--button-soft-success-hover-bg);
}

.btn--soft.btn--success.btn--down, .btn--soft.btn--success:active, .btn--soft.btn--success.btn--loading {
    color: var(--button-soft-success-active);
    background-color: var(--button-soft-success-active);
}

.btn--soft.btn--accent {
    color: var(--button-soft-accent-color);
    background: var(--button-soft-accent-bg);
}

.btn--soft.btn--accent:hover {
    color: var(--button-soft-accent-hover);
    background-color: var(--button-soft-accent-hover-bg);
}

.btn--soft.btn--accent.btn--down, .btn--soft.btn--accent:active, .btn--soft.btn--accent.btn--loading {
    color: var(--button-soft-accent-active);
    background-color: var(--button-soft-accent-active);
}

.btn--soft.btn--ai {
    color: var(--button-soft-ai-color);
    background: var(--button-soft-ai-bg);
}

.btn--soft.btn--ai:hover {
    color: var(--button-soft-ai-hover);
    background-color: var(--button-soft-ai-hover-bg);
}

.btn--soft.btn--ai.btn--down, .btn--soft.btn--ai:active, .btn--soft.btn--ai.btn--loading {
    color: var(--button-soft-ai-active);
    background-color: var(--button-soft-ai-active-bg);
}


.btn--inline {
    padding: 0;
    background: none;
}

.btn--inline.btn--primary {
    color: var(--button-soft-primary-color);
}

.btn--inline.btn--primary:hover {
    color: var(--button-soft-primary-hover);
}

.btn--inline.btn--primary.btn--down, .btn--inline.btn--primary:active, .btn--inline.btn--primary.btn--loading {
    color: var(--button-soft-primary-active);
}

.btn--inline.btn--neutral {
    color: var(--button-plain-neutral-color);
}

.btn--inline.btn--neutral:hover {
    color: var(--button-plain-neutral-hover);
}

.btn--inline.btn--neutral.btn--down, .btn--inline.btn--neutral:active, .btn--inline.btn--neutral.btn--loading {
    color: var(--button-plain-neutral-active);
}

.btn--inline.btn--danger {
    color: var(--button-inline-danger-color);
}

.btn--inline.btn--danger:hover {
    color: var(--button-inline-danger-hover);
}

.btn--inline.btn--danger.btn--down, .btn--inline.btn--danger:active, .btn--inline.btn--danger.btn--loading {
    color: var(--button-inline-danger-active);
}

.btn--inline.btn--success {
    color: var(--button-outlined-success-color);
}

.btn--inline.btn--success:hover {
    color: var(--button-outlined-success-hover);
}

.btn--inline.btn--success.btn--down, .btn--inline.btn--success:active, .btn--inline.btn--success.btn--loading {
    color: var(--button-outlined-success-active);
}

.btn--inline.btn--accent {
    color: var(--button-inline-accent-color);
}

.btn--inline.btn--accent:hover {
    color: var(--button-inline-accent-hover);
}

.btn--inline.btn--accent.btn--down, .btn--inline.btn--accent:active, .btn--inline.btn--accent.btn--loading {
    color: var(--button-inline-accent-active);
}

.btn--inline.btn--ai {
    color: var(--button-soft-ai-color);
}

.btn--inline.btn--ai:hover {
    color: var(--button-soft-ai-hover);
}

.btn--inline.btn--ai.btn--down, .btn--inline.btn--ai:active, .btn--inline.btn--ai.btn--loading {
    color: var(--button-soft-ai-active);
}