/**
 * Default button
 */

.button {
    --button-color: var(--color-tint);
    --button-color-hover: var(--button-color);
    --button-bg-color: var(--color-active);
    --button-bg-color-hover: var(--color-active-shade-20);
    --button-shadow-color: var(--color-contrast-shadow-15);
    --button-shadow-offset: 10px;
    --button-radius: 21px;

    color: var(--button-color);
    background: var(--button-bg-color);
    border-radius: var(--button-radius);
    height: 46px;
    font-weight: 700;
    font-size: var(--text-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    padding: 0 var(--margin-lg);
    user-select: none;
    cursor: pointer;
    box-shadow: 0 0 0 var(--button-shadow-color);
    transition-property: background, color, box-shadow;
}

.button:hover,
.button:focus {
    color: var(--button-color-hover);
    background: var(--button-bg-color-hover);
    box-shadow: 0 var(--button-shadow-offset) 0 var(--button-shadow-color);
}

.button:active {
    background: var(--button-bg-color-hover);
}

.button-sm {
    font-size: var(--text-sm);
}

.button-no-shadow:hover,
.button-no-shadow:focus {
    box-shadow: 0 0 0 var(--button-shadow-color);
}

/**
 * Primary button
 */

.button-primary {
    --button-bg-color: var(--color-primary);
    --button-bg-color-hover: var(--color-primary-shade-20);
}

/**
 * Secondary button
 */
.button-secondary {
    --button-color: var(--color-contrast);
    --button-bg-color: var(--color-secondary);
    --button-bg-color-hover: var(--color-secondary-shade-20);
}

/**
 * Negative button
 */

.button-negative {
    --button-color: var(--color-contrast);
    --button-bg-color: var(--color-tint);
    --button-bg-color-hover: var(--color-tint-shade-20);
}

/**
 * Alternative button
 */

.button-alternative {
    --button-color: var(--color-contrast);
    --button-bg-color: var(--color-warning);
    --button-bg-color-hover: var(--color-warning-shade-20);
}

/**
 * Alert button
 */

.button-alert {
    --button-bg-color: var(--color-error);
    --button-bg-color-hover: var(--color-error-shade-20);
}

/**
 * Success button
 */

.button-success {
    --button-bg-color: var(--color-success);
    --button-bg-color-hover: var(--color-success-shade-20);
}