@import "_global-variables.sass"
@import "_mixins.sass"

.navbar
    z-index: 1

@media all and (max-width: 991px)
    .navbar
        display: none

    .navbar-mobile
        width: 100%

        .navbar-collapse
            display: flex

        &.regular
            @include navbar-style($regular-style)
        &.outline
            @include navbar-style($outline-style)
        &.light
            @include navbar-style($light-style)

        .navbar-container
            width: 100%
            flex-direction: column !important

            &.navbar-container-mobile
                flex-direction: row !important
                width: 100%

        @include get-branch(50px)

        .navbar-dropdown
            cursor: pointer
            padding: 0

            .main-content
                padding: 10px

            ul
                padding: 0
                margin: 0
                list-style-type: none

                li
                    padding: 8px 15px
                    text-decoration: none

@media all and (min-width: 992px)
    .navbar-mobile
        display: none

    .navbar
        display: inline-flex
        width: 100%

        &.regular
            @include navbar-style($regular-style)
        &.outline
            @include navbar-style($outline-style)
        &.light
            @include navbar-style($light-style)

        .navbar-dropdown
            padding: 10px
            cursor: pointer
            position: relative

            ul
                padding: 0
                margin-top: 2px
                position: absolute
                left: 0
                top: 40px

                z-index: 1

                &.active
                    display: inherit

                &.inactive
                    display: none

            li
                display: block
                padding: 10px
                text-decoration: none

        .navbar-item, .navbar-dropdown
            align-self: center

        @include get-branch(40px)

.navbar
    &.navbar-router
        .navbar-item, .navbar-dropdown-item
            &.navbar-route
                padding: 0
                height: 100%
                a
                    text-decoration: none
                    color: inherit
                    display: block
                    height: 100%
                    padding: 10px
                    width: 100%

                    &:focus
                        outline: none

.navbar-container
    width: 100%

    &.navbar-container-mobile
        width: auto