// .off-canvas-open     - body class for killing the scroll
// .off-canvas          - full container locked to side of screen including close button space
// .off-canvas-pane     - actual pane with background 
// .off-canvas-content  - inner content for off canvas

.off-canvas-open {
  overflow: hidden;
  //transform: scale(0.9);
}

.off-canvas {
  position: fixed;
  top: 0; 
  bottom: 0; 
  z-index: $zindex-off-canvas;
  width: 100%;
  outline: 0;
  -webkit-overflow-scrolling: touch;
  overflow: hidden;
  transition: $transition-all-bezier;

  &.small {
    @include media-breakpoint-up(sm) {
      width: $off-canvas-small + 48;
      &.off-canvas-left {
        left: (-($off-canvas-small + 48));
      }

      &.off-canvas-right {
        right: (-($off-canvas-small  + 48));
      }

      > .off-canvas-pane {
        width: $off-canvas-small;
      }
    }
  }

  &.medium {
    @include media-breakpoint-up(sm) {
      width: $off-canvas-medium + 48;
      &.off-canvas-left {
        left: (-($off-canvas-medium + 48));
      }

      &.off-canvas-right {
        right: (-($off-canvas-medium  + 48));
      }

      > .off-canvas-pane {
        width: $off-canvas-medium;
      }
    }
  }

  &.large {
    @include media-breakpoint-up(md) {
      width: $off-canvas-large + 48;
      &.off-canvas-left {
        left: (-($off-canvas-large + 48));
      }

      &.off-canvas-right {
        right: (-($off-canvas-large + 48));
      }

      > .off-canvas-pane {
        width: $off-canvas-large;
      }
    }
  }

  &.in {
    &.off-canvas-left {
      left: 0;
    }

    &.off-canvas-right {
      right: 0;
    }
  }
}

.off-canvas-pane {
  position: relative;
  background-color: $off-canvas-bg;
  width: 100%;
  height: 100%;
  box-shadow: $box-shadow-2;
  
  .off-canvas-right & {
    float: right;
    @include clearfix;
  }

  &[class*="bg"] {
    .off-canvas-header, .off-canvas-footer {
      border: 0;
      background-color: inherit;  
    }
  }
}

.off-canvas-content {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-color: inherit;

  @include no-flexbox {
    display: block;
    position: static;
    overflow-x: hidden; 
    overflow-y: auto;
    max-height: 100%;
  }
}

.off-canvas-header {
  position: relative;
  height: auto;
  top: 0;
  width: 100%;
  padding: $off-canvas-inner-padding;
  background-color: $gray-5;
  @include clearfix;
  &[class*="bg"] {
    border: 0;
  }

  @include no-flexbox {
    position: static;
    height: auto;
  }
}

.off-canvas-title {
  margin: 0;
  line-height: $line-height;
}

.off-canvas-body {
  overflow-x: hidden;
  overflow-y: auto;
  padding: $off-canvas-inner-padding;
  max-height: 100%;
  height: 100%;
  flex:1;

  @include no-flexbox {
    position: static;
    overflow: visible;
    min-height: 100%;
    height: auto;
    max-height: none;
  }

}

.off-canvas-footer {
  width: 100%;
  height: auto;
  padding: $off-canvas-inner-padding;
  background-color: $gray-5;
  border-bottom: 1px solid $gray-10;
  @include clearfix;
  &[class*="bg"] {
    border: 0;
  }

  @include no-flexbox {
    display: block;
    position: static;
    height: auto;
  }
}

.off-canvas-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $zindex-overlay;
  background-color: $overlay;

  // Fade for backdrop
  &.fade { opacity: 0; }
  &.in { opacity: 1; }
}

.off-canvas-left {
  padding-right: 48px; 
  left: -100%;
}

.off-canvas-right {
  padding-left: 48px;
  right: -100%;
}