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

@import "constants.styl"

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
  top: 0
  bottom: 0
  height: inherit
  width: ASIDE_WIDTH
  visibility: hidden
  z-index: -1


  &.show
    z-index: 0
    visibility: visible

  &.right
    right: 0px

  & header, footer
    position: relative
    left: none
    height: HEADER_FOOTER_HEIGHT

  & footer
    position: absolute
    bottom: 0

  &.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: ASIDE_SMALL_ICON
          line-height: (ASIDE_WIDTH_SMALL - 8)

        & .tag
          position: relative
          top: -(ASIDE_WIDTH_SMALL)
          right: -(ASIDE_WIDTH_SMALL / 3.4)

        &:first-child
          margin-top: 8px