@use "breakpoints" as bp;

.navbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
}

.navbar-toggle {
    display: none;
    padding: 0.25rem 0.5rem;
    font-size: 1.25rem;
    line-height: 1;
    color: inherit;
    background-color: transparent;
    border: 1px solid var(--val-color--border);
    border-radius: 0.375rem;
    cursor: pointer;
}
.navbar-toggle::before {
    content: "\2630";
}

// Pushes the toggle (`BrandLeft`) or the brand (`BrandRight`) to the far end of the bar.
.brand ~ .navbar-toggle,
.navbar-toggle ~ .brand {
    margin-inline-start: auto;
}

.navbar-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 auto;
}
// A bar without a toggle button never stacks its `.nav` items in a column, so they wrap onto
// another line when they don't fit instead of overflowing the bar.
.navbar-content .nav {
    flex-wrap: wrap;
}

.navbar-text {
    color: var(--val-color--text--muted);
}

// Navbar position, from the `navbar::Position` classes. `.navbar` has no background of its own, so
// a bar taken out of the flow (fixed) or pinned while scrolling (sticky) gets one, or the content
// passing underneath would show through.
.navbar.fixed-top,
.navbar.fixed-bottom,
.navbar.sticky-top,
.navbar.sticky-bottom {
    background-color: var(--val-color--bg);
}
.navbar.fixed-top,
.navbar.fixed-bottom {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
}
.navbar.fixed-top {
    top: 0;
}
.navbar.fixed-bottom {
    bottom: 0;
}
.navbar.sticky-top,
.navbar.sticky-bottom {
    position: sticky;
    z-index: 1020;
}
.navbar.sticky-top {
    top: 0;
}
.navbar.sticky-bottom {
    bottom: 0;
}

// A navbar with a toggle button collapses below the breakpoint set by its `navbar-expand-{name}`
// class, added by the `Navbar` component. `navbar-expand` alone (a breakpoint with no minimum
// width) never collapses and needs no rules, since the base rules above are the expanded layout.
//
// While collapsed, the `.nav` items are stacked in a column, so a dropdown menu inside it is laid
// out in the flow (`position: static`) to push down the following items instead of covering them.
// A navbar without a toggle button has nothing to collapse: its `.nav` items stay in a row.
@each $name, $width in bp.$breakpoints {
    @media (width < $width) {
        .navbar-expand-#{$name} {
            flex-wrap: wrap;
        }
        .navbar-expand-#{$name}:has(.navbar-toggle) {
            .navbar-toggle {
                display: inline-block;
            }
            .navbar-content {
                order: 1;
                display: none;
                flex-direction: column;
                align-items: stretch;
                width: 100%;
            }
            .navbar-content.show {
                display: flex;
            }
            .nav {
                flex-direction: column;
                align-items: stretch;
                width: 100%;
            }
            .nav .dropdown-menu {
                position: static;
                box-shadow: none;
            }
        }
    }
}