// Off-canvas component mixins

@mixin off-canvas-width() {
  width: map-get($off-canvas-shift, sm);

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

@mixin off-canvas() {
  @include off-canvas-width();

  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;

  z-index: $z-index-off-canvas;
  overflow-y: auto;

  pointer-events: none;
  transform: translate(-100%, 0);

  // scss-lint:disable VendorPrefix
  -webkit-backface-visibility: hidden;
  -webkit-overflow-scrolling: touch;

  .off-canvas-container.in & {
    overflow-x: hidden;
    pointer-events: auto;
  }
}