/*======================================================================

BUTTON SYSTEM
======================================================================*/


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

.ms-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 32px;

    border:none;

    border-radius:var(--ms-radius-pill);

    cursor:pointer;

    font-family:var(--ms-font);

    font-size:16px;

    font-weight:600;

    line-height:1;

    transition:
        background var(--ms-speed),
        color var(--ms-speed),
        border-color var(--ms-speed),
        transform var(--ms-speed),
        box-shadow var(--ms-speed);

}



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

.ms-btn-primary{

    background:var(--ms-gold);

    color:var(--ms-bg);

}

.ms-btn-primary:hover{

    background:var(--ms-gold-light);

    transform:translateY(-2px);

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

}



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

.ms-btn-secondary{

    background:var(--ms-surface);

    color:var(--ms-white);

    border:1px solid var(--ms-border);

}

.ms-btn-secondary:hover{

    border-color:var(--ms-gold);

    background:var(--ms-surface-2);

}



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

.ms-btn-outline{

    background:transparent;

    color:var(--ms-gold);

    border:1px solid var(--ms-gold);

}

.ms-btn-outline:hover{

    background:var(--ms-gold);

    color:var(--ms-bg);

}



/*======================================================================
 GHOST
======================================================================*/

.ms-btn-ghost{

    background:transparent;

    color:var(--ms-text);

}

.ms-btn-ghost:hover{

    color:var(--ms-gold);

}



/*======================================================================
 BUTTON SIZE
======================================================================*/

.ms-btn-sm{

    padding:12px 22px;

    font-size:14px;

}

.ms-btn-md{

    padding:16px 32px;

}

.ms-btn-lg{

    padding:20px 42px;

    font-size:18px;

}



/*======================================================================
 BUTTON WIDTH
======================================================================*/

.ms-btn-block{

    display:flex;

    width:100%;

    justify-content:center;

}



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

.ms-btn:disabled{

    opacity:.45;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}



/*======================================================================
 BUTTON FOCUS
======================================================================*/

.ms-btn:focus-visible{

    outline:2px solid var(--ms-gold);

    outline-offset:3px;

}
/*======================================================================
 BUTTON GROUP
======================================================================*/

.ms-btn-group{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

    align-items:center;

}

.ms-btn-group .ms-btn{

    flex:0 0 auto;

}
/*======================================================================
 BUTTON FULL WIDTH
======================================================================*/

.ms-btn-full{

    display:flex;

    width:100%;

    justify-content:center;
  
}