/*==============================================================
#
# NovaCore Buttons
#
==============================================================*/

/*--------------------------------------------------------------
# Base Button
--------------------------------------------------------------*/
/*==========================================================
= Button Component
==========================================================*/

.nc-button{

    --_background: var(--nc-primary);
    --_color: var(--nc-white);
    --_border: transparent;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:var(--nc-button-gap);

    min-height:var(--nc-button-height);

    padding-inline:var(--nc-button-padding-x);

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

    border-radius:var(--nc-button-radius);

    background:var(--_background);

    color:var(--_color);

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

    font-size:var(--nc-button-font-size);

    font-weight:var(--nc-button-font-weight);

    line-height:1;

    text-decoration:none;

    white-space:nowrap;

    cursor:pointer;

    user-select:none;

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

}

.nc-button,
button,
input[type="submit"],
input[type="button"]{

    font:inherit;

    cursor:pointer;

    border:none;

    background:none;

    color:inherit;

}
/*--------------------------------------------------------------
# Hover
--------------------------------------------------------------*/

.nc-button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover{

    transform:translateY(-2px);

}

/*--------------------------------------------------------------
# Primary
--------------------------------------------------------------*/

.nc-button--primary{

    background:var(--nc-primary);

    color:var(--nc-white);

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

}

.nc-button--primary:hover{

    background:var(--nc-primary-hover);

    transform:translateY(-2px);

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

}

/*--------------------------------------------------------------
# Secondary
--------------------------------------------------------------*/

.nc-button--secondary{

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

    color:var(--nc-text);

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

}

.nc-button--secondary:hover{

    background:var(--nc-surface);

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

}
}

/*--------------------------------------------------------------
# Ghost
--------------------------------------------------------------*/

.nc-button--ghost{

    background:transparent;

    color:var(--nc-text);

}

.nc-button--ghost:hover{

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

}

/*--------------------------------------------------------------
# Outline
--------------------------------------------------------------*/
.nc-button--outline{

    background:transparent;

    color:var(--nc-primary);

    border:1px solid var(--nc-primary);

}

.nc-button--outline:hover{

    background:var(--nc-primary-soft);

}

/*--------------------------------------------------------------
# Success
--------------------------------------------------------------*/

.nc-button--success{

    background:#10b981;

    color:#fff;

}

.nc-button--success:hover{

    background:#059669;

}

/*--------------------------------------------------------------
# Danger
--------------------------------------------------------------*/

.nc-button--danger{

    background:#ef4444;

    color:#fff;

}

.nc-button--danger:hover{

    background:#dc2626;

}

/*--------------------------------------------------------------
# Sizes
--------------------------------------------------------------*/

.nc-button--sm{

    height:var(--nc-button-height-sm);

    font-size:14px;

    padding-inline:18px;

}

.nc-button--lg{

    height:var(--nc-button-height-lg);

    font-size:16px;

    padding-inline:32px;

}

/*--------------------------------------------------------------
# Full Width
--------------------------------------------------------------*/

.nc-button--block{

    display:flex;

    width:100%;

}

/*--------------------------------------------------------------
# Icon Only
--------------------------------------------------------------*/

.nc-button__icon{

    width:var(--nc-button-icon-size);

    height:var(--nc-button-icon-size);

    display:flex;
    align-items:center;
    justify-content:center;

}

.nc-button__icon svg{

    width:100%;
    height:100%;

    display:block;

}

/*--------------------------------------------------------------
# Disabled
--------------------------------------------------------------*/

.nc-button:disabled,
.nc-button.is-disabled{

    opacity:.6;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

    pointer-events:none;

}


.nc-button:focus-visible{

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

    outline-offset:3px;

}