.nav-desktop-intranet-wrapper {
    @apply bg-white transform-gpu transition-all;
    @apply border-b border-solid border-gray;
    @apply hidden lg:block fixed top-0 left-0 w-full;
    z-index: 150;
    height: 180px;

    /**/

    .deskop-nav-intranet-dropbtn {
        padding: 8px;
        border: none;
        cursor: pointer;
    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        @apply shadow-lg;
        display: none;
        position: absolute;
        right: 0;
        background-color: white;
        min-width: 160px;
        overflow: auto;
        z-index: 1;
    }

    .dropdown-content button,.dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown a:hover {
        background-color: white;
    }

    .show {
        display: block;
    }

    /**/

    .widelogo {
        max-height: 98px;
    }

    .nav-desktop {
        @apply flex flex-col justify-center h-full;

        .nav-wrapper {
            @apply grid;
            grid-template-columns: fit-content(350px) 1fr;
            grid-template-rows: fit-content(100px) 1fr;
            grid-template-areas:
                'logo type-utils'
                'logo main';

            .logo-wrapper {
                grid-area: logo;
                margin-right: 2rem;
                display: flex;
                flex-flow: column;
                justify-content: flex-end;
                height: 100%;

                .logo {
                    @apply inline-block;
                    max-height: 98px;

                    img {
                        width: auto;
                        height: 100%;
                    }
                }
            }

            .type-utils-wrapper {
                @apply flex;
                grid-area: type-utils;

                ul.type-nav,
                ul.util-nav {
                    @apply flex flex-nowrap;
                    @apply text-md font-normal;

                    li {
                        + li {
                            @apply ml-4;
                        }

                        &.active {
                            a {
                                @apply text-red;
                            }
                        }

                        .link {
                            @apply text-black hover:text-red;
                        }
                    }
                }

                ul.util-nav {
                    margin-left: auto;
                }

                .util-nav-li {
                    display: flex;
                    align-items: center;
                }

                .util-nav-tag {
                    margin-left: 8px;
                }

                ul.type-nav li {
                    @apply flex;
                    @apply items-center;

                    span {
                        @apply mr-2;
                    }
                }
            }

            .main-wrapper {
                @apply flex items-center mt-8;
                grid-area: main;

                .page-nav-side {
                    display: flex;
                    align-items: center;

                    .page-nav-side-avatar,
                    .page-nav-side-bell {
                        margin-left: 20px;
                    }
                }

                ul.page-nav {
                    @apply flex flex-row flex-wrap;
                    @apply ml-auto;

                    .page-nav-label {
                        @apply text-lg font-medium leading-10;
                    }

                    > li.level-1 {
                        @apply relative;

                        &.active {
                            a {
                                @apply text-red;
                            }
                        }

                        .page-nav-checkbox {
                            @apply hidden;
                        }

                        .page-nav-label {
                            @apply px-4 py-3 cursor-pointer hover:text-red;
                        }

                        > a {
                            @apply mx-4 py-3 hover:text-red;
                        }

                        .page-nav-sub {
                            @apply absolute z-10;
                            @apply opacity-0 pointer-events-none;
                            @apply shadow-lg bg-white;

                            left: 0;
                            top: 50px;
                        }

                        .page-nav-checkbox:checked {
                            ~ .page-nav-label {
                                @apply text-red shadow-md;
                            }

                            ~ .page-nav-sub {
                                @apply opacity-100 pointer-events-auto;
                            }
                        }
                    }
                }

                .search-field .form-input {
                    @apply w-24 xl:w-60;

                    border: none;
                }
            }
        }
    }

    &.headroom--unpinned.headroom--not-top {
        transform: translateY(-300%);
    }

    &.headroom--not-top {
        transform: translateY(0%);
        height: 80px;
        @apply shadow-lg;

        .nav-wrapper {
            @apply items-center;

            .logo-wrapper {
                .logo {
                    img {
                        max-height: 98px;
                    }
                }
            }

            .type-utils-wrapper {
                @apply hidden;
            }

            .main-wrapper {
                @apply mt-0;
            }
        }
    }
}

.nav-desktop-mobile {
    @apply lg:hidden bg-white flex items-center justify-between p-4;

    .mobile-logo {
        @apply inline-block my-2;
        height: 50px;

        > img {
            height: 100%;
            width: auto;
        }
    }
}