@import "constants.styl"

/* ==== Any phone ==== */
@media only screen and (max-width: 767px)
  body

    & > aside
      position: absolute

    & > section
      &.show.aside
        &:not(.right)
          transform translateX(ASIDE_WIDTH)
        &.right
          transform translateX(-(ASIDE_WIDTH))
      &.show.hide
        z-index: -1

      &[data-transition]
        display-box()
        transition-property opacity, z-index, transform
        transition-duration TRANSITION_TIME
        transition-timing-function DEFAULT_TRANSITION
        backface-visibility hidden

      /* Transition: POP */
      &[data-transition="pop"]
        opacity: 0
        transform( scale(1.15) )
        &.show
          transform( scale(1) )
          opacity: 1
        &.hide
          transform( scale(0.9) )
          opacity: 0

      /* Transition: SLIDE */
      &[data-transition="slide"]
        transform translateX(100%)
        visibility: visible
        &.show
          transform translateX(0%)
        &.hide
          transform translateX(-100%)

      /* Transition: COVER */
      &[data-transition="cover"]
        transform translateY(110%)
        &.show, &.hide
          transform translateY(0%)
        &.hide
          display: block

      /* Transition: FADE */
      &[data-transition="fade"]
        opacity: 0
        &:first-child, &.show
          opacity: 1
        &:hide
          opacity: 0