/*
|--------------------------------------------------------------------------
| Primary Button
|--------------------------------------------------------------------------
|
| Hauptbutton für primäre Aktionen.
|
*/

.button-primary {
    padding:
        var(--spacing-3)
        var(--spacing-5);

    border-radius: var(--radius-lg);

    font-size: 15px;

    background: var(--color-primary-600);

    color: var(--color-white);
}

.button-primary:hover {
    background: var(--color-primary-700);
}


/*
|--------------------------------------------------------------------------
| Outline Variante
|--------------------------------------------------------------------------
*/

.button-primary-outline {
    padding:
        var(--spacing-3)
        var(--spacing-5);

    border:
        var(--border-width)
        solid
        var(--color-primary-500);

    border-radius: var(--radius-lg);

    font-size: 15px;

    background: transparent;

    color: var(--color-primary-400);
}

.button-primary-outline:hover {
    background: var(--color-primary-600);

    border-color: var(--color-primary-600);

    color: var(--color-white);
}


/*
|--------------------------------------------------------------------------
| Ghost Variante
|--------------------------------------------------------------------------
*/

.button-primary-ghost {
    padding:
        var(--spacing-3)
        var(--spacing-5);

    border:
        var(--border-width)
        solid
        transparent;

    border-radius: var(--radius-lg);

    font-size: 15px;

    background: transparent;

    color: var(--color-primary-400);
}

.button-primary-ghost:hover {
    background: rgba(37, 99, 235, 0.15);

    color: var(--color-white);
}