.sidebar {
  z-index: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  display: none;
  .translate3d(0, 0, 0);
  .transition-transform(~"400ms ease");
  pointer-events: none;
}

.sidebar-left {
  background: @sidebar-left-background;
  width: @sidebar-left-width;
  left: 0;
  right: auto;
  .transition(~"width 400ms ease");
}

.sidebar-right {
  background: @sidebar-right-background;
  width: @sidebar-right-width;
  left: auto;
  right: 0;
  .transition(~"width 400ms ease");
}

.sidebar-left-visible .sidebar-left, .sidebar-right-visible .sidebar-right {
  display: block;
}

.sidebar-left-in .sidebar-left, .sidebar-right-in .sidebar-right {
  pointer-events: auto;
}

.sidebar-left-in .app {
  width: 100%;
  .translate(@sidebar-left-width, 0);
  .transition-transform(~"400ms ease");
}

.sidebar-right-in .app {
  width: 100%;
  .translate(-@sidebar-right-width, 0);
  .transition-transform(~"400ms ease");
}

.sidebar-header, .app-name {
  position: relative;
  width: 100%;
  line-height: @sidebar-header-height;
  padding: @sidebar-header-padding;
  font-size: @sidebar-header-font-size;
  color: @sidebar-header-color;
  margin: 0;
  z-index: @zindex-sidebar-header;
}