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

    & > .logo {
        @apply .mx-8 .font-sans .font-thin .text-3xl .text-white .inline-block .pt-2;

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

        @screen xsx {
            @apply .hidden
        }
    }

    & > .menu {
        & > ul {
            @apply .list-reset;
            & > li {
                @apply .inline-block;
                & > a {
                    @apply .block .h-full .no-underline .text-grey-lighter .font-light .text-sm .p-5;

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

        @screen xsx {
            @apply .w-full .text-center;
        }

        @screen sm {
            @apply .float-right .mx-8 .inline-block;
        }
    }
}

.sidenav {
    @apply .py-2;

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

        &:hover, &.router-link-exact-active {
            @apply .border-grey-light .bg-grey-lightest;

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

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