/* ==========================================================
   MERITZA CLASSES
   BUTTONS
   Version : 2.0.0
========================================================== */

/* ==========================================
   BASE BUTTON
========================================== */

.mc-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-height:42px;

    padding:0 20px;

    border:1px solid transparent;

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

    background:transparent;

    color:inherit;

    font-family:var(--mc-font-primary);

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

    font-weight:var(--mc-font-weight-semibold);

    text-decoration:none;

    white-space:nowrap;

    cursor:pointer;

    transition:var(--mc-transition);

}

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

.mc-btn-primary{

    background:var(--mc-primary);

    color:var(--mc-text-white);

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

}

.mc-btn-primary:hover{

    background:var(--mc-primary-dark);

    border-color:var(--mc-primary-dark);

    color:var(--mc-text-white);

    transform:translateY(-1px);

    box-shadow:var(--mc-shadow-sm);

}

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

.mc-btn-outline{

    background:transparent;

    color:var(--mc-primary);

    border-color:var(--mc-border);

}

.mc-btn-outline:hover{

    background:var(--mc-primary);

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

    color:var(--mc-text-white);

}

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

.mc-btn-secondary{

    background:var(--mc-surface-alt);

    color:var(--mc-text);

    border-color:var(--mc-border);

}

.mc-btn-secondary:hover{

    background:var(--mc-bg-dark);

}

/* ==========================================
   SMALL
========================================== */

.mc-btn-sm{

    min-height:36px;

    padding:0 16px;

    font-size:var(--mc-font-size-xs);

}

/* ==========================================
   LARGE
========================================== */

.mc-btn-lg{

    min-height:46px;

    padding:0 26px;

    font-size:var(--mc-font-size-md);

}

/* ==========================================
   FULL WIDTH
========================================== */

.mc-btn-block{

    width:100%;

}

/* ==========================================
   LOADING
========================================== */

.mc-btn.loading{

    opacity:.75;

    pointer-events:none;

    cursor:not-allowed;

}

/* ==========================================
   DISABLED
========================================== */

.mc-btn:disabled,

.mc-btn.disabled{

    opacity:.6;

    pointer-events:none;

    cursor:not-allowed;

}