/*
Secondary tabs

These are default styles for secondary tabs that live within a primary tab

Markup:
<nav class="secondary-tab-nav">
    <ul class="secondary-tab-nav__tab-list" role="tablist">
        <li class="secondary-tab-nav__tab secondary-tab-nav__tab--selected" role="tab" aria-selected="true" tabindex="0">
            Unit list
        </li>
        <li class="secondary-tab-nav__tab" role="tab" aria-selected="false" tabindex="0">
            <a class="secondary-tab-nav__link">Meter readings</a>
        </li>
        <li class="secondary-tab-nav__tab" role="tab" aria-selected="false" tabindex="0">
            <a class="secondary-tab-nav__link">Common expense allocations</a>
        </li>
    </ul>
</nav>

Name: tabsSecondary

Styleguide 2.5
*/

.secondary-tab-nav {
    margin-left: 10px;
    margin-bottom: 15px;
    padding: 0;
}

.secondary-tab-nav__tab-list {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.secondary-tab-nav__tab {
    float: left;
    margin-left: 30px;
    padding-bottom: 10px;
    list-style: none;
    border-bottom: 3px solid transparent;
    box-sizing: border-box;
    color: @color-secondary-tab-item;
    font-size: @font-size-secondary-tab;
    font-weight: @font-weight-medium;
    line-height: 22px;
    cursor: default;

    &:first-child {
        margin-left: 0;
    }
}

.secondary-tab-nav__tab--selected {
    color: @color-secondary-tab-item-active;
    border-bottom: 3px solid @theme-green1;
}

.secondary-tab-nav__link {
    font-size: @font-size-secondary-tab;
    cursor: pointer;
    color: @color-secondary-tab-item;

    &:active {
        color: @color-secondary-tab-item;
    }

    &:hover,
    &:focus {
        text-decoration: none;
        color: @color-secondary-tab-item-active;
    }
}