@import "./navlink.scss";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";

.navbar {
    &.navbar-expand {
        justify-content: space-between;
        flex-wrap: wrap;
        .main-navbar {
            margin-left: auto;
        }
        &.with-search {
            .navbar-collapse {
                .main-navbar {
                    margin-left: 0;
                }
                @include media-breakpoint-up(md) {
                    flex-grow: 1;
                    flex-basis: 100%;
                    .main-navbar {
                        width: 100%;
                        & > div:nth-last-child(2) {
                            margin-left: auto;
                        }
                        & > div:nth-last-child(1) {
                            margin-left: 0;
                        }
                    }
                }
                @include media-breakpoint-up(xl) {
                    flex-grow: 0;
                    flex-basis: auto;
                }
            }
        }
    }
    &.top-navbar {
        @include media-breakpoint-up(md) {
            .navbar-nav {
                margin-left: auto;
            }
        }
    }
}

.navbar-toggler {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2300558E' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    background-color: var(--bs-white);
    border-color: var(--bs-gray-400);
    padding: 8px;
    border-radius: 4px;
}