:root {
  --documentation-viewer-sidebar-width: 16rem;
}

.ax-documentation-viewer {
  display: flex;
}

.ax-documentation-viewer__sidebar {
  flex: 0 0 var(--documentation-viewer-sidebar-width);
  padding: var(--page-padding-vertical) 0;
  border-right: 0.0625rem solid var(--color-theme-border);
}

.ax-documentation-viewer__body {
  flex: 1 1 0%;
  max-width: var(--layout-width-medium);
  margin-right: -var(--documentation-viewer-sidebar-width);
  padding: var(--page-padding-vertical) var(--page-padding-horizontal);
}

.ax-documentation-viewer__sidebar,
.ax-documentation-viewer__body {
  transform: translateX(-var(--documentation-viewer-sidebar-width));
  transition-property: transform;
  transition-duration: var(--transition-time-base);
  transition-timing-function: var(--transition-function);
}

.ax-documentation-viewer--sidebar-open .ax-documentation-viewer__sidebar,
  .ax-documentation-viewer--sidebar-open .ax-documentation-viewer__body {
    transform: translateX(0);
  }

.ax-documentation-viewer--sidebar-open .ax-documentation-viewer__mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: var(--documentation-viewer-sidebar-width);
  }

@media (min-width: 62rem) {
  .ax-documentation-viewer__sidebar,
  .ax-documentation-viewer__body {
    transform: translateX(0);
  }

  .ax-documentation-viewer__body {
    margin-right: auto;
    margin-left: auto;
  }
}