:root {
    --button-padding-lg: var(--space-2xs) var(--space-m);
    --button-padding-md: var(--space-3xs-2xs) var(--space-s);
    --button-padding-sm: var(--space-3xs) var(--space-2xs);

    --button-radius-lg: var(--default-border-radius);
    --button-radius-md: 5px;
    --button-radius-sm: 5px;

    --button-font-size-lg: var(--step--1);
    --button-font-size-md: var(--step--1);
    --button-font-size-sm: var(--step--2);

    --button-font-weight-lg: bold;
    --button-font-weight-md: normal;
    --button-font-weight-sm: normal;

    --button-margin-lg: 0.3rem;
    --button-margin-md: 0.2rem;
    --button-margin-sm: 0.1rem;

}

a.tt-btn, button.tt-btn, .tt-btn {
    text-decoration: none;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    border: 1px solid transparent;
}

a.tt-btn.disabled, button.tt-btn.disabled, .tt-btn.disabled,
.tt-btn:disabled{
    cursor: default;
    background-color: var(--bg-muted);
}

/* BUTTON SIZES */
a.tt-btn-lg, button.tt-btn-lg, .tt-btn-lg,
.tt-form .tt-btn {
    border-radius: var(--button-radius-lg);
    padding: var(--button-padding-lg);
    font-size: var(--button-font-size-lg);
    font-weight: var(--button-font-weight-lg);
    margin: var(--button-margin-lg);
}

a.tt-btn-md,  button.tt-btn-md, .tt-btn-md,
.tt-form .tt-form--medium .tt-btn {
    border-radius: var(--button-radius-md);
    padding: var(--button-padding-md);
    font-size: var(--button-font-size-md);
    font-weight: var(--button-font-weight-md);
    margin: var(--button-margin-md);
}

a.tt-btn-sm,  button.tt-btn-sm, .tt-btn-sm,
.tt-form.tt-form--small .tt-btn {
    border-radius: var(--button-radius-sm);
    padding: var(--button-padding-sm);
    font-size: var(--button-font-size-sm);
    font-weight: var(--button-font-weight-sm);
    margin: var(--button-margin-sm);
}

.tt-btn.tt-btn-big {
    display: block;
    margin: 0 auto;
}

.tt-btn.tt-btn-75 {
    width: 75%;
}

/* BUTTON COLORS */
a.tt-btn-primary, button.tt-btn-primary, .tt-btn-primary {
    background-color: var(--primary-color);
    color:var(--bg-color);
}
    a.tt-btn-primary:hover, button.tt-btn-primary:hover, .tt-btn-primary:hover {
        background-color: var(--primary-hover-color);
    }

a.tt-btn-success, button.tt-btn-success, .tt-btn-success {
    background-color: var(--success-color);
    color:var(--success-text-color);
}
    a.tt-btn-success:hover, button.tt-btn-success:hover, .tt-btn-success:hover {
        background-color: var(--success-hover-color);
    }

a.tt-btn-warning, button.tt-btn-warning, .tt-btn-warning {
    background-color: var(--warning-color);
    color:var(--warning-text-color);
}
    a.tt-btn-warning:hover, button.tt-btn-warning:hover, .tt-btn-warning:hover {
        background-color: var(--warning-hover-color);
    }

a.tt-btn-danger, button.tt-btn-danger, .tt-btn-danger {
    background-color: var(--danger-color);
    color:var(--danger-text-color);
}
    a.tt-btn-danger:hover, button.tt-btn-danger:hover, .tt-btn-danger:hover {
        background-color: var(--danger-hover-color);
    }

a.tt-btn-info, button.tt-btn-info, .tt-btn-info {
    background-color: var(--info-color);
    color:var(--info-text-color);
}
    a.tt-btn-info:hover, button.tt-btn-info:hover, .tt-btn-info:hover {
        background-color: var(--info-hover-color);
    }

/* OUTLINE */
a.tt-btn-primary-outline, button.tt-btn-primary-outline, .tt-btn-primary-outline {
    border: 1px solid var(--primary-color);
    color: var(--text-color);
}

a.tt-btn-success-outline, button.tt-btn-success-outline, .tt-btn-success-outline {
    border: 1px solid var(--success-color);
    color: var(--text-color);
}

a.tt-btn-warning-outline, button.tt-btn-warning-outline, .tt-btn-warning-outline {
    border: 1px solid var(--warning-color);
    color: var(--text-color);
}

a.tt-btn-danger-outline, button.tt-btn-danger-outline, .tt-btn-danger-outline {
    border: 1px solid var(--danger-color);
    color: var(--text-color);
}

a.tt-btn-info-outline, button.tt-btn-info-outline, .tt-btn-info-outline {
    border: 1px solid var(--info-color);
    color: var(--text-color);
}