/*
Global nav

Theses are styles that drive our main navigation bar

Markup:
<nav class="global-nav">
    <div class="global-nav__container">
        <ul class="global-nav__main-menu">
            <li class="global-nav__main-menu-item">
                <a class="global-nav__main-menu-link global-nav__main-menu-link--home"></a>
            </li>
            <li class="global-nav__main-menu-item">
                <a class="global-nav__main-menu-link popover__link--selected">Rentals</a>
            </li>
            <li class="global-nav__main-menu-item">
                <a class="global-nav__main-menu-link">Leasing</a>
            </li>
            <li class="global-nav__main-menu-item">
                <a class="global-nav__main-menu-link">Associations</a>
            </li>
            <li class="global-nav__main-menu-item">
                <a class="global-nav__main-menu-link">Accounting</a>
            </li>
            <li class="global-nav__main-menu-item">
                <a class="global-nav__main-menu-link">Tasks</a>
            </li>
            <li class="global-nav__main-menu-item">
                <a class="global-nav__main-menu-link">Communication</a>
            </li>
            <li class="global-nav__main-menu-item">
                <a class="global-nav__main-menu-link global-nav__main-menu-link--shortcuts">&nbsp;</a>
            </li>
        </ul>
        <div class="global-nav__secondary-menu">
            <ul class="global-nav__secondary-nav">
                <li class="global-nav__secondary-nav-item">
                    <a class="global-nav__main-menu-link global-nav__main-menu-link--secondary">Files</a>
                </li>
                <li class="global-nav__secondary-nav-item">
                    <a class="global-nav__main-menu-link global-nav__main-menu-link--secondary">Reports</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Styleguide 2.1
*/
@global-nav-height: 55px;
@color-nav: #FFFFFF;
@global-nav-secondary-nav-link-color: @theme-grey12;

.global-nav {
    background: @color-nav;
    clear: both;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.07);
}

.global-nav__container {
    height: @global-nav-height;
}

.global-nav__main-menu {
    float: left;
    margin: 0 auto;
    height: @global-nav-height;
}

.global-nav__secondary-menu {
    float: right;
}

.global-nav__main-menu,
.global-nav__secondary-menu,
.global-nav__secondary-nav {
    display: flex;
    align-items: center;
    height: 100%;
}

.global-nav__secondary-nav {
    margin-right: 7.5px;
}

.global-nav__secondary-nav-item {
    display: inline-block;
    padding-right: 35px;
    padding-left: 7.5px;
    height: @global-nav-height;
    text-transform: uppercase;
    @media (max-width: 1200px) {
        padding-right: 15px;
    }
    transition: padding-right 200ms;
}

.global-nav__main-menu-item {
    display: inline-block;

    &:nth-child(3) .global-nav__main-menu-link {
        padding-left: 10px;
        @media (min-width: 1200px) {
            padding-left: 15px;
        }
    }
}

.global-nav__main-menu-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: @color-global-nav-link;
    height: @global-nav-height;
    line-height: @global-nav-height;
    border-bottom: 3px solid transparent;
    box-sizing: border-box;
    text-transform: uppercase;
    font-weight: @font-weight-semibold;
    font-size: @font-size--12;
    letter-spacing: 0.5px;
    cursor: pointer;

    &:active {
        color: @color-global-nav-link;
    }

    &:hover,
    &:focus {
        color: @color-global-nav-link;
        text-decoration: none;
        opacity: 0.5;
    }
    padding: 2px 8px 0 8px;
    @media (min-width: 1200px) {
        padding: 2px 12px 0 12px;
    }
}

.global-nav__main-menu-link--secondary {
    display: block;
    padding: 0;
    color: @global-nav-secondary-nav-link-color;

    &:hover,
    &:focus {
        opacity: 0.4;
        box-shadow: none;
        text-decoration: none;
    }
}

.global-nav__main-menu-link--rentals {
    a {
        padding-left: 21px;
    }
}

.global-nav__main-menu-link--home {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: @global-nav-height;
    width: 34px;
    @media (min-width: 1200px) {
        width: 42px;
    }
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    .svgicon--home-black;
}

// TODO Remove after VisualRefreshRound2 goes live
.global-nav__main-menu-item--vertical-line,
.global-nav__main-menu-item--vertical-line
{
    display: none;
}

.global-nav__main-menu-link--shortcuts {
    padding: 0;
    background-image: url("@{icons}shortcuts-grey.png");
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center 26px;
    width: 34px;
    @media (min-width: 1200px) {
        width: 42px;
    }
}

.popover__link--selected {
    .buildium-green-rgb();
    border-bottom: 3px solid @theme-green1;

    &:active,
    &:focus {
        .buildium-green-rgb();
    }

    &:hover {
        opacity: 1;
        .buildium-green-rgb(.5);
        border-bottom: 3px solid @theme-green1;
    }
}

.popover__link--selected--home {
    .svgicon--home-green;

    &:hover {
        opacity: 1;
        .svgicon--home-green-hover;
    }
    border-bottom: 3px solid @theme-green1;
}