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


/* ===========================
   ACTION GROUP
=========================== */

.action-group{

    display:flex;
    align-items:center;
    justify-content:flex-center;
    gap:8px;

}


/* ===========================
   BASE ACTION
=========================== */

.action-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    width:38px;

    height:38px;

    border:none;

    border-radius:10px;

    color:#fff;

    font-size:14px;

    text-decoration:none;

    cursor:pointer;

    transition:var(--transition);

    box-shadow:0 4px 10px rgba(15,23,42,.08);

}

.action-btn:hover{

    transform:translateY(-2px);

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

    color:#fff;

}

.action-btn:active{

    transform:scale(.96);

}

/* ==========================================================
   ACTION STATUS BUTTON
========================================================== */

.action-status{

    color:var(--status-color);

    background:var(--status-active-bg);

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

}

.action-status:hover{

    color:var(--status-hover-color);

    background:var(--status-hover-bg);

    border-color:var(--status-hover-border);

}

.action-status .fa-toggle-on{

    color:#198754;

}

.action-status .fa-toggle-off{

    color:#6c757d;

}

.action-status:hover .fa-toggle-on,

.action-status:hover .fa-toggle-off{

    color:inherit;

}


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

.action-btn-lg{

    width:auto;

    min-width:44px;

    height:42px;

    padding:0 14px;

    border-radius:10px;

}


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

.action-btn-sm{

    width:32px;

    height:32px;

    font-size:12px;

}


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

.action-view{

    background:var(--action-view);

}

.action-view:hover{

    background:var(--action-view-hover);

}


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

.action-edit{

    background:var(--action-edit);

}

.action-edit:hover{

    background:var(--action-edit-hover);

}


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

.action-delete{

    background:var(--action-delete);

}

.action-delete:hover{

    background:var(--action-delete-hover);

}


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

.action-print{

    background:var(--action-print);

}

.action-print:hover{

    background:var(--action-print-hover);

}


/* ===========================
   DOWNLOAD
=========================== */

.action-download{

    background:var(--action-download);

}

.action-download:hover{

    background:var(--action-download-hover);

}


/* ===========================
   APPROVE
=========================== */

.action-approve{

    background:#16a34a;

}

.action-approve:hover{

    background:#15803d;

}


/* ===========================
   REJECT
=========================== */

.action-reject{

    background:#dc2626;

}

.action-reject:hover{

    background:#b91c1c;

}


/* ===========================
   RESTORE
=========================== */

.action-restore{

    background:#0891b2;

}

.action-restore:hover{

    background:#0e7490;

}


/* ===========================
   LOCK
=========================== */

.action-lock{

    background:#475569;

}

.action-lock:hover{

    background:#334155;

}


/* ===========================
   UNLOCK
=========================== */

.action-unlock{

    background:#22c55e;

}

.action-unlock:hover{

    background:#16a34a;

}


/* ===========================
   COPY
=========================== */

.action-copy{

    background:#6366f1;

}

.action-copy:hover{

    background:#4f46e5;

}


/* ===========================
   EMAIL
=========================== */

.action-email{

    background:#2563eb;

}

.action-email:hover{

    background:#1d4ed8;

}


/* ===========================
   PHONE
=========================== */

.action-phone{

    background:#059669;

}

.action-phone:hover{

    background:#047857;

}


/* ===========================
   SHARE
=========================== */

.action-share{

    background:#ea580c;

}

.action-share:hover{

    background:#c2410c;

}


/* ===========================
   TOOLTIP
=========================== */

.action-btn[title]{

    position:relative;

}


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

.action-outline{

    background:#fff;

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

    color:var(--text);

}

.action-outline:hover{

    background:var(--primary);

    border-color:var(--primary);

    color:#fff;

}


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

.action-btn:disabled,
.action-btn.disabled{

    opacity:.5;

    pointer-events:none;

}


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

@media(max-width:768px){

    .action-group{

        gap:6px;

    }

    .action-btn{

        width:34px;

        height:34px;

        font-size:13px;

    }

    .action-btn-lg{

        height:38px;

        padding:0 12px;

    }

}

@media(max-width:576px){

    .action-group{

        justify-content:flex-start;

    }

    .action-btn{

        width:32px;

        height:32px;

        font-size:12px;

    }

}