/**
 * Stylesheet
 *
 * @namespace Lungo.Layout
 * @class Nav
 *
 * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 */

@import "constants.less";

nav {

    &.groupbar, footer & {
        .display-box();
        .box-pack(justify);

        & > a {
            .box-flex(1);
        }
    }

    & abbr {
        font-weight: bold;
    }
}

header nav {
    & a {
        padding: 0 6px;
        min-width: 30px;
        z-index: 1000;
        float: left;
        height: @header-footer-height;
        text-align: center;

        & .icon { font-size: 1.7em; }

        & img {
            width: 16px;
            height: 16px;
            top: -1px !important; }

        & .bubble {
            position: relative;
            top:  -12px;
            left: -12px;
            margin-right: -20px;
        }
    }

    &.button a {
        margin: 5px 5px 5px 0;
        height: 32px;
        line-height: 32px;
        & .icon {  line-height: 33px; }
        &:first-child { margin: 5px; }
    }

    & .icon ~ abbr {
        margin-left: 4px;
        float: right; }

    & .loading {
        margin-top: .5em;
        font-size: 1.6em;
        & + .icon { display: none; }
    }
}

nav.groupbar {
    position: absolute;
    top: @header-footer-height;
    height: @header_groupbar_height;
    width: 100%;
    z-index: 2;

    line-height: @header_groupbar_height;
    & > a {
        padding: 0px;
        margin: 0px;
        height: @header_groupbar_height !important;
        display: block;
        text-align: center;

        & .icon {
            font-size: 1.0em;
            margin-right: 2px;
        }
        & .bubble {
            position: relative;
            top: -1px;
            left: 2px;
        }
    }
}

footer nav {
    & a {
        text-align: center;
        display: block;
        padding: 0;
        height:  @header-footer-height;
    }

    & .icon {
        font-size: 2.0em !important;
        line-height: @header-footer-height;
        width: 32px;
        display: inline-block;
    }

    & .bubble {
        top:  -42px;
        left: 4px;

        & .loading {
            top: 0;
            font-size: 1.4em; }
    }

    abbr { display: none; }

    & .bubble {
        position: relative;
        top:  -12px;
        left: -12px;
        margin-right: -20px;
    }

    &.with-labels {
        & .icon { line-height: 36px; }

        & abbr {
            display: block !important;
            margin-top: -8px;
            z-index: 1;

            font-size: 11px;
            line-height: 14px;

            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis; }
    }
}