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

@import "import/constants.styl"
@import "import/vendor.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
  display: none
  z-index: -1

  &.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
          line-height: ASIDE_WIDTH_SMALL

        & .bubble
          position: relative
          top: -54px
          right: 6px

        &:first-child
          margin-top: 8px