.inpage-nav {
    @apply w-full pb-20 relative overflow-hidden z-10 hidden lg:block;

    &::after {
        @apply absolute hidden lg:block;
        content: url(/assets/img/down-arrow-small-white.svg);
        width: 18px;
        height: 126px;
        left: 60px;
        bottom: 0;
        z-index: -1;
    }

    @media only screen and (max-height: 575px) {
        display: none;
    }

    > span {
        @apply text-h4 block p-4 bg-white pr-3;
    }

    .inpage-nav-inner {
        @apply bg-red p-4;

        > ul {
            @apply text-h4;

            li {
                @apply py-2;

                .link {
                    @apply text-white no-underline hover:underline;
                }

                &.active .link {
                    @apply underline;
                }
            }
        }

        > .button {
            @apply block mt-4 w-full text-center;
        }

        .back-button {
            @apply bg-black;
            margin: 1rem -1rem 0 -1rem;
            @apply text-md;

            a {
                @apply px-4;

                .icon {
                    @apply mr-2;

                    &:hover {
                        @apply no-underline;
                    }
                }
            }
        }
    }

    .extra-bottom-link {
        @apply mt-4 text-center;
    }

    .extra-btn-green .button {
        @apply text-center;
        @apply w-full;
        @apply mb-2;
    }
}

.inpage-nav,
.dropdown-nav {
    .wiw-nav-profile {
        @apply bg-white p-4;
        .wrap-info {
            @apply flex items-center lg:flex-col xl:flex-row gap-4 mb-4;
            word-break: break-word;

            .picture {
                @apply w-[75px] h-[75px];

                .picture-image {
                    @apply rounded-full;
                    @apply object-cover w-full h-full block min-w-[75px];
                }
            }
        }

        .button {
            @apply w-full text-center;
        }
    }

    .wiw-nav-naw {
        @apply bg-black text-white p-4;
        @apply flex flex-col;

        .copy-email {
            @apply flex gap-4 justify-between items-center;

            .button {
                @apply mb-0;
            }
        }

        .link {
            @apply text-white;

            .icon {
                @apply self-start pt-1;
            }
        }
    }

    .wiw-nav-social {
        @apply bg-white p-4;

        .linkedin {
            &::before {
                content: url(/assets/img/linkedin_icon.svg);
                @apply w-[24px] h-[24px] mr-2;
            }
        }
        .twitter {
            &::before {
                content: url(/assets/img/twitter_icon.svg);
                @apply w-[24px] h-[24px] mr-2;
            }
        }
        .orcid {
            &::before {
                content: url(/assets/img/orcid_icon.svg);
                @apply w-[24px] h-[24px] mr-2;
            }
        }
        .researcherid {
            &::before {
                content: url(/assets/img/researcherid_icon.svg);
                @apply w-[24px] h-[24px] mr-2;
            }
        }
        .researchgate {
            &::before {
                content: url(/assets/img/researchgate_icon.svg);
                @apply w-[24px] h-[24px] mr-2;
            }
        }
        .googlescholar {
            &::before {
                content: url(/assets/img/google_scholar_icon.svg);
                @apply w-[24px] h-[24px] mr-2;
            }
        }
    }
}