/* =========================================================
   DISTRIHUB CUSTOM BUTTONS
   Prefix: dh-btn-
   Bootstrap 4 SAFE
========================================================= */


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

[class^="dh-btn-"],
[class*=" dh-btn-"] {
    font-weight: 500;
    transition: all .2s ease;
}


/* =========================================================
   SOLID BUTTONS
========================================================= */

.dh-btn-primary {
    color: #fff;
    background-color: #6366f1;
    border: 1px solid #6366f1;
}

.dh-btn-success {
    color: #fff;
    background-color: #15803d;
    border: 1px solid #15803d;
}

.dh-btn-danger {
    color: #fff;
    background-color: #dc2626;
    border: 1px solid #dc2626;
}

.dh-btn-warning {
    color: #422006;
    background-color: #f59e0b;
    border: 1px solid #f59e0b;
}

.dh-btn-info {
    color: #fff;
    background-color: #0369a1;
    border: 1px solid #0369a1;
}

.dh-btn-secondary {
    color: #fff;
    background-color: #64748b;
    border: 1px solid #64748b;
}

.dh-btn-navy {
    color: #fff;
    background-color: #0f172a;
    border: 1px solid #0f172a;
}

.dh-btn-blue {
    color: #fff;
    background-color: #1d4ed8;
    border: 1px solid #1d4ed8;
}

.dh-btn-maroon {
    color: #fff;
    background-color: #9f1239;
    border: 1px solid #9f1239;
}

.dh-btn-yellow {
    color: #422006;
    background-color: #eab308;
    border: 1px solid #eab308;
}

.dh-btn-blue-gray {
    color: #fff;
    background-color: #526d82;
    border: 1px solid #526d82;
}


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

.dh-btn-outline-primary {
    color: #6366f1;
    background: transparent;
    border: 1px solid #6366f1;
}

.dh-btn-outline-success {
    color: #15803d;
    background: transparent;
    border: 1px solid #15803d;
}

.dh-btn-outline-danger {
    color: #dc2626;
    background: transparent;
    border: 1px solid #dc2626;
}

.dh-btn-outline-warning {
    color: #d97706;
    background: transparent;
    border: 1px solid #d97706;
}

.dh-btn-outline-info {
    color: #0369a1;
    background: transparent;
    border: 1px solid #0369a1;
}

.dh-btn-outline-secondary {
    color: #64748b;
    background: transparent;
    border: 1px solid #64748b;
}

.dh-btn-outline-navy {
    color: #0f172a;
    background: transparent;
    border: 1px solid #0f172a;
}

.dh-btn-outline-blue {
    color: #1d4ed8;
    background: transparent;
    border: 1px solid #1d4ed8;
}

.dh-btn-outline-maroon {
    color: #9f1239;
    background: transparent;
    border: 1px solid #9f1239;
}

.dh-btn-outline-yellow {
    color: #b45309;
    background: transparent;
    border: 1px solid #eab308;
}

.dh-btn-outline-blue-gray {
    color: #526d82;
    background: transparent;
    border: 1px solid #526d82;
}


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

.dh-btn-outline-primary:hover {
    color: #fff;
    background: #6366f1;
}

.dh-btn-outline-success:hover {
    color: #fff;
    background: #15803d;
}

.dh-btn-outline-danger:hover {
    color: #fff;
    background: #dc2626;
}

.dh-btn-outline-warning:hover {
    color: #422006;
    background: #f59e0b;
}

.dh-btn-outline-info:hover {
    color: #fff;
    background: #0369a1;
}

.dh-btn-outline-secondary:hover {
    color: #fff;
    background: #64748b;
}

.dh-btn-outline-navy:hover {
    color: #fff;
    background: #0f172a;
}

.dh-btn-outline-blue:hover {
    color: #fff;
    background: #1d4ed8;
}

.dh-btn-outline-maroon:hover {
    color: #fff;
    background: #9f1239;
}

.dh-btn-outline-yellow:hover {
    color: #422006;
    background: #eab308;
}

.dh-btn-outline-blue-gray:hover {
    color: #fff;
    background: #526d82;
}


/* =========================================================
   GRADIENT BUTTONS
========================================================= */

.dh-btn-gradient-primary {
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #4338ca);
    border: 1px solid #4338ca;
}

.dh-btn-gradient-success {
    color: #fff;
    background: linear-gradient(135deg, #34d399, #15803d);
    border: 1px solid #15803d;
}

.dh-btn-gradient-danger {
    color: #fff;
    background: linear-gradient(135deg, #fb7185, #be123c);
    border: 1px solid #be123c;
}

.dh-btn-gradient-warning {
    color: #422006;
    background: linear-gradient(135deg, #fbbf24, #d97706);
    border: 1px solid #d97706;
}

.dh-btn-gradient-info {
    color: #fff;
    background: linear-gradient(135deg, #38bdf8, #0369a1);
    border: 1px solid #0369a1;
}

.dh-btn-gradient-secondary {
    color: #fff;
    background: linear-gradient(135deg, #94a3b8, #475569);
    border: 1px solid #475569;
}

.dh-btn-gradient-navy {
    color: #fff;
    background: linear-gradient(135deg, #1e293b, #020617);
    border: 1px solid #020617;
}

.dh-btn-gradient-blue {
    color: #fff;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border: 1px solid #1d4ed8;
}

.dh-btn-gradient-maroon {
    color: #fff;
    background: linear-gradient(135deg, #f43f5e, #9f1239);
    border: 1px solid #9f1239;
}

.dh-btn-gradient-yellow {
    color: #422006;
    background: linear-gradient(135deg, #fde047, #eab308);
    border: 1px solid #eab308;
}

.dh-btn-gradient-blue-gray {
    color: #fff;
    background: linear-gradient(135deg, #94a3b8, #526d82);
    border: 1px solid #526d82;
}


/* =========================================================
   DISTRIHUB BRAND
========================================================= */

.dh-btn-distrihub {
    color: #fff;
    background: linear-gradient(
        90deg,
        #1769e0 0%,
        #173f7a 100%
    ) !important;
    border: 1px solid #0b2a5b;
}

.dh-btn-outline-distrihub {
    color: #9c27b0;
    background: transparent;
    border: 1px solid #9c27b0;
}

.dh-btn-outline-distrihub:hover {
    color: #fff;
    background: linear-gradient(
        90deg,
        #e91e63,
        #9c27b0,
        #3157f5
    );
}


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

[class^="dh-btn-"]:hover,
[class*=" dh-btn-"]:hover {
    filter: brightness(1.06);
}

[class^="dh-btn-gradient-"],
[class*=" dh-btn-gradient-"],
.dh-btn-distrihub {
    transition: all .2s ease;
}

[class^="dh-btn-gradient-"]:hover,
[class*=" dh-btn-gradient-"]:hover,
.dh-btn-distrihub:hover {
    transform: translateY(-1px);
}