/*
|--------------------------------------------------------------------------
| Secondary Button
|--------------------------------------------------------------------------
|
| Sekundärer Button für ergänzende Aktionen.
|
*/

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

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

    font-size: 15px;

    background: var(--color-slate-700);

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

.button.button-secondary:hover {
    background: var(--color-slate-600);
}


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

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

    border:
        var(--border-width)
        solid
        var(--color-slate-600);

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

    font-size: 15px;

    background: transparent;

    color: var(--color-slate-300);
}

.button.button-secondary-outline:hover {
    background: var(--color-slate-700);

    border-color: var(--color-slate-700);

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


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

.button.button-secondary-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-slate-300);
}

.button.button-secondary-ghost:hover {
    background: rgba(71, 85, 105, 0.15);

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