@nav-default-color:#AAA;
@nav-default-border-color:#EEE;

// Nav theme {{_themeName}}
//
// Generated with config: <i>{{{_description}}}</i>
//
// .nav-theme-{{_themeName}} - Normal
// .nav-theme-{{_themeName}}.nav-folded - Folded style.
//
// Markup:
//<nav class="nav-theme-{{_themeName}} {$modifiers}">
//<a class="nav-item" href="javascript:void(0)">item0</a>
//<a class="nav-item" href="javascript:void(0)">item1</a>
//<a class="nav-item nav-item-state-hover" href="javascript:void(0)">item-hover</a>
//<a class="nav-item nav-item-selected" href="javascript:void(0)">item-selected</a>
//</nav>
//
// Styleguide {{_guideIndex}}.{{_themeIndex}}

.nav-theme-{{_themeName}}(
    @color: @nav-default-color;
    @border-color: @nav-default-border-color;
){
    border:1px solid @border-color;
    .nav-item {
        display:table-cell;
        padding: 0.5em 1em;
        text-decoration:none;
        color: @color;
        {{#if itemSeparator}}

        border-right:1px solid @border-color;
        &:last-child{
            border-right:none;
        }
        {{/if}}

        &:hover,
        &.nav-item-state-hover {
            background-color: rgba(0,0,0,.05);
            text-decoration:none;
        }

        &:active,
        &.nav-item-state-active {
        }

        &.nav-item-selected,
        &.nav-item-selected:hover,
        &.nav-item-selected:active {

        }
    }

    &.nav-folded {

        .nav-item {
            display: block;
            box-sizing: border-box;
            width: 100%;
        }
    }
}

.nav(@color;@border-color;){
    .nav-theme-b(@color;@border-color;)
}