Nav Mobile

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

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

.mm-wrapper_opening {
    .mm-page {
        position: fixed;
    }
}

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

    bottom: 4rem;

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

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

        .mm-navbar__title {
            @apply hidden;
        }

        .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;
            }
        }
    }

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

        &,
        a {
            @apply text-black;
        }

        .mm-navbar__title {
            @apply font-bold;
        }

        .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 {
        @apply bg-black;

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

.extra-buttons-study {
    @apply bg-white border border-gray;
    @apply fixed bottom-16 left-0 w-screen z-10;
    @apply flex flex-row lg:hidden;

    li {
        @apply w-full;
    }

    .link {
        @apply h-16 px-6 items-center w-full;
        @apply text-black;

        span {
            @apply w-full text-center;
        }
    }

    .link.green {
        @apply bg-green;
        @apply text-white;
    }
}

nav#nav-mobile-sticky {
    @apply fixed bottom-0 left-0 w-screen z-10 bg-white h-16;
    @apply lg:hidden;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.25);

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

        .active {
            @apply text-red;
        }

        a {
            @apply inline-block h-16 text-black no-underline flex-1 pt-2;

            .icon {
                @apply block text-center mb-2 h-6;
                @apply text-lg;
            }

            .text {
                @apply block text-center overflow-hidden;
                font-size: 12px;
                line-height: 12px;
                height: 22px;
            }

            &#nav-mobile-toggle {
                @apply bg-red text-white;

                &.opened {
                    .icon {
                        &::before {
                            content: '\f00d';
                        }
                    }
                }
            }
        }
    }
}