/* Overwrite btn-primary to use new theme colors */
.btn {
    --bs-btn-border-radius: 50px;
    margin: 4px;

}

.btn-primary {
    background-color: var(--bs-primary);
    color: var(--bs-btn-primary-color);
    border-color: var(--bs-primary);
    border-width: 2px !important; /* Set your desired border width */
}

.btn-secondary {
    background-color: var(--bs-secondary) !important;
    color: var(--bs-btn-secondary-color) !important;
    border-color: var(--bs-secondary) !important;
    border-width: 2px !important; /* Set your desired border width */
}
.btn-warning {
    background-color: var(--bs-alert-danger-color) !important;
    color: var(--bs-btn-primary-color) !important;
    border-color: var(--bs-alert-danger-color) !important;
    border-width: 2px !important; /* Set your desired border width */
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--bs-primary-dark);
    border-color: var(--bs-primary-dark);
}
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--bs-secondary-dark) !important;
    border-color: var(--bs-secondary-dark) !important;
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--bs-primary-dark) !important;
    border-color: var(--bs-primary-light) !important; /* Change border color for active state */
}

.btn-secondary:active,
.btn-secondary.active,
.show > .btn-secondary.dropdown-toggle {
    background-color: var(--bs-secondary-dark) !important;
    border-color: var(--bs-gray-30) !important; /* Change border color for active state */
}

/* Adding extra specificity to enforce border color on active state */
.btn-primary.active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    border-color: var(--bs-primary-light) !important;
}

.btn-secondary.active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
    border-color: var(--bs-gray-30) !important;
}

.btn-primary:disabled {
    background-color: var(--bs-gray-300);
    border-color: var(--bs-gray-300);
    color: var(--bs-gray-600);
}

.btn-secondary:disabled {
    background-color: var(--bs-gray-300);
    border-color: var(--bs-gray-300);
    color: var(--bs-gray-600);
}

.btn-primary:not(:hover) {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-secondary:not(:hover) {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
}

.btn-group {
    margin: 4px;
    button {
        margin: 0;
    }
    .dropdown-menu {
        position: absolute; /* Ensure the dropdown is positioned relative to its parent */
        top: 100%;         /* Place it just below the button */
        left: 0;           /* Align it to the left of the button */
        z-index: 1000;     /* Ensure it appears above other elements */
        display: none;
        #transform: translate(0px, 0px) !important;
        /* Initially hide the dropdown */
    }

    .dropdown:hover .dropdown-menu {
        display: block !important; /* Show the dropdown when the parent is hovered */
    }
    .dropdown-menu.show {
        display: block !important;
    }

}