/*======================================
EIVOX BUTTONS CSS
Version: 1.0
======================================*/


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

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    min-height:48px;
    padding:12px 24px;

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

    font-family:var(--font-primary);
    font-size:var(--font-md);
    font-weight:var(--weight-semibold);

    cursor:pointer;
    user-select:none;

    transition:var(--transition);

    text-decoration:none;

    white-space:nowrap;
}


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

.btn-primary{

    background:var(--primary);
    color:#fff;

}

.btn-primary:hover{

    background:var(--primary-hover);
    transform:translateY(-2px);

}


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

.btn-secondary{

    background:var(--secondary);
    color:#fff;

}

.btn-secondary:hover{

    background:var(--secondary-hover);
    transform:translateY(-2px);

}


/*======================================
SUCCESS
======================================*/

.btn-success{

    background:var(--success);
    color:#fff;

}

.btn-success:hover{

    filter:brightness(110%);
    transform:translateY(-2px);

}


/*======================================
DANGER
======================================*/

.btn-danger{

    background:var(--danger);
    color:#fff;

}

.btn-danger:hover{

    filter:brightness(110%);
    transform:translateY(-2px);

}


/*======================================
WARNING
======================================*/

.btn-warning{

    background:var(--warning);
    color:#fff;

}

.btn-warning:hover{

    filter:brightness(110%);
    transform:translateY(-2px);

}


/*======================================
LIGHT
======================================*/

.btn-light{

    background:var(--surface);
    color:var(--text);

}

.btn-light:hover{

    background:var(--surface-light);

}


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

.btn-outline{

    background:transparent;
    color:var(--primary);

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

}

.btn-outline:hover{

    background:var(--primary);
    color:#fff;

}


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

.btn-ghost{

    background:transparent;
    color:var(--text);

}

.btn-ghost:hover{

    background:rgba(255,255,255,.08);

}


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

.btn-block{

    width:100%;

}


/*======================================
BUTTON SIZES
======================================*/

.btn-sm{

    min-height:38px;
    padding:8px 18px;
    font-size:var(--font-sm);

}

.btn-lg{

    min-height:56px;
    padding:16px 32px;
    font-size:var(--font-lg);

}


/*======================================
ICON BUTTON
======================================*/

.btn-icon{

    width:48px;
    height:48px;

    padding:0;

    border-radius:50%;

}


/*======================================
ROUNDED BUTTON
======================================*/

.btn-rounded{

    border-radius:999px;

}


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

.btn:disabled{

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

}


/*======================================
ACTIVE
======================================*/

.btn:active{

    transform:scale(.98);

}


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

.btn:focus-visible{

    outline:2px solid var(--primary);
    outline-offset:2px;

}


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

.btn-group{

    display:flex;
    gap:12px;
    flex-wrap:wrap;

}


/*======================================
RESPONSIVE
======================================*/

@media(max-width:767px){

    .btn{

        width:100%;

    }

    .btn-group{

        flex-direction:column;

    }

}