.plone-navbar-header {
    padding: 0;

    .plone-navbar-toggle {
        display: none;
        background-color: transparent;
        border: 0 none;
        padding: 0;
        margin: 10px 0;

        &:hover,
        &:focus {
            box-shadow: none;
        }
    }

    &.empty-navigation {
        display: none;
    }
}

#portal-mainnavigation {
    @include antialias;

    .globalnavWrapper {
        @include make-container;
    }

    ul#portal-globalnav {
        @extend .list-inline;
        margin: 0;
        display: flex;
        padding: 1.2rem 0;

        > li {
            margin: 0 2%;

            &:first-child {
                margin-left: 0;
            }

            &:first-child {
                margin-left: 0;
            }

            > a {
                font-size: 1.95rem;
                font-weight: $semibold;
                display: block;
                border-bottom: 1px solid transparent;

                &:hover {
                    border-color: currentColor;
                }
            }

            a.closeMenuLink {
                display: inline-block;
            }
        }
    }

    #globalnav-close {
        display: none;

        span.sr-only {
            @include sr-only;
        }
    }
}

@media (max-width: $mobile-menu-width) {
    #portal-mainnavigation {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 0;
        max-width: 75vw;
        transition: 0.2s width ease;
        overflow: hidden;
        z-index: 500;

        &.open {
            width: 500px;

            &:before {
                content: '';
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: transparentize($color: #000000, $amount: 0.5);
            }
        }

        .container {
            padding: 0;
        }
        #portal-globalnav-wrapper {
            width: 500px;
            max-width: 75vw;
            height: 100%;
            position: relative;
            background-color: #fff;
        }
        ul#portal-globalnav {
            display: block;
            padding: 0;

            > li {
                margin: 0;
                display: block;
                padding: 0;

                + li {
                    border-top: 1px solid #ddd;
                }
                > a {
                    display: block;
                    padding: 10px 16px;
                    font-size: 1.8rem;
                }
            }
        }
        .globalnavClose {
            display: block;
            background: $brand-primary;
            height: 70px;
            width: 100%;
        }
        #globalnav-close {
            display: block;
            border: 0;
            background: transparent;
            color: #fff;
            padding: 5px 10px;
            width: 100%;
            height: 70px;
            text-align: left;
            font-size: 1.3em;

            .icon {
                border: 1px solid transparent;
                border-radius: 4px;
                padding: 3px 10px;

                &:before {
                    @include make-ita('\1f5f5');
                    vertical-align: middle;
                }
            }

            &:focus {
                .icon {
                    border-color: #fff;
                }
            }
        }
    }
}

@media (max-width: $screen-xs-max) {
    #portal-mainnavigation {
        &.open {
            width: 280px;
        }
        #portal-globalnav-wrapper {
            width: 280px;
        }
        .globalnavClose {
            height: 50px;
        }
        #globalnav-close {
            padding-top: 0;
            padding-bottom: 0;
            height: 50px;
            font-size: 1em;
        }
        ul#portal-globalnav {
            > li {
                > a {
                    font-size: 1.6rem;
                }
            }
        }
    }
}

@media (min-width: $mobile-menu-width + 1px) {
    #portal-mainnavigation {
        background-color: $brand-primary;
        color: #fff;

        ul#portal-globalnav {
            > li {
                > a {
                    color: #fff;
                }
            }
        }
    }
}
