@mixin default {
    .nav-link {
        padding-top: 0.125em;
        padding-bottom: 0.125em;
        text-decoration: none !important;
        &.disabled {
            color: var(--bs-gray-500);
        }
        &:hover {
            background-color: unset;
        }
        &.active {
            background-color: var(--bs-secondary);
            border-radius: 0.25rem;
        }
        &.show {
            color: var(--bs-white);
        }
    }
}

@mixin dropdown {
    a.dropdown-item,
    a.nav-item,
    a.nav-link {
        --bs-dropdown-link-color: var(--bs-primary);
        --bs-dropdown-link-active-color: var(--bs-secondary);
        --bs-dropdown-link-active-bg: var(--bs-white);
        --bs-dropdown-link-hover-color: var(--bs-primary-dark);
        --bs-dropdown-link-hover-bg: var(--bs-gray-100);
    }
}

.navbar {
    @include default;

    .dropdown-menu {
        @include dropdown;
    }

    .collapse.show {
        @include default;
    }

    .collapsing {
        @include default;
    }

    .navbar-nav {
        --bs-navbar-active-color: var(--bs-gray-200);
        --bs-navbar-hover-color: var(--bs-secondary);
        --bs-navbar-color: var(--bs-gray-200);
    }
}