:root {
    --btn-transition-duration: 150ms;
    --btn-transition-timing-function: ease-in-out;    
}

.btn {
    background-color: var(--bg-color, transparent);
    border-color: var(--border-color, var(--bg-color, transparent));
    border-radius: 5px;
    color: var(--text-color, initial);
    font-weight: bold;
    line-height: 1.5;
    padding: 5px 25px;
    transition: color var(--btn-transition-duration) var(--btn-transition-timing-function),
                background-color var(--btn-transition-duration) var(--btn-transition-timing-function),
                border-color var(--btn-transition-duration) var(--btn-transition-timing-function),
                box-shadow var(--btn-transition-duration) var(--btn-transition-timing-function);
}
.btn[disabled], .btn.disabled {
    background-color: var(--bg-color, transparent);
    border-color: var(--border-color, var(--bg-color, transparent));
    cursor: not-allowed;
}
.btn:hover {
    background-color: var(--bg-hover-color, var(--text-color, transparent))!important;
    border-color: var(--border-hover-color, var(--text-color, transparent))!important;
    color: var(--text-hover-color, var(--bg-color, initial))!important;
}
.btn:active, .btn:focus {
    background-color: var(--bg-color, transparent);
    border-color: var(--border-focus-color, var(--border-color, var(--bg-color, transparent)));
    box-shadow: None;
    color: var(--text-color, initial);
}

.btn.btn-outline {
    background-color: var(--beep-white, transparent);
    border-color: var(--bg-color, transparent);
    color: var(--bg-color, initial);
}
.btn.btn-outline:hover {
    background-color: var(--bg-color, transparent)!important;
    border-color: var(--bg-color, transparent)!important;
    color: var(--beep-white, initial)!important;
}

.btn.btn-hover-outline:hover {
    background-color: var(--beep-white, transparent)!important;
    border-color: var(--bg-color, transparent)!important;
    color: var(--bg-color, initial)!important;
}

.btn.btn-primary {
    --bg-color: var(--beep-orange);
    --border-focus-color: var(--beep-green);
    --text-color: var(--beep-white);
}
.btn.btn-primary:hover {
    --bg-hover-color: var(--beep-green);
    --border-hover-color: var(--beep-green);
    --text-hover-color: var(--beep-white);
}

.btn.btn-primary-outline {
    --bg-color: var(--beep-white);
    --border-color: var(--beep-orange);
    --text-color: var(--beep-orange);
}
.btn.btn-primary-outline:hover {
    --bg-hover-color: var(--beep-orange);
    --border-hover-color: var(--beep-orange);
    --text-hover-color: var(--beep-white);
}

.btn.btn-white-outline {
    --bg-color: transparent;
    --border-color: var(--beep-white);
    --text-color: var(--beep-white);
}
.btn.btn-white-outline:hover {
    --bg-hover-color: var(--beep-white);
    --border-hover-color: var(--beep-white);
    --text-hover-color: unset;
}

.btn-secondary {
    --bg-color: var(--beep-green);
    --text-color: var(--beep-white);
}

.btn-secondary:not([disabled]):hover {
    --bg-hover-color: var(--beep-purple);
    --border-hover-color: var(--beep-purple);
    --text-hover-color: var(--beep-white);
}

.btn.btn-secondary-outline {
    --bg-color: var(--beep-white);
    --border-color: var(--beep-green);
    --text-color: var(--beep-green);
}
.btn.btn-secondary-outline:hover {
    --bg-hover-color: var(--beep-green);
    --border-hover-color: var(--beep-green);
    --text-hover-color: var(--beep-white);
}

a.btn.btn-secondary, a.btn.btn-secondary:hover {
    color: var(--beep-white);
}

@media (max-width: 768px) {
    .buttons-menu > .btn {
        margin-bottom: 5px;
        width: 100%;
    }
}

.btn.btn-azure {
    --bg-color: var(--beep-azure);
    --text-color: var(--beep-white);
}

.btn.btn-blue {
    --bg-color: var(--beep-blue);
    --text-color: var(--beep-white);
}

.btn.btn-green {
    --bg-color: var(--beep-green);
    --text-color: var(--beep-white);
}

.btn.btn-orange {
    --bg-color: var(--beep-orange);
    --text-color: var(--beep-white);
}

.btn.btn-purple {
    --bg-color: var(--beep-purple);
    --text-color: var(--beep-white);
}

.btn.btn-red {
    --bg-color: var(--beep-red);
    --text-color: var(--beep-white);
}

.btn.btn-turquoise {
    --bg-color: var(--beep-turquoise);
    --text-color: var(--beep-white);
}

.btn.btn-white {
    --bg-color: var(--beep-white);
    --text-color: var(--beep-green);
}

.btn.btn-lightorange {
    --bg-color: var(--beep-lightorange);
    --text-color: var(--beep-white);
}

.btn.btn-lightpurple {
    --bg-color: var(--beep-lightpurple);
    --text-color: var(--beep-white);
}