.btn-base {
    color: white;
    background-color: var(--main-color);
    border-color: var(--main-color);
}

    .btn-base:hover {
        color: white;
        background-color: var(--thin-color);
        border-color: var(--thin-color);
    }

    .btn-base:active {
        color: white;
        background-color: var(--accent-color);
        border-color: var(--accent-color);
    }

    .btn-base:focus, .btn-base.focus {
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
    }

    .btn-base.disabled, .btn-base:disabled {
        color: var(--main-color);
        background-color: transparent;
    }

    .btn-base:not(:disabled):not(.disabled):active, .btn-base:not(:disabled):not(.disabled).active,
    .show > .btn-base.dropdown-toggle {
        color:white;
        background-color: var(--accent-color);
        border-color: var(--accent-color);
    }

        .btn-base:not(:disabled):not(.disabled):active:focus, .btn-base:not(:disabled):not(.disabled).active:focus,
        .show > .btn-base.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
        }


.btn-outline-theme {
    color: var(--main-color);
    border-color: var(--main-color);
}

    .btn-outline-theme:hover {
        color: white;
        background-color: var(--thin-color);
        border-color: var(--main-color);
    }

    .btn-outline-theme:hover > i {
        color: white;
    }

    .btn-outline-theme:focus, .btn-outline-theme.focus {
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
    }

    .btn-outline-theme.disabled, .btn-outline-theme:disabled {
        color: var(--main-color);
        background-color: transparent;
    }

    .btn-outline-theme:not(:disabled):not(.disabled):active, .btn-outline-theme:not(:disabled):not(.disabled).active,
    .show > .btn-outline-theme.dropdown-toggle, .btn-outline-theme:not(:disabled):not(.disabled).active > i {
        color: white;
        background-color: var(--main-color);
        border-color: var(--main-color);
    }

        .btn-outline-theme:not(:disabled):not(.disabled):active:focus, .btn-outline-theme:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-theme.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
        }

    .btn-check:checked + .btn-outline-theme, .btn-outline-theme.active, .btn-outline-theme.dropdown-toggle.show, .btn-outline-theme:active {
        color: white;
        background-color: var(--main-color);
        border-color: var(--main-color);
    }

.btn-accent {
    color: white;
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

    .btn-accent:hover {
        color: white;
        background-color: var(--thin-color);
        border-color: var(--thin-color);
    }

    .btn-base:active {
        color: white;
        background-color: var(--accent-color);
        border-color: var(--accent-color);
    }

    .btn-base:focus, .btn-base.focus {
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
    }