.nav {
    @apply .bg-blue-dark .border-b .border-t .border-blue-darkest;
    height: 56px;

    & .logo {
        @apply .mr-8 .font-sans .font-thin .text-3xl .text-white .inline-block;

        & a {
            color: inherit;
            text-decoration: none;
        }

        @screen xsx {
            @apply .hidden;
        }
    }

    & .search-box {
        @apply .mr-2;

        & > .search-input {
            @apply .text-sm .p-2 .ml-8 .rounded .border .border-blue-darker .bg-neutral-50 .text-neutral-900 .w-96;
            opacity: 0.9;
            transition: ease-in-out opacity 150ms;

            &:focus {
                @apply .border-blue-darkest;
                opacity: 1;
            }

            &.has-search-results {
                @apply .border-b-0 .rounded-b-none;
                opacity: 1 !important;
            }
        }

        & .search-results {
            @apply .absolute .bg-neutral-50 .border .border-blue-darkest .border-t-0 .rounded .rounded-t-none .p-2 .ml-8 .z-50 .w-96;

            & a {
                @apply .block .no-underline .p-2 .rounded;

                &:hover {
                    @apply .bg-neutral-100;
                }
            }
        }
    }

    & .menu {
        @apply .flex .h-full .items-center;

        & > a {
            @apply .block .flex .self-stretch .items-center .no-underline .text-neutral-100 .font-light .text-sm .px-5;

            &:hover {
                @apply .bg-blue-dark;
            }
        }
    }
}

.sidenav {
    ul {
        @apply .list-reset;

        & li {
            @apply .block;

            & > a {
                transition: border-left-color 250ms linear, color 250ms linear;
                @apply .block .px-4 .py-3 .border-l-3 .border-neutral-100 .no-underline .text-neutral-400 .font-medium;

                &:hover, &.router-link-exact-active {
                    @apply .text-neutral-800;
                }

                &.router-link-exact-active {
                    @apply .border-blue .cursor-default;
                }
            }
        }
    }
}
/*
.sidenav {
    @apply .py-2;

    a {
        @apply .block .py-3 .px-6 .text-neutral-900 .no-underline .border .border-transparent;

        &:hover, &.router-link-exact-active {
            @apply .border-neutral-400 .bg-neutral-50;

            border-left: 1px solid transparent;
            border-right: 1px solid transparent;
        }

        &.router-link-exact-active + a:hover {
            border-top: 1px solid transparent;
        }
    }
}
*/