$offcanvas-width: rem(300)

.offcanvas__outer
  position: relative
  height: 100%

.offcanvas__inner
  height: 100%
  position: relative
  left: 0
  +backface-visibility(hidden)
  +transition( transform .3s ease )
  +transform( translate3d(0, 0, 0 ) )

.offcanvas__overlay
  position: absolute
  top: 0
  right: 0
  width: 0
  height: 0
  background: rgba($black,0.4)
  opacity: 0
  z-index: 100
  +transition(opacity 0.2s, width 0.1s 0.2s, height 0.1s 0.2s)

.offcanvas__container
  position: absolute
  top: 0
  left: 0
  overflow-y: auto
  width: $offcanvas-width
  height: 100%
  z-index: 101
  background-color: $primary-color
  color: $body-font-color
  +backface-visibility(hidden)
  +transform( translate3d(-100%, 0, 0) )

.offcanvas__container-inner
  opacity: .7
  +transition( opacity 300ms 100ms ease, transform 400ms ease)
  +transform( translate3d(-$offcanvas-width, 0, 0) scale3d(0.8, 0.8, 0.8))
  +transform-origin(50% 0%)

.offcanvas__opener,
.offcanvas__close
  display: inline-block
  background-color: transparent
  border: 0
  outline: 0
  line-height: 1.9
  padding: rem(5) 0

  .icon
    vertical-align: top

.offcanvas__opener
  &:hover
    color: $primary-color

.offcanvas__close
  width: 100%
  padding: rem(11) rem(12)
  text-align: left

  &:hover
    color: $white

// ----------------------------------------------------------
// STATES
// ----------------------------------------------------------
.offcanvas--open

  .offcanvas__outer
    overflow: hidden

  .offcanvas__inner
    +transform(translate3d($offcanvas-width, 0, 0) scale3d(1, 1, 1))

  .offcanvas__container
    -webkit-overflow-scrolling: touch

  .offcanvas__container-inner
    opacity: 1
    +transform(translate3d(0, 0, 0))

  .offcanvas__overlay
    width: 100%
    height: 100%
    opacity: 1
    +transition(opacity 0.2s)

  .offcanvas__opener
    opacity: 0
    pointer-events: none
    +transition( opacity .3s ease )

// ----------------------------------------------------------
// NO CSS TRANSFORM Fallback
// ----------------------------------------------------------
.no-csstransforms3d

  .offcanvas__container
    display: none

  .offcanvas--open
    .offcanvas__container
      display: block