/* =========================================================
   THEME BUTTON STYLES
   ========================================================= */


/* =========================================================
   GOLDEN BUTTONS
   ========================================================= */

/* Golden outline button */
.theme-button-golden-hover:hover {
    border: 2px solid var(--theme-color-golden-light) !important;
}

/* Golden Linear Button */
.theme-btn-golden-linear {
    background: linear-gradient(
            to right,
            var(--theme-color-golden-default) 0%,
            var(--theme-color-golden-lighter) 50%,
            var(--theme-color-golden-default) 100%
    );
    color: var(--theme-color-blue-medium);
    padding: .5rem 1.2rem;
    font-weight: 600;
    border-radius: .25rem;
    box-shadow: none;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

.theme-btn-golden-linear:hover {
    border: 2px solid var(--theme-color-golden-light) !important;
    color: var(--theme-color-blue-default) !important;
}


/* =========================================================
   BLUE BUTTONS
   ========================================================= */

/* Blue Medium */
.theme-btn-blue-lighter,
.theme-btn-blue-medium {
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

/* Blue Lighter Bottom Border Button */
.theme-btn-border-blue-lighter {
    border: none;
    border-bottom: 5px solid #c0c1c4;
    border-radius: unset;
    --bs-btn-hover-border-color: var(--theme-scroll-active-color);
    color: var(--theme-color-blue-default);
    font-family: "Inter Regular", serif !important;
}

.theme-btn-border-blue-lighter.active {
    color: var(--theme-color-blue-default);
    border-color: var(--theme-scroll-active-color);
    font-family: "Inter Extra Bold", serif !important;
}


/* =========================================================
   BLUE LIGHTER BUTTON
   ========================================================= */

.theme-btn-blue-lighter {
    --bs-btn-color: var(--theme-color-blue-default);
    background: #E6EBF1 !important;
    --bs-btn-border-color: #E6EBF1;
    --bs-btn-hover-color: var(--theme-color-blue-lighter);
    --bs-btn-hover-bg: var(--theme-color-blue-lighter);
    --bs-btn-hover-border-color: var(--theme-color-blue-lighter);
    --bs-btn-active-color: #E6EBF1;
    --bs-btn-active-bg: var(--theme-color-blue-lighter);
    --bs-btn-active-border-color: var(--theme-color-blue-lighter);
    --bs-btn-disabled-color: var(--theme-color-blue-lighter);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--theme-color-blue-lighter);
}

.theme-btn-blue-lighter.theme-border-2 {
    border-width: 2px;
}

.theme-btn-blue-lighter .btn-arrow {
    padding: 10px 20px;
    background: #E6EBF1;
    border-radius: 6px !important;
}

.theme-btn-blue-lighter .btn-arrow.btn-sm {
    padding: 5px 10px !important;
}

.theme-btn-blue-lighter.active {
    --bs-btn-color: var(--theme-font-light-default);
    background: var(--theme-color-blue-lighter) !important;
}

.theme-btn-blue-lighter.active .btn-arrow {
    background: #193d6a;
}

/* =========================================================
   PINK LIGHTER BUTTON
   ========================================================= */

.theme-btn-pink-lighter {
    --bs-btn-color: #1A1A1A !important;
    background: var(--theme-color-pink-light) !important;
    border-color: var(--bs-white);
    --bs-btn-hover-color: var(--theme-color-pink-light);
    --bs-btn-hover-bg: var(--theme-color-pink-light);
}

.theme-btn-pink-lighter:hover {
    color: var(--theme-color-eerie-black);
}

.theme-btn-pink-medium {
    --bs-btn-color: var(--theme-color-pink-medium);
    background: var(--theme-color-pink-medium) !important;
    border-color: var(--bs-white);
    --bs-btn-hover-color: var(--theme-color-pink-medium);
    --bs-btn-hover-bg: var(--theme-color-pink-medium);
}

.theme-btn-pink-lighter.theme-border-2 {
    border-width: 2px;
}

.theme-btn-pink-lighter .btn-arrow {
    padding: 10px 20px;
    background: #E6EBF1;
    border-radius: 6px !important;
}

.theme-btn-pink-lighter .btn-arrow.btn-sm {
    padding: 5px 10px !important;
}

.theme-btn-pink-lighter.active {
    --bs-btn-color: var(--theme-font-light-default);
    background: var(--theme-color-pink-default) !important;
    border-color: var(--bs-white);
    color: var(--bs-white);
    --bs-btn-hover-color: var(--bs-white);
}

.theme-btn-pink-lighter.active .btn-arrow {
    background: #193d6a;
}

/* =========================================================
   WHITE LIGHTER BUTTON
   ========================================================= */

.theme-btn-all-white {
    --bs-btn-color: var(--bs-white);
    background: var(--bs-white) !important;
    border-color: var(--bs-white);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-white);
    border-width: 0;
}


/* =========================================================
   DEFAULT BUTTON STYLES
   ========================================================= */

