.nav {
    @apply .fixed .w-full .bg-blue .font-sans .border-b .border-t .border-blue-darker .px-2 .text-sm .z-50 .flex;
    height: 56px;
    line-height: 54px;

    @screen md {
        @apply .px-6;

        .logo-container {
            @apply .flex-shrink-0;
            width: 18.5rem; /* sidebar is 20rem + 1.5rem padding on each side for nav */
        }

        .home-link {
            .site-name {
                @apply .pl-2 .text-2xl;
            }
        }
    }

    .sidebar-button {
        @apply .p-3;

        .icon {
            @apply .text-white .block;
            height: 1.8rem;
        }
    }

    .home-link {
        @apply .text-white .font-light;

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

        .logo {
            @apply .hidden;
        }

        @screen md {
            .logo {
                @apply .w-12 .float-left .block;
            }
        }
    }

    .search-box {
        @apply .relative .pr-4 .w-full .text-right .flex-1;

        input {
            transition: all 200ms ease-in;
            @apply .text-grey-lighter .w-1/2 .outline-none .px-4 .py-2 .rounded .leading-tight;
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(0, 0, 0, 0.3);

            &:active, &:focus {
                @apply .w-2/3;
                transition: all 200ms ease-in;
                background: rgba(0, 0, 0, 0.3);
                border: 1px solid rgba(0, 0, 0, 0.7)
            }
        }

        @screen smx {
            @apply .pr-0 .pl-6;

            input {
                &:active, &:focus {
                    @apply .w-full;
                }
            }
        }

        .suggestion-container {
            @apply .w-full;

            .suggestions {
                @apply .bg-white .rounded .border .p-2 .text-left .inline-block .w-2/3;
                left: 0;
                margin-top: -0.3rem;
                list-style: none;

                & > li > a {
                    @apply .p-2 .block;

                    &:hover {
                        @apply .rounded .bg-grey-lighter .no-underline .text-blue-dark;

                        & > .header {
                            @apply .text-grey-dark;
                        }
                    }

                    & > .header {
                        @apply .text-grey .font-normal .pl-1;
                        font-size: 0.9em;
                    }
                }
            }

            @screen smx {
                @apply .fixed .z-50 .h-full;
                background: rgba(0, 0, 0, 0.7);
                left: 0;

                .suggestions {
                    @apply .w-full .fixed .rounded-none .mt-0;
                }
            }

            @screen md {
                .suggestion-padding {
                    @apply .w-1/3;
                }
            }
        }
    }

    .nav-links {
        @apply .flex-initial;

        .nav-link {
            @apply .text-grey-lighter .ml-6 .font-normal;

            &:hover {
                @apply .no-underline .border-b-2 .border-grey-lighter .pb-1 .leading-normal;
            }
        }

        @screen md {
            .nav-item > a:not(.external).router-link-active {
                @apply .border-b-2 .border-grey-lighter .pb-1 .leading-normal;

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