@import '../../../less/fonts';
@import '../../../less/mixins';
@import '../../../less/palette';
@import '../../../less/palette-brand-@{theme}';

@navbar-height: 70px;

.navbar {
    height: @navbar-height;
    background-color: @color-primary-dark;
    text-align: center;
    padding-left: 32px;
    padding-right: 32px;

    > .container {
        min-width: 320px;
        margin: 0 auto;
        position: relative;
        height: inherit;

        > .left {
            float: left;
            height: inherit;
        }

        > .right {
            float: right;
            height: inherit;
        }
    }

    // Fixed Navbar
    &.fixed {
        position: fixed;
        width: 100%;
        z-index: 1000;
    }

    .left {
        .navbar-logo {
            float: left;

            a {
                .standard-transition(opacity);
                opacity: 0.4;

                &:hover,
                &:active {
                    opacity: 1;
                }
            }
        }
    }

    a.navbar-item {
        .standard-transition(opacity);
        .uppercase;
        float: left;
        display: inline-block;
        height: @navbar-height;
        line-height: @navbar-height;
        padding: 0 18px;
        font-size: inherit;
        font-family: inherit;

        &:first-of-type {
            padding-left: 40px;
        }

        &:last-of-type {
            padding-right: 0;
        }

        &:link,
        &:visited {
            color: #fff;
            text-decoration: none;
            opacity: 0.4;
        }

        &:hover,
        &:active {
            color: #fff;
            text-decoration: none;
            opacity: 1;
        }

        &.active {
            &:link,
            &:visited,
            &:hover,
            &:active {
                opacity: 1;
            }
        }
    }

    .navbar-logo {
        float: none;
    }
}
