@PANEL_WIDTH: 15em; // Change this value to modify the width of the pane
@ANIMATION_DURATION: 0.3s;
@ANIMATION_STYLE: ease-in-out;

@import "../node_modules/delite/css/mixins";

.translate(@val){
  -ms-transform: translate(@val, 0px); //IE9 support
  .transform (translate3d(@val, 0px, 0px));
}

.left(@val){
  left: @val;
  right: auto;
}

.right(@val){
  right: @val;
  left: auto;
}

.d-side-pane{
  width: @PANEL_WIDTH;
  height: 100%;
  top: 0;
  .box-sizing(border-box);
  position: fixed;
  background-color: white;
  touch-action: pan-y;
}

.-d-side-pane-animate {
  .transition-transform (@ANIMATION_DURATION, @ANIMATION_STYLE);
}

.-d-side-pane-no-select{
  .touch-callout(none);
  .user-select(none);
}

.-d-side-pane-start{
  left: 0;

  .d-rtl& {
    .right(0);
  }
}

.-d-side-pane-end{
  right: 0;

  .d-rtl& {
    .left(0);
  }
}

.-d-side-pane-under{
  z-index: -1;
}

.-d-side-pane-ontop{
  z-index: 1;
}

.-d-side-pane-start.-d-side-pane-push.-d-side-pane-hidden, .-d-side-pane-start.-d-side-pane-overlay.-d-side-pane-hidden{
  .translate(-@PANEL_WIDTH);

  .d-rtl& {
    .right(0);
    .translate(@PANEL_WIDTH);
  }
}

.-d-side-pane-start.-d-side-pane-push.-d-side-pane-visible, .-d-side-pane-start.-d-side-pane-overlay.-d-side-pane-visible{
  .translate(0px);

  .d-rtl& {
    .right(0);
    .translate(0px);
  }
}

.-d-side-pane-end.-d-side-pane-push.-d-side-pane-hidden, .-d-side-pane-end.-d-side-pane-overlay.-d-side-pane-hidden{
  right: 0;
  .translate(@PANEL_WIDTH);

  .d-rtl& {
    .left(0);
    .translate(-@PANEL_WIDTH);
  }
}


.-d-side-pane-end.-d-side-pane-push.-d-side-pane-visible, .-d-side-pane-end.-d-side-pane-overlay.-d-side-pane-visible{
  right: 0;
  .translate(0px);

  .d-rtl& {
    .left(0);
    .translate(0px);
  }
}

.-d-side-pane-start.-d-side-pane-translated{
  .translate(@PANEL_WIDTH);
  overflow: hidden; // Disable the ability to scroll the pushed content (at least on Android 4.x)
  -webkit-overflow-scrolling: auto; // Disable the ability to scroll the pushed content (at least on Android 4.x)

  .d-rtl& {
    .right(0);
    .translate(-@PANEL_WIDTH);
  }
}

.-d-side-pane-start.-d-side-pane-nottranslated{
  .translate(0px);

  .d-rtl& {
    .right(0);
    .translate(0px);
  }
}

.-d-side-pane-end.-d-side-pane-translated{
  .translate(-@PANEL_WIDTH);

  .d-rtl& {
    .left(0);
    .translate(@PANEL_WIDTH);
  }
}

.-d-side-pane-end.-d-side-pane-nottranslated{
  .translate(0px);

  .d-rtl& {
    .left(0);
    .translate(0px);
  }
}

// TODO: why doesn't this have LTR counterpart
.d-rtl.-d-side-pane-start.-d-side-pane-reveal.-d-side-pane-visible, .d-rtl.-d-side-pane.-d-side-pane-start-reveal.-d-side-pane-hidden {
  .right(0);
}

.-d-side-pane-end.-d-side-pane-reveal.-d-side-pane-visible, .-d-side-pane.-d-side-pane-end-reveal.-d-side-pane-hidden {
  right: 0;

  .d-rtl& {
    .left(0);
  }
}