/*
|--------------------------------------------------------------------------
| Bootstrap 4.6 Extended Buttons
| Compatible con Bootstrap 4.6.2
|--------------------------------------------------------------------------
*/

/*****************
    VARIABLES
******************/
:root {
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;

    --blue-gray: #5c6b73;
    --slate: #6c757d;
    --emerald: #10b981;
    --mint: #34d399;
    --lime: #84cc16;
    --amber: #f59e0b;
    --deep-orange: #f97316;
    --rose: #f43f5e;
    --violet: #8b5cf6;
    --sky: #0ea5e9;
    --navy: #1e3a8a;
    --brown: #795548;
    --gold: #d4af37;
    --silver: #adb5bd;
}

/*****************
    BASE
******************/

.btnx {
    border-radius: 0.45rem;
    padding: 0.48rem 1rem;
    font-weight: 600;
    transition: 0.25s;
    box-shadow: none;
}

.btnx:hover {
    transform: translateY(-1px);
}

.btnx:focus {
    box-shadow: none;
}

/*****************
        LIGHT MODE
******************/

.btn-light-primary {
    background: #eef6ff;
    color: #0d6efd;
    border: 1px solid #cfe2ff;
}

.btn-light-primary:hover {
    background: #dcecff;
}

.btn-light-success {
    background: #edfdf4;
    color: #198754;
    border: 1px solid #c8f1d8;
}

.btn-light-success:hover {
    background: #daf8e7;
}

.btn-light-danger {
    background: #fff1f2;
    color: #dc3545;
    border: 1px solid #ffd5d8;
}

.btn-light-danger:hover {
    background: #ffe5e7;
}

.btn-light-warning {
    background: #fff9e6;
    color: #d39e00;
    border: 1px solid #ffe8a6;
}

.btn-light-warning:hover {
    background: #fff2cc;
}

.btn-light-info {
    background: #ecfbff;
    color: #17a2b8;
    border: 1px solid #c8f2fa;
}

.btn-light-info:hover {
    background: #d8f8ff;
}

/*****************
        OUTER MODE
******************/

.btn-outer-primary {
    background: #fff;
    color: #0d6efd;
    border: 2px solid #0d6efd;
}

.btn-outer-primary:hover {
    background: #0d6efd;
    color: #fff;
}

.btn-outer-success {
    background: #fff;
    color: #28a745;
    border: 2px solid #28a745;
}

.btn-outer-success:hover {
    background: #28a745;
    color: #fff;
}

.btn-outer-danger {
    background: #fff;
    color: #dc3545;
    border: 2px solid #dc3545;
}

.btn-outer-danger:hover {
    background: #dc3545;
    color: #fff;
}

.btn-outer-warning {
    background: #fff;
    color: #d39e00;
    border: 2px solid #ffc107;
}

.btn-outer-warning:hover {
    background: #ffc107;
    color: #212529;
}

.btn-outer-info {
    background: #fff;
    color: #17a2b8;
    border: 2px solid #17a2b8;
}

.btn-outer-info:hover {
    background: #17a2b8;
    color: #fff;
}

/*****************
        INNER COLOR
******************/

.btn-inner-primary {
    background: linear-gradient(90deg, #0d6efd 6px, #ffffff 6px);
    border: 1px solid #dcdcdc;
    color: #343a40;
}

.btn-inner-success {
    background: linear-gradient(90deg, #28a745 6px, #ffffff 6px);
    border: 1px solid #dcdcdc;
    color: #343a40;
}

.btn-inner-danger {
    background: linear-gradient(90deg, #dc3545 6px, #ffffff 6px);
    border: 1px solid #dcdcdc;
    color: #343a40;
}

.btn-inner-warning {
    background: linear-gradient(90deg, #ffc107 6px, #ffffff 6px);
    border: 1px solid #dcdcdc;
    color: #343a40;
}

.btn-inner-info {
    background: linear-gradient(90deg, #17a2b8 6px, #ffffff 6px);
    border: 1px solid #dcdcdc;
    color: #343a40;
}

/*****************
    PALETA EXTRA
******************/

.btn-indigo {
    background: var(--indigo);
    color: #fff;
}

.btn-purple {
    background: var(--purple);
    color: #fff;
}

.btn-pink {
    background: var(--pink);
    color: #fff;
}

.btn-orange {
    background: var(--orange);
    color: #fff;
}

.btn-teal {
    background: var(--teal);
    color: #fff;
}

.btn-cyan {
    background: var(--cyan);
    color: #fff;
}

.btn-emerald {
    background: var(--emerald);
    color: #fff;
}

.btn-mint {
    background: var(--mint);
    color: #fff;
}

.btn-lime {
    background: var(--lime);
    color: #fff;
}

.btn-amber {
    background: var(--amber);
    color: #fff;
}

.btn-rose {
    background: var(--rose);
    color: #fff;
}

.btn-violet {
    background: var(--violet);
    color: #fff;
}

.btn-sky {
    background: var(--sky);
    color: #fff;
}

.btn-navy {
    background: var(--navy);
    color: #fff;
}

.btn-brown {
    background: var(--brown);
    color: #fff;
}

.btn-gold {
    background: var(--gold);
    color: #212529;
}

.btn-silver {
    background: var(--silver);
    color: #212529;
}

/*****************
    HOVER GLOBAL
******************/
.op-70 {
    opacity: 0.7;
    box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.3);
}

.filter-75{
    filter: brightness(0.75); 
}

[class^="btn-"]:hover {
    filter: brightness(95%);
}

[class^="btn-"]:focus {
    box-shadow: none;
}