@import "../../../styles/variables.scss";

$novo-layout-content-z-index: 1;
$novo-layout-side-drawer-z-index: 2;
$novo-layout-backdrop-z-index: 3;
$novo-drawer-over-drawer-z-index: 4;

@mixin novo-stacking-context($z-index: 1) {
  position: relative;

  // Use a z-index to create a new stacking context. (We can't use transform because it breaks fixed
  // positioning inside of the transformed element).
  z-index: $z-index;
}

// Note that this div isn't strictly necessary on all browsers, however we need it in
// order to avoid a layout issue in Chrome. The issue is that in RTL mode the browser doesn't
// account for the sidenav's scrollbar while positioning, which ends up pushing it partially
// out of the screen. We work around the issue by having the scrollbar be on this inner container.
.novo-sidenav-inner-container {
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.novo-sidenav-fixed {
  position: fixed;
}

.novo-sidenav {
  $high-contrast-border: solid 1px var(--border);

  @include theme-backgrounds("theme");
  @include novo-stacking-context($novo-drawer-over-drawer-z-index);

  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  outline: 0;
  box-sizing: border-box;
  overflow-y: auto;
  transform: translate3d(-100%, 0, 0);

  &,
  [dir="rtl"] &.novo-sidenav-end {
    border-right: $high-contrast-border;
  }

  [dir="rtl"] &,
  &.novo-sidenav-end {
    border-left: $high-contrast-border;
    border-right: none;
  }

  &.novo-sidenav-side {
    z-index: $novo-layout-side-drawer-z-index;
  }

  &.novo-sidenav-end {
    right: 0;
    transform: translate3d(100%, 0, 0);
  }

  [dir="rtl"] & {
    transform: translate3d(100%, 0, 0);

    &.novo-sidenav-end {
      left: 0;
      right: auto;
      transform: translate3d(-100%, 0, 0);
    }
  }
}