nav#nav-mobile-intranet:not(.mm-menu) {
    display: none;
}

nav#nav-mobile-intranet {
    @apply lg:hidden;
}

nav#nav-mobile-intranet.mm-menu {
    --mm-color-background: #e03131;
    --mm-color-background-emphasis: #e03131;
    --mm-color-text: #ffffff;

    top: 88px;

    .mm-panels {
        @apply bg-red;
        @apply text-intro;

        #mm-0 {
            .mm-navbar {
                @apply hidden !important;
            }
        }

        .mobile-language {
            @apply mt-5;
            @apply text-md;
            @apply pl-4;
            @apply flex;
            @apply flex-row;

            li {
                &:first-child:after {
                    content: '-';
                    @apply ml-1;
                }

                @apply mr-2;
            }

            .active {
                @apply font-bold;
            }
        }

        .mobile-utils {
            @apply mt-5;
            @apply text-md;
            @apply pl-4;
            @apply flex;
            @apply flex-col;

            li {
                @apply border-0;
            }
        }

        .mobile-social {
            @apply mt-5;
            @apply text-md;
            @apply pl-4;
            @apply flex;
            @apply flex-row;
            @apply border-0;

            li {
                @apply border-0;
            }
        }
    }

    .footer-link {
        border: none;
        margin-top: 16px;
        text-decoration: underline;
    }

    .mm-navbar {
        @apply bg-red;
        @apply border-0;

        &,
        a {
            @apply text-white;
        }

        .mm-btn_prev {
            &::before {
                @apply border-black;
            }
        }

        .mm-btn_next {
            @apply border-none;
            @apply bg-black;

            &::after {
                @apply border-black;
            }
        }
    }

    .mm-navbar.mm-navbar_sticky {
        --mm-navbar-size: 0;
    }

    .mm-btn.mm-navbar__btn:empty {
        @apply hidden;
    }

    .mm-btn.mm-btn_prev {
        &::before {
            @apply border-white;
            @apply left-4;
        }
    }

    .mm-btn.mm-btn_next {
        @apply border-none;

        &::after {
            @apply border-white;
        }
    }

    .mm-listitem {
        @apply border-b;
        @apply border-red-400;

        .mm-listitem__text {
            @apply px-3;
            @apply py-2;
        }

        .icon {
            @apply mr-2;
        }

        &::after {
            border: none;
        }
    }

    .mobile-language.mm-listitem,
    .mobile-utils.mm-listitem {
        @apply border-0;
    }

    .mm-navbars_top {
        &::before {
            content: '';
            @apply block bg-white;
        }

        .mm-navbar {
            @apply bg-white;

            .mm-navbar__searchfield {
                @apply p-0 min-h-0;

                .mm-searchfield {
                    ::-webkit-input-placeholder {
                        @apply italic text-black;
                    }

                    :-ms-input-placeholder {
                        @apply italic text-black;
                    }

                    ::placeholder {
                        @apply italic text-black;
                    }

                    .mm-searchfield__input {
                        input {
                            @apply bg-white text-black;
                        }
                    }
                }
            }
        }
    }

    .mm-searchfield__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 44px;

        &::after {
            content: '\f002';
            font-family: 'Font Awesome 5 Pro';
            @apply border-0 text-white transform-none;

            position: relative;
            top: auto;
            right: auto;
            bottom: auto;
            left: auto;
            width: auto;
            height: auto;
        }
    }
}

nav#nav-mobile-intranet-sticky {
    @apply fixed top-0 left-0 w-screen z-10 bg-white;
    @apply lg:hidden;

    padding: 12px 24px;

    .nav-mobile-logo {
        display: flex;
        width: 113px;
        height: auto;

        img {
            width: 100%;
            height: auto;
            max-width: none;
        }
    }

    .nav-mobile-intranet-sticky-inner {
        @apply flex;

        justify-content: space-between;
    }

    .nav-mobile-intranet-toggle {
        @apply flex items-center h-16 text-black no-underline p-1;

        .icon {
            @apply block text-center;
            @apply text-lg;
        }

        &#nav-mobile-intranet-toggle {
            &.opened {
                .icon {
                    &::before {
                        content: '\f00d';
                    }
                }
            }
        }
    }
}