/**
Vertical Navigation

These styles can be used to construct a vertical navbar (e.g. sidebar navigation).

Markup:
<div>
    <style>
        ul { padding: 0; } 
    </style>
    <label class="form__label">Vertical navigation</label>
    <section>
        <nav class="navigation navigation--vertical navigation--large">
            <ul>
                <li class="navigation__item">
                    <a class="navigation__item-link">Home</a>
                </li>
                <li class="navigation__item navigation__item--icon svgicon--icons-hamburger-green">
                    <a class="navigation__item-link">Profile</a>
                </li>
                <li class="navigation__item navigation__item--active">
                    <a class="navigation__item-link">Settings</a>
                </li>
                <li class="navigation__item">
                    <a class="navigation__item-link">Contact</a>
                </li>
            </ul>
        </nav>
    </section>
    <label class="form__label">Vertical navigation with sub-navigation</label>
    <div class="page-content" style="display:flex;">
        <nav class="navigation navigation--vertical navigation--large navigation--bordered">
            <ul>
                <li class="navigation__item">
                    <a class="navigation__item-link">
                        <span class="navigation__item-title">Home</span>
                    </a>
                </li>
                <li class="navigation__item navigation__item--icon svgicon--icons-hamburger-green">
                    <a class="navigation__item-link">
                        <span class="navigation__item-title">Profile</span>
                    </a>
                </li>
                <li class="navigation__item navigation__item--active">
                    <a class="navigation__item-link">
                        <span class="navigation__item-title">Settings</span>
                    </a>
                    <ul class="navigation navigation--vertical navigation--small">
                        <li class="navigation__item">
                            <a class="navigation__item-link">Billing</a>
                        </li>
                        <li class="navigation__item">
                            <a class="navigation__item-link">Preferences</a>
                        </li>
                    </ul>
                </li>
                <li class="navigation__item">
                    <a class="navigation__item-link">
                        <span class="navigation__item-title">Contact</span>
                    </a>
                </li>
            </ul>
        </nav>
        <div>
            <div class="empty-state-panel empty-state-panel--min-height-450">
                <div class="empty-state-panel__inner-content">
                    <div class="empty-state-panel__icon svgicon--info"></div>
                    <div class="empty-state-panel__title">No content on this page</div>
                    <div class="empty-state-panel__text">This is a page that lives next to the vertical nav</div>
                    <div class="form__vertical-spacer form__vertical-spacer--large"></div>
                </div>
            </div>
        </div>
    </nav>
</div>

Name: navigationVertical

Styleguide 2.39
*/

.navigation--vertical {
    @padding-size: 20px;

    .navigation__item {
        .list-item;
        padding-left: @padding-size;
    }
    
    .navigation__item--icon {
        background-position: left center;
    }
    
    .navigation__item--active {
        @border-size: 3px;
        
        padding-left: @padding-size - @border-size;
        border-left: @border-size solid @theme-grey5;
        background-color: @theme-grey14;
    }
    
    .navigation__item-link {
        cursor: pointer;
    }

    .navigation__item-title {
        margin-left: 7px;
        font-size: @font-size--16;
        font-weight: @font-weight-semibold;
    }
}