@import "constants.styl"

/* ==== Any phone ==== */
@media only screen and (max-width: 767px)
  body
    &[data-position="absolute"] > section
      position: absolute

    &[data-position="fixed"] > section
      position: fixed

  aside
    position: absolute

  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))

    &[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