.navbar {
    @apply bg-transparent md:h-20 items-center flex py-4 px-4 md:space-x-4 mx-auto max-w-7xl text-gray-900 z-10;
    &--light {
        @apply text-white;
        .navbar__item{
            @apply text-white;
        }
    }
    &__logo{
        @apply hidden md:flex items-center justify-center flex-shrink-0;
    }
    &__burger{
        @apply md:hidden flex items-center justify-between w-full;
        svg:hover{
            @apply cursor-pointer sui-color-primary;
        }
    }
    &__company{
        @apply font-bold;
    }
    &__list{
        @apply hidden md:flex w-full;
        &--left{
            @apply justify-start;
        }
        &--center{
            @apply justify-center flex-grow-0;
        }
        &--right{
            @apply justify-end;
        }
    }
    &__item{
        @apply px-4 py-2 text-gray-800 font-bold;
        &:hover{
            @apply cursor-pointer bg-opacity-10 bg-gray-800 rounded-md;
        }
    }
}