/* ==========================================================
   ADMIN CSS FRAMEWORK
   File : components/buttons.css
   Purpose : Professional Button Library
========================================================== */


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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-height:44px;

    padding:var(--btn-padding-y) var(--btn-padding-x);

    border:1px solid transparent;

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

    background:transparent;

    color:inherit;

    font-size:var(--btn-font-size);

    font-weight:var(--btn-font-weight);

    line-height:1.2;

    text-decoration:none;

    cursor:pointer;

    transition:all .25s ease;

    user-select:none;

    white-space:nowrap;

}


/* ===========================
   HOVER
=========================== */

.btn:hover{

    transform:translateY(var(--btn-hover-translate));

    box-shadow:var(--btn-shadow);

}


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

.btn:active{

    transform:scale(.98);

}


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

.btn:focus{

    outline:none;

}


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

.btn:disabled,
.btn.disabled{

    opacity:.65;

    cursor:not-allowed;

    pointer-events:none;

}


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

.btn-sm{

    min-height:36px;

    padding:8px 14px;

    font-size:13px;

}

.btn-lg{

    min-height:52px;

    padding:14px 26px;

    font-size:16px;

}


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

.btn-block,
.btn-100{

    width:100%;

}


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

.btn-primary{

    background:var(--btn-primary);

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

    color:#fff;

}

.btn-primary:hover{

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

    border-color:var(--btn-primary-hover);

    color:#fff;

}


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

.btn-success{

    background:var(--btn-success);

    border-color:var(--btn-success);

    color:#fff;

}

.btn-success:hover{

    background:var(--btn-success-hover);

    border-color:var(--btn-success-hover);

}


/* ===========================
   INFO
=========================== */

.btn-info{

    background:var(--btn-info);

    border-color:var(--btn-info);

    color:#fff;

}

.btn-info:hover{

    background:var(--btn-info-hover);

    border-color:var(--btn-info-hover);

}


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

.btn-warning{

    background:var(--btn-warning);

    border-color:var(--btn-warning);

    color:#fff;

}

.btn-warning:hover{

    background:var(--btn-warning-hover);

    border-color:var(--btn-warning-hover);

}


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

.btn-danger{

    background:var(--btn-danger);

    border-color:var(--btn-danger);

    color:#fff;

}

.btn-danger:hover{

    background:var(--btn-danger-hover);

    border-color:var(--btn-danger-hover);

}


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

.btn-secondary{

    background:var(--btn-secondary);

    border-color:var(--btn-secondary);

    color:#fff;

}

.btn-secondary:hover{

    background:var(--btn-secondary-hover);

    border-color:var(--btn-secondary-hover);

}


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

.btn-light{

    background:#fff;

    border-color:var(--border);

    color:var(--text);

}

.btn-light:hover{

    background:#f8fafc;

}


/* ===========================
   DARK
=========================== */

.btn-dark{

    background:#111827;

    border-color:#111827;

    color:#fff;

}

.btn-dark:hover{

    background:#1f2937;

}


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

.btn-outline-primary{

    background:transparent;

    border-color:var(--primary);

    color:var(--primary);

}

.btn-outline-primary:hover{

    background:var(--primary);

    color:#fff;

}

.btn-outline-success{

    border-color:var(--success);

    color:var(--success);

}

.btn-outline-success:hover{

    background:var(--success);

    color:#fff;

}

.btn-outline-danger{

    border-color:var(--danger);

    color:var(--danger);

}

.btn-outline-danger:hover{

    background:var(--danger);

    color:#fff;

}


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

.btn-icon{

    width:44px;

    height:44px;

    min-width:44px;

    padding:0;

    border-radius:50%;

}

.btn-icon-sm{

    width:36px;

    height:36px;

    min-width:36px;

}

.btn-icon-lg{

    width:52px;

    height:52px;

    min-width:52px;

}


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

.btn-loading{

    position:relative;

    pointer-events:none;

    opacity:.8;

}

.btn-loading::after{

    content:"";

    width:14px;

    height:14px;

    margin-left:8px;

    border:2px solid rgba(255,255,255,.35);

    border-top-color:#fff;

    border-radius:50%;

    animation:spin .8s linear infinite;

}


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

.btn-group{

    display:inline-flex;

    align-items:center;

    gap:8px;

    flex-wrap:wrap;

}


/* ===========================
   PAGE ACTION
=========================== */

.page-action{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:10px;

    flex-wrap:wrap;

}


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

@media (max-width:768px){

    .page-action{

        width:100%;

    }

    .page-action .btn{

        width:100%;

    }

    .btn{

        min-height:42px;

        font-size:13px;

    }

}

@media (max-width:576px){

    .btn{

        width:100%;

    }

}



/* ==========================================================
   TABLE ACTION BUTTONS
========================================================== */

.action-group{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    flex-wrap:nowrap;

    white-space:nowrap;

}

.action-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:36px;

    height:36px;

    min-width:36px;

    border:none;

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

    color:#fff;

    text-decoration:none;

    cursor:pointer;

    transition:all .25s ease;

}

.action-btn:hover{

    color:#fff;

    transform:translateY(-2px);

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

}

.action-btn:active{

    transform:scale(.96);

}


/* ===========================
   VIEW
=========================== */

.action-view{

    background:var(--btn-info);

}

.action-view:hover{

    background:var(--btn-info-hover);

}


/* ===========================
   EDIT
=========================== */

.action-edit{

    background:var(--btn-warning);

}

.action-edit:hover{

    background:var(--btn-warning-hover);

}


/* ===========================
   PRINT
=========================== */

.action-print{

    background:var(--btn-danger);

}

.action-print:hover{

    background:var(--btn-danger-hover);

}


/* ===========================
   DELETE
=========================== */

.action-delete{

    background:var(--btn-secondary);

}

.action-delete:hover{

    background:var(--btn-secondary-hover);

}


/* ===========================
   SMALL ACTION BUTTON
=========================== */

.action-btn-sm{

    width:30px;

    height:30px;

    min-width:30px;

    font-size:12px;

}


/* ===========================
   LARGE ACTION BUTTON
=========================== */

.action-btn-lg{

    width:42px;

    height:42px;

    min-width:42px;

    font-size:16px;

}


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

@media (max-width:768px){

    .action-group{

        gap:5px;

    }

    .action-btn{

        width:32px;

        height:32px;

        min-width:32px;

        font-size:13px;

    }

}

@media (max-width:576px){

    .action-group{

        gap:4px;

    }

    .action-btn{

        width:30px;

        height:30px;

        min-width:30px;

        font-size:12px;

    }

}