@charset "utf-8";

@include desktop {
    .mobile-menu {
        display: none;
    }
}

@include touch {
    .mobile-menu {
        display: flex;
        flex-direction: revert;
        align-items: center;
        height: $navbar-height;
        background: $white-ter;
        position: sticky;
        top: $computed-navbar-height;
        z-index: 1;
        overflow-x: auto;

        .menu-trigger {
            @include hamburger($navbar-height);

            .icon {
                margin-right: 0;
            }
        }

        .breadcrumb {
            // Prevent the breadcrumb from being wrapped on small screens
            //
            flex-shrink: 0;
            ul {
                margin-left: 0;
                margin-top: 0;
            }

            li {
                height: $navbar-height;
            }
        }

        .breadcrumb>ul>li:last-child {
            font-weight: $weight-bold;
        }
    }
}