.btn {
    border: 1px solid transparent;
    font-size: var(--defaultFontSize);
    line-height: var(--defaultLineHeight);
    background-color: transparent;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    text-align: center;
    --min-height: unset;
    min-height: var(--min-height);
    gap: var(--gap--xs);
}

.btn--link {
    text-decoration: underline;
}

.btn--default {
    background-color: var(--defaultTextColor);
    border-color: var(--dark-green);
    color: var(--white);
}

.btn--default:hover {
    background-color: var(--white);
    color: var(--defaultTextColor);
}

.btn--outline-default {
    border: 1px solid var(--border-2);
    color: var(--defaultTextColor);
}

.btn--outline-default:hover {
    border-color: var(--defaultTextColor);
}

/*  ------------------- Primary variants ---------------  */
.btn--primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--dark-grey-2);
    border-bottom-color: var(--primary-med);
}

/*
.btn--primary:hover {
    background-color: transparent;
    color: var(--primary);
}*/

.btn--gradient-primary {
    background: var(--gradient-1);
    border-color: var(--primary);
    color: var(--white);
    box-shadow: var(--shadow-2);
}

.btn--gradient-primary:hover {
    background: transparent;
    color: var(--primary);
    box-shadow: none;
}

.btn--light-primary {
    background-color: var(--ligh-primary);
    border-color: transparent;
    color: var(--primary);
}

.btn--light-primary:hover {
    border-color: var(--primary);
}

.btn--light-2-primary {
    background-color: var(--ligh-primary);
    border-color: transparent;
    color: var(--dark-green);
}

.btn--light-2-primary:hover {
    border-color: var(--primary);
}

.btn--outline-primary {
    border: 1px solid var(--primary);
    color: var(--primary);
    background-color: var(--white);
}

.btn--outline-primary:hover {
    background-color: var(--primary);
    color: var(--white);
}

/*  ------------------- Primary variants ---------------  */

/*  ------------------- Secondary variants ---------------  */

.btn--secondary {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: var(--white);
}

.btn--secondary:hover {
    background-color: transparent;
    color: var(--secondary);
}

.btn--secondary-light {
    background-color: var(--border-3);
    border-color: var(--border-3);
    color: var(--dark-grey-2);
}

/*
.btn--secondary-light:hover {
    background-color: transparent;
    color: var(--border-3);
}*/
.btn--outline-secondary {
    border: 1px solid var(--secondary);
    color: var(--secondary);
    background-color: var(--white);
}

.btn--outline-secondary:hover {
    background-color: var(--secondary);
    color: var(--white);
}

.btn--gradient-secondary {
    background: var(--gradient-2);
    border-color: var(--secondary);
    color: var(--white);
    box-shadow: var(--shadow-2);
}

.btn--gradient-secondary:hover {
    background: transparent;
    color: var(--secondary);
    box-shadow: none;
}


/*  ------------------- Secondary variants ---------------  */







.btn.disabled {
    pointer-events: none;
    opacity: .65;
}

.btn--xs {
    padding: 4px 10px;
    --min-height: var(--btn-size--xs);
    --ico-size: 20px;
    --defaultFontSize: var(--text--xs);
}

.btn--sm {
    padding: 4px 11px;
    --min-height: var(--btn-size--sm);
    --ico-size: 20px;
    --defaultFontSize: var(--text--sm);
}

.btn--md {
    padding: 6px 12px;
    --min-height: var(--btn-size--md);
    --ico-size: 20px;
    --defaultFontSize: var(--text--md);
}

.btn--lg {
    padding: 10px 17px;
    --min-height: var(--btn-size--lg);
    --ico-size: 24px;
    --defaultFontSize: var(--text--lg);
    gap: var(--gap--md);
}

.btn--xl {
    padding: 10px 19px;
    --min-height: var(--btn-size--xl);
    --ico-size: 24px;
    --defaultFontSize: var(--text--xl);
    gap: var(--gap--md);
}

.btn--square {
    width: var(--min-height);
    min-width: var(--min-height);
    height: var(--min-height);
    padding: 0;
    flex: 0 0 var(--min-height);
}
















.btn--success {
    background-color: var(--success);
    border-color: var(--success);
}

.btn--success:hover {
    background-color: transparent;
}

.btn--warning {
    background-color: var(--warning);
    border-color: var(--warning);
}

.btn--warning:hover {
    background-color: transparent;
}

.btn--danger {
    background-color: var(--danger);
    border-color: var(--danger);
    color: var(--white);
}

.btn--danger:hover {
    background-color: transparent;
    color: var(--danger);
}


.btn--outline-danger {
    border: 1px solid var(--border-2);
    color: var(--danger);
}

.btn--outline-danger:hover {
    border-color: var(--danger);
    color: var(--danger);
}

.btn--outline-warning {
    border: 1px solid var(--warning);
    color: var(--defaultTextColor);
}

.btn--outline-warning:hover {
    background-color: var(--warning);
}


.btn--gradient {
    border: 0;
    background: linear-gradient(82.32deg, #E7008F 11.89%, #A156FF 50%, #09A7EF 88.11%);
    color: var(--white);
}

.btn--gradient-border {
    /* border: 1; */
    /* background: linear-gradient(82.32deg, #E7008F 11.89%, #A156FF 50%, #09A7EF 88.11%); */
    border: 1.5px solid transparent;
    padding: 0;
    background-image: linear-gradient(var(--border-3), var(--border-3)), /* Цвет фона кнопки */
                        linear-gradient(82.32deg, #E7008F 11.89%, #A156FF 50%, #09A7EF 88.11%); /* Цвет бордера кнопки */
    color: var(--white);
    background-origin: border-box;
    background-clip: content-box, border-box;
    color: #020122;
}

.btn--gradient-border:hover {
    background-image: linear-gradient(var(--border-2), var(--border-2)), /* Цвет фона кнопки */
                    linear-gradient(82.32deg, #E7008F 11.89%, #A156FF 50%, #09A7EF 88.11%); /* Цвет бордера кнопки */
}

.btn--gradient:hover {
    opacity: .7;
}