/*
Main navigation
==========================================
Contains the styles of the main navigation of the Shopware storefront.

The main navigation is positioned above the content section.

It contains the viewport specific styles inside media queries.
*/

.navigation-main {
    background: #fff;
    display: none;
}

@media screen and (min-width: @tabletViewportWidth) {
    .navigation-main {
        border-bottom: 1px solid @brand-primary;
        display: block;
        position: relative;

        .navigation--list {
            .clearfix();
            .unitize-padding(0, 10);
            margin: 0;
            position: relative;
            white-space: nowrap;
        }

        .navigation--entry {
            display: inline-block;
            -ms-touch-action: none;
        }

        .navigation--link {
            .transition(none);
            .unitize-padding(8, 14);
            .unitize(font-size, 16);
            .border-radius-multi(3px, 3px, 0, 0);
            margin: 0;
            display: block;
            cursor: pointer;
            color: @text-color;

            &:hover { color: @brand-primary; }
        }

        .is--active .navigation--link {
            .primary-gradient();
            font-weight: @font-bold-weight;
            color: #fff;

            &:hover { color: #fff; }
        }
    }
}

@media screen and (min-width: @desktopViewportWidth) {
    .navigation-main {
        .navigation--list {
            padding: 0;
        }
    }
}