/*
 * Bootstrap places a menu under its toggle through ".dropdown-menu[data-bs-popper]", an attribute
 * its own javascript adds. That javascript is not loaded here (see cibor-common.js), so the menu
 * keeps the spot it would have had in the flow. Inside a "dropdown" block that spot is the line
 * below the toggle, which is why those menus look right; inside a flex parent such as a btn-group
 * it is the corner of that parent, so the menu covers the button instead.
 */
.btn-group > .dropdown-menu:not([data-bs-popper]) {
    top: 100%;
    left: 0;
}

.dropdown {
    &.dropdown-btn-themed-items {
        color: var(--text-color, white);
        .dropdown-item {
            padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
            &:focus,
            &:hover {
                color: var(--text-color-hover, var(--text-color));
                background-color: var(--background-color-hover, var(--background-color));
            }
        }
    }
}