/**
 * ============================================================
 * EMZO Corporate
 * button.css
 * ------------------------------------------------------------
 * Componente de botones.
 *
 * Responsabilidad:
 * Definir los estilos reutilizables para botones.
 *
 * @package EMZO_Corporate
 * @version 1.0.0
 * ============================================================
 */

/* ============================================================
   BOTÓN BASE
============================================================ */

.emzo-btn {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--emzo-space-2);

    padding: var(--emzo-space-3) var(--emzo-space-5);

    border: 0;
    border-radius: var(--emzo-radius-md);

    cursor: pointer;

    font-size: var(--emzo-font-size-md);
    font-weight: var(--emzo-font-weight-semibold);

    text-decoration: none;

    transition:
        background-color var(--emzo-transition-fast),
        color var(--emzo-transition-fast),
        transform var(--emzo-transition-fast),
        box-shadow var(--emzo-transition-fast);
}

/* ============================================================
   PRIMARY
============================================================ */

.emzo-btn-primary {

    background: var(--emzo-primary);
    color: var(--emzo-white);

}

.emzo-btn-primary:hover {

    background: var(--emzo-primary-dark);
    color: var(--emzo-white);

    transform: translateY(-2px);

    box-shadow: var(--emzo-shadow-md);

}

/* ============================================================
   SECONDARY
============================================================ */

.emzo-btn-secondary {

    background: var(--emzo-secondary);
    color: var(--emzo-white);

}

.emzo-btn-secondary:hover {

    background: var(--emzo-gray-800);
    color: var(--emzo-white);

}

/* ============================================================
   OUTLINE
============================================================ */

.emzo-btn-outline {

    background: transparent;

    border: 2px solid var(--emzo-primary);

    color: var(--emzo-primary);

}

.emzo-btn-outline:hover {

    background: var(--emzo-primary);

    color: var(--emzo-white);

}

/* ============================================================
   TAMAÑOS
============================================================ */

.emzo-btn-sm {

    padding: var(--emzo-space-2) var(--emzo-space-4);

    font-size: var(--emzo-font-size-sm);

}

.emzo-btn-lg {

    padding: var(--emzo-space-4) var(--emzo-space-6);

    font-size: var(--emzo-font-size-lg);

}