.offcanvas {
  z-index: $zindex-offcanvas;
}

.offcanvas-backdrop {
  @include overlay-backdrop(
    $zindex-offcanvas-backdrop,
    $offcanvas-backdrop-bg,
    $offcanvas-backdrop-opacity
  );
}

.offcanvas-start {
  transform: translateX(-100%);
}

.offcanvas-end {
  transform: translateX(100%);
}

.offcanvas-top {
  transform: translateY(-100%);
}

.offcanvas-bottom {
  transform: translateY(100%);
}

.offcanvas.show {
  transform: none;
}