.theme-btn-blue-medium,
.theme-btn-blue-darkest,
.theme-btn-danger,
.theme-btn-slate {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: #fff;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}


.theme-btn-light-default {
    --bs-btn-bg: #E8E8E8;
    --bs-btn-border-color: #E8E8E8;
    --bs-btn-hover-bg: #E8E8E8;
    --bs-btn-hover-border-color: #E8E8E8;
    --bs-btn-active-bg: #E8E8E8;
    --bs-btn-active-border-color: #E8E8E8;
    --bs-btn-disabled-bg: #E8E8E8;
    --bs-btn-disabled-border-color: #E8E8E8;
    --bs-btn-hover-color: var(--theme-color-blue-medium) !important;
    --bs-btn-active-color: var(--theme-color-blue-medium) !important;
}

.theme-btn-light-default img.btn-arrow-right {
    align-self: center;
    width: auto;
    height: 12px;
    display: block;
}

/* Blue Medium */
.theme-btn-blue-medium {
    --bs-btn-bg: var(--theme-color-blue-medium);
    --bs-btn-border-color: var(--theme-color-blue-medium);
    --bs-btn-hover-bg: var(--theme-color-blue-medium);
    --bs-btn-hover-border-color: var(--theme-color-blue-medium);
    --bs-btn-active-bg: var(--theme-color-blue-medium);
    --bs-btn-active-border-color: var(--theme-color-blue-medium);
    --bs-btn-disabled-bg: var(--theme-color-blue-medium);
    --bs-btn-disabled-border-color: var(--theme-color-blue-medium);
}

.theme-btn-blue-medium img.btn-arrow-right {
    align-self: center;
    width: auto;
    height: 12px;
    display: block;
}

/* Blue Darkest */
.theme-btn-blue-darkest {
    --bs-btn-bg: var(--theme-color-blue-darkest);
    --bs-btn-border-color: var(--theme-color-blue-darkest);
    --bs-btn-hover-bg: var(--theme-color-blue-darkest);
    --bs-btn-hover-border-color: var(--theme-color-blue-darkest);
    --bs-btn-active-bg: var(--theme-color-blue-darkest);
    --bs-btn-active-border-color: var(--theme-color-blue-darkest);
    --bs-btn-disabled-bg: var(--theme-color-blue-darkest);
    --bs-btn-disabled-border-color: var(--theme-color-blue-darkest);
}

/* Slate */
.theme-btn-slate {
    --bs-btn-bg: #5A6E85;
    --bs-btn-border-color: #5A6E85;
    --bs-btn-hover-bg: #5A6E85;
    --bs-btn-hover-border-color: #5A6E85;
    --bs-btn-active-bg: #5A6E85;
    --bs-btn-active-border-color: #5A6E85;
    --bs-btn-disabled-bg: #5A6E85;
    --bs-btn-disabled-border-color: #5A6E85;
}


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

.theme-btn-warning-medium,
.theme-btn-amazon-yellow {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Warning Medium */
.theme-btn-warning-medium {
    --bs-btn-color: var(--theme-color-blue-medium);
    border-color: var(--theme-color-secondary-default);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: linear-gradient(
            to bottom,
            var(--theme-color-warning-light),
            var(--theme-color-warning-default)
    );
    --bs-btn-hover-border-color: var(--theme-color-blue-default);
    --bs-btn-active-color: #000;
    background-image: linear-gradient(
            to bottom,
            var(--theme-color-warning-light),
            var(--theme-color-warning-default)
    );
    --bs-btn-active-border-color: var(--theme-color-secondary-default);
    --bs-btn-disabled-color: var(--theme-color-warning-default);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--theme-color-secondary-default);
    --bs-gradient: none;
}

.theme-btn-warning-medium .btn-arrow {
    padding: 10px 20px;
    background: var(--theme-color-warning-default);
    border-radius: 6px !important;
}

.theme-btn-warning-medium img.btn-arrow-right {
    align-self: center;
    width: 12px;
    height: 10px;
    display: block;
}

@media (min-width: 992px) {
    .theme-btn-warning-medium img.btn-arrow-right {
        width: 18px;
        height: auto;
    }
}

.theme-btn-warning-medium.active {
    --bs-btn-color: var(--theme-font-light-default);
}

/* Warning Border Hover */
.theme-btn-warning-border-hover {
    border: 1px solid var(--theme-color-secondary-default);
    --bs-btn-border-color: var(--theme-color-secondary-default);
}

.theme-btn-warning-border-hover:hover {
    border-color: var(--theme-color-secondary-default);
    --bs-btn-border-color: var(--theme-color-secondary-default);
}

/* =========================================================
   Custom Gradient Warning Button
   ========================================================= */

.theme-btn-warning-gradient {
    color: #212529;
    background-image: linear-gradient(to bottom, #F6DDA0 0%, #F0C14C 100%);
    border: 1px solid #E0B23E;
    transition: all .3s ease;
}

/* Hover Effect */
.theme-btn-warning-gradient:hover {
    background-image: linear-gradient(to bottom, #F3D27F 0%, #E5B23A 100%);
    color: #212529;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

/* Active Effect */
.theme-btn-warning-gradient:active {
    transform: translateY(0);
    box-shadow: none;
}