.nav-desktop-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;

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

                .logo {
                    @apply inline-block;

                    img {
                        max-height: 115px;
                        width: auto;
                    }
                }
            }

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

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

                    span {
                        @apply mr-2;
                    }
                }
            }

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

                ul.page-nav {
                    @apply flex flex-row flex-wrap;
                    @apply text-lg font-medium leading-10;
                    @apply ml-auto;

                    > 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 left-0;
                            @apply min-w-max py-6;
                            @apply opacity-0 pointer-events-none;
                            @apply shadow-lg bg-white;

                            top: 30px;

                            > ul {
                                li.level-2 {
                                    @apply hover:bg-red hover:text-white;

                                    > a {
                                        @apply block px-6;
                                        @apply hover:bg-red hover:text-white;

                                        font-size: 1.125rem;
                                        line-height: 1.875rem;

                                        .icon {
                                            @apply mr-2;
                                        }
                                    }
                                }
                            }
                        }

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

    &.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: 60px;
                    }
                }
            }

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