﻿@import url('variables.css');

/* CUSTOM BUTTONS BOOTSTRAP */
.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(253, 253, 154, .25);
}

.btn:hover {
    background-color: var(--secondary-color);
    border-color: var(--tertiary-color);
}

/* BTN PRIMARY */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--btn-text-color);
    font-weight: 700;
}

    .btn-primary:hover,
    .btn-primary:focus {
        color: var(--btn-text-color);
        background-color: var(--btn-hover-bg);
        border-color: var(--btn-hover-border-color);
    }

    .btn-primary:active,
    .btn-primary.active {
        color: var(--btn-text-color);
        background-color: var(--btn-active-bg) !important;
        border-color: var(--btn-active-border-color) !important;
    }

    .btn-primary:disabled,
    .btn-primary.disabled {
        color: var(--btn-text-color);
        background-color: var(--btn-disabled-bg);
        border-color: var(--btn-disabled-border-color);
    }

    .btn-primary:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), 0.5);
    }
    .btn-primary:focus-visible {
        background-color: var(--btn-focus-visible-bg) !important;
        border-color: var(--btn-focus-visible-border-color) !important;
    }
.btn-primary:focus-visible {
    background-color: var(--btn-focus-visible-bg) !important;
    border-color: var(--btn-focus-visible-border-color) !important;
}

/* BTN OUTLINE PRIMARY*/

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    font-weight: 700;
}

.btn-outline-primary:hover {
    border: solid 1px;
}
.btn:active,
.btn.active {
    color: var(--btn-text-color);
    background-color: var(--btn-active-bg) !important;
    border-color: var(--btn-active-border-color) !important;
}

/* LINK */
.btn-link {
    text-decoration: none;
}

    .btn-link:hover {
        color: var(--tertiary-color);
        border-color: var(--tertiary-color);
    }
