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

@import "constants.less";


section.aside {
    &:not(.small) { .transform(translateX(@aside-width)); }
    &.small { .transform(translateX(@aside-width-small)); }

    &.right {
        .transform(translateX(-@aside-width));
        &.small { .transform(translateX(-@aside-width-small)); }
    }
}

aside {
    position: absolute;
    height: inherit;
    top: 0;
    bottom: 0;
    display: none;
    z-index: -1;

    width: @aside-width;

    &.right { right: 0px; }

    &.show {
        z-index: 0;
        display: block;
    }

    & header, & footer {
        position: relative;
        left: none;
        height: @header-footer-height;
    }

    & footer {
        position: absolute;
        bottom: 0;
    }

    & .bubble {
        float: right;
    }

    &.small {
        width: @aside-width-small;

        & nav {
            width: @aside-width-small;
            text-align: center;
            & a {
                display: block;
                padding: 0px;
                width: @aside-width-small;
                height: @aside-width-small;
                & .icon {
                    position: absolute;
                    width: inherit;
                    font-size: 38px;
                    line-height: @aside-width-small;
                }
                & .bubble {
                    position: relative;
                    top: -54px;
                    right: 6px;
                }
                &:first-child {margin-top: 8px; }
            }
        }
    }
}

/*
@TODO: Tablets & TV on final release
@media handheld, only screen and (min-width: 768px) {
    .autohide[data-router="aside"] {  display: none !important; }

    section.aside {
        width: auto !important;
        left: @aside-width;
        right: 0px !important;
        .transform(translate3d(0px, 0, 0));
        -webkit-transition: none;

        &.small{ left: @aside-width-small; }
    }
}
*/
