@import '../common/vars.less';


/* Top Navigation
============================================================================= */
.nav-container {
    display: inline-block;
    vertical-align: middle;
    font-size: 17px;
    letter-spacing: 0.1em;
    @media @tablet {
        font-size: 13px;
    }


    /* First level
    ========================================================================= */
    li.level0 {
        float: left;
        margin: 0 0 0 28px;
        @media @tablet {
            margin: 0 0 0 17px;
        }
        &:before {
            content: '';
            float: left;
            border-left: 1px solid #000;
            height: 14px;
            margin: 22px 28px 0 0;
            .box-shadow(-1px, 0, 0, rgba(0, 0, 0, 0.3));
            @media @tablet {
                margin-right: 17px;
            }
        }
        &:first-child {
            margin: 0;
            &:before {
                display: none;
            }
        }
        > a {
            float: left;
            color: @white;
            line-height: 59px;
            position: relative;
            .transition(color 0.3s ease);
            &:after {
                -webkit-transform: rotate(135deg);
                -ms-transform: rotate(135deg);
                transform: rotate(135deg);
                -webkit-transform-origin: 100% 100%;
                -ms-transform-origin: 100% 100%;
                transform-origin: 100% 100%;
                position: absolute;
                content: '';
                display: none;
                background: @mainColorScheme;
                bottom: 0;
                left: 50%;
                margin-left: -26px;
                width: 16px;
                height: 16px;
            }
            &:hover {color: @mainColorScheme;}
        }
        &.sale {
            a {
                color: @special;
            }
        }
        &.opened {
            > a {
                color: @mainColorScheme;
                position: relative;
                &:after {
                    display: block;
                }
            }
        }
    }
    a {
        text-decoration: none;
        &:hover {text-decoration: none;}
    }


    /* Dropdown
    ========================================================================= */
    div.level1 {
        position: absolute;
        padding: 15px 0 22px;
        left: 0;
        right: 0;
        top: 100%;
        background: @mainColorScheme;
        display: none;
        .transition-2pr(left 0.5s ease, right 0.5s ease);
        .nav-header {
            padding-bottom: 16px;
            padding-top: 7px;
            &.empty {
                padding-top: 0;
            }
        }
        .nav-header-title {
            text-align: left;
            margin: 0;
            font: @mainFontSize/1 @fontBody;
            color: @buttonHoverBg;
            text-transform: uppercase;
            @media @tablet {
                font-size: 13px;
            }
        }
        .nav-row {
            margin: auto;
            width: 793px;
            position: relative;
        }
        .nav-content {
            border-top: 1px solid @navBorderColor;
            border-bottom: 1px solid @navBorderColor;
            padding: 15px 0;
        }
        .nav-footer {
            padding-top: 22px;
            text-align: left;
            a {
                text-transform: uppercase;
                color: @titleColor;
                &:hover {
                    color: @navBorderColor;
                }
                span {
                    color: @mainActiveScheme;
                }
            }
        }
        li {
            display: inline-block;
            vertical-align: top;
            width: 100%;
            padding: 2px 0;
            text-align: left;

            a {
                color: @titleColor;
                &:hover {
                    color: @mainActiveScheme;
                }
            }
        }

    }


    /* Dropdown Center
    ========================================================================= */
    .shoes .nav-row {
        left: -68px;
        @media @tablet {
            left: -24px;
        }
    }
    .clothing .nav-row {
        left: 43px;
        @media @tablet {
            left: 59px;
        }
    }
    .brands .nav-row {
        left: 181px;
        @media @tablet {
            left: 161px;
        }
    }
    .skateboarding .nav-row {
        left: 302px;
        @media @tablet {
            left: 249px;
        }
    }
    .journal div.level1 {
        padding: 0;

        .nav-header {
            display: none;
        }

        ul {
            float: none;
        }

        .nav-row {
            left: 759px;
            border: none;
            @media @tablet {
                left: 660px;
            }
        }
    }

}