.off-canvas {
  @include off-canvas();
}

.off-canvas-container {
  position: relative;
  width: $off-canvas-parent-width;

  &.in {
    height: 100%;
    min-height: 100%;
    overflow: hidden;
  }

  &.in > .off-canvas-wrapper {
    max-height: $off-canvas-wrapper-max-height;

    // HACK: This targets iPhone 5/5s, whose `vh` weakness causes scrolling issues
    @media screen and (device-aspect-ratio: 40/71) and (device-height: 568px) and (device-width: 320px) {
      max-height: 500px;
    }

    transform: translate(map-get($off-canvas-shift, sm), 0);

    @media (max-width: $screen-xs-max) {
      transform: translate(map-get($off-canvas-shift, xs), 0);
    }
  }

  &.in .off-canvas-exit {
    opacity: 1;
    transform: translate(0, 0);
    z-index: $z-index-off-canvas-exit;
  }
}

.off-canvas-wrapper {
  position: relative;
  width: $off-canvas-parent-width;
}

.off-canvas-exit {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  background-color: $off-canvas-exit-bg;
  box-shadow: $off-canvas-box-shadow;
  opacity: 0;

  transform: translate(-100%, 0);
  z-index: 0;
}

.off-canvas-wrapper {
  transition: transform $off-canvas-transition-duration $off-canvas-transition-easing;
}