/*
==========================================
PM UI Framework
Archivo: buttons.css
Versión: 0.1.0
Descripción: Sistema de botones
==========================================
*/

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

.pm-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;

    padding:.85rem 1.5rem;

    font-family:var(--pm-font);
    font-size:1rem;
    font-weight:600;
    line-height:1.2;

    text-decoration:none;
    text-align:center;
    white-space:nowrap;

    border:none;
    border-radius:var(--pm-radius-md);

    cursor:pointer;
    user-select:none;

    transition:
        background-color .30s ease,
        color .30s ease,
        border-color .30s ease,
        transform .20s ease,
        box-shadow .30s ease;
}

.pm-btn:hover{
    transform:translateY(-2px);
    text-decoration:none;
}

.pm-btn:active{
    transform:translateY(0);
}

.pm-btn:focus-visible{
    outline:3px solid rgba(33,150,243,.35);
    outline-offset:3px;
}


/* ==========================================
   BOTÓN PRIMARIO
========================================== */

a.pm-btn.pm-btn-primary,
button.pm-btn.pm-btn-primary{

    background:var(--pm-primary);
    color:#ffffff;

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

}

a.pm-btn.pm-btn-primary:hover,
button.pm-btn.pm-btn-primary:hover{

    background:var(--pm-primary-dark);
    color:#ffffff;

    box-shadow:var(--pm-shadow-lg);

}


/* ==========================================
   BOTÓN AMAZON
========================================== */

a.pm-btn.pm-btn-amazon,
button.pm-btn.pm-btn-amazon{

    background:#FFD814;

    color:#111827;

    border:1px solid #F2C200;

    box-shadow:
        0 8px 20px rgba(247,202,0,.30);

}

a.pm-btn.pm-btn-amazon:hover,
button.pm-btn.pm-btn-amazon:hover{

    background:#FFDF3D;

    color:#111827;

    box-shadow:
        0 12px 28px rgba(247,202,0,.45);

}


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

.pm-btn-sm{

    padding:.55rem 1rem;
    font-size:.90rem;

}

.pm-btn-md{

    padding:.85rem 1.5rem;
    font-size:1rem;

}

.pm-btn-lg{

    padding:1rem 2rem;
    font-size:1.1rem;

}


/* ==========================================
   BOTÓN ANCHO COMPLETO
========================================== */

.pm-btn-block{

    display:flex;
    width:100%;

}


/* ==========================================
   DESHABILITADO
========================================== */

.pm-btn:disabled,
.pm-btn.disabled{

    opacity:.6;
    cursor:not-allowed;
    pointer-events:none;

}