.nav {
    @apply .w-full;
}

.nav-item {
    @apply .flex;
    @apply .items-center;
    @apply .-mx-4;
    @apply .p-4;
}

.nav-item:first-child {
    @apply .border-t .border-grey-lighter;
}

@screen sm {
    .nav {
        @apply .flex-wrap .justify-end;
    }

    .nav-item {
        @apply .border-b-3;
        @apply .border-transparent;
        @apply .ml-4;
        @apply .mr-0;
        @apply .p-0;
    }

    .nav-item:first-child {
        @apply .border-t-0 .border-transparent;
    }

    .nav-item--active,
    .nav-item--active.nav-item:first-child {
        @apply .bg-transparent .border-blue;
    }
}

@screen md {
    .nav {
       @apply .w-2/3; 
    }
}

@screen lg {
    .nav {
        @apply .w-3/4;
    }
}