//  ==========================================================================
//  Offcanvas Settings
//  ==========================================================================


$offcanvas-width:                      17em !default;
$offcanvas-left-width:                 $offcanvas-width !default;
$offcanvas-right-width:                $offcanvas-width !default;
$offset--left:                         17em !default;
$offset--right:                        17em !default;
$offset--top:                          12.5em !default;
$offset--bottom:                       12.5em !default;
$offcanvas-content-reveal-left-offset: $offset--left !default;
$offcanvas-content-reveal-right-offset: $offset--right !default;

//content
$offset-content-wrap--left:             17em !default;
$offset-content-wrap--right:            $offset-content-wrap--left !default;

// bg
$offcanvas-bg--color:                   rgba(black, .68);

// position
$offcanvas-enable-left:                 true !default;
$offcanvas-enable-right:                true !default;
$offcanvas-enable-top:                  true !default;
$offcanvas-enable-bottom:               true !default;
// style
$offcanvas-enable-overlay:              true !default;
$offcanvas-enable-push:                 true !default;
$offcanvas-enable-reveal:               true !default;

$supportCSSTransforms:                  true !default;

$elements:  body-text,offcanvas-reveal,offcanvas-content-wrap,header,offcanvas-overlay,offcanvas,offcanvas-trigger,offcanvas-panel,offcanvas-btn !default;

// https://material.google.com/motion/duration-easing.html#duration-easing-common-durations
$deceleration-curve: cubic-bezier(0, 0, .2, 1) !default; //Easing out
$acceleration-curve: cubic-bezier(.4, 0, 1, 1) !default; // Easing in
$sharp-curve: cubic-bezier(.4, 0, .6, 1) !default;
$standard-curve: cubic-bezier(.4, 0, .2, 1) !default;

//  ==========================================================================
//  Offcanvas Mixins
//  ==========================================================================

//GPU acceleration
%u-ha {
  visibility: hidden;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
%u-offcanvas-animate {
  transition: transform 300ms $sharp-curve;
}

%is-open {
  visibility: visible;
  transform: translate3d(0, 0, 0);
}

@mixin offcanvas($position:left, $offset:$offcanvas-width, $overlay:false, $reveal:false) {
  @if $position == "left" {
    width: $offcanvas-left-width;
    transform: translate3d(-$offset, 0, 0);

    @if ($supportCSSTransforms == false) {

      &.c-offcanvas--support-no-transitions {
        left: -$offset--left;
        &.is-open {
          left: 0;

        }

      }

    }
  }
  @if ($position == "right") {
    right: 0;
    width: $offcanvas-right-width;
    transform: translate3d($offset, 0, 0);
  } @else if ($position == "top") {
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: $offset;
    min-height: auto;
    transform: translate3d(0, -$offset, 0);
  } @else if ( $position == "bottom" ) {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: $offset;
    min-height: auto;
    transform: translate3d(0, $offset, 0);
  }
}


@mixin offcanvas-content($position:left,$offset:$offcanvas-width, $reveal:true) {
  @if ($reveal == true) {
    @if ($position == "right") {
      &.is-open {
        transform: translate3d(-$offset, 0, 0);
      }
    }
    @if ($position == "left") {
      &.is-open {
        transform: translate3d($offset, 0, 0);
      }
    }

  }
}

@mixin offcanvas-bg($position:left, $offset:$offcanvas-width) {

  @if ($position == "right") {
    &.is-open {
      transform: translate3d(-$offset, 0, 0);
    }
  }
  @if ($position == "left") {
    &.is-open {
      transform: translate3d($offset, 0, 0);
    }
  }
}

//  ==========================================================================
//  Offcanvas Variables
//  ==========================================================================

/**
 * Offcanvas-content-wrap
*/
.c-offcanvas-content-wrap {
  //position: relative;
  //overflow: hidden;
  z-index: index($elements, offcanvas-content-wrap);
}

/**
 * Offcanvas Panel
*/
.c-offcanvas {
  @extend %u-ha;
  @extend %u-offcanvas-animate;
  position: fixed;
  top: 0;
  display: block;
  min-height: 100%;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;

  &.is-open {
    @extend %is-open;
  }
  &--opening {
    transition-timing-function: $sharp-curve;
  }
  &.is-closed {
    //width: 0; IE10 BUG
    max-height: 100%;
    overflow: hidden;
    visibility: hidden;
    box-shadow: none;
  }

}

.c-offcanvas--overlay {
  z-index: 1080;
}

.c-offcanvas--reveal {
  z-index: index($elements, offcanvas-reveal);
}

/**
 * Offcanvas BG-Overlay
*/
.c-offcanvas-bg {
  position: fixed;
  top: 0;
  left: -100%;
  z-index: 1079;
  width: 100%;
  height: 100%;
  background-color: transparent;
  transition: background-color 400ms cubic-bezier(.23, 1, .32, 1) 0ms;

  &.is-animating,
  &.is-open {
    left: 0;
    visibility: visible;
    background-color: $offcanvas-bg--color;
  }

  &.is-closed { visibility: hidden; }
  &--closing {
    &.is-animating{ background: transparent; }
  }
}

/**
 * Position Left
 *
*/

@if ($offcanvas-enable-left == true) {
  .c-offcanvas--left {
    height: 100%;
    @include offcanvas(left,$offset--left,$offcanvas-enable-overlay,$offcanvas-enable-push);
  }

  @if ($supportCSSTransforms == false) {

    .c-offcanvas.c-offcanvas--support-no-transitions {
      left: -$offset--left;

      .c-offcanvas--left{
        &.c-offcanvas--overlay,
        &.c-offcanvas--push,
        &.is-open {
          left: 0;
        }
      }

    }

  }
}

/**
 *  Position Right
 *
*/
@if ($offcanvas-enable-right == true) {

  .c-offcanvas--right {
    height: 100%;
    @include offcanvas(right,$offset--right,$offcanvas-enable-overlay,$offcanvas-enable-push);
  }
}

/**
 * Position Top
 *
*/
@if ($offcanvas-enable-top == true) {

  .c-offcanvas--top {
    @include offcanvas(top,$offset--top,$offcanvas-enable-overlay,$offcanvas-enable-push);
  }
}

/**
 * Position Bottom
 *
*/
@if ($offcanvas-enable-bottom == true) {

  .c-offcanvas--bottom {
    @include offcanvas(bottom,$offset--bottom,$offcanvas-enable-overlay,$offcanvas-enable-push);
  }
}

/**
 * Reveal
 *
*/
@if ($offcanvas-enable-reveal== true) {
  .c-offcanvas-content-wrap{
    @extend %u-offcanvas-animate;
    z-index: index($elements, offcanvas-content-wrap);
  }
  .c-offcanvas-content-wrap--reveal {
    //Left
    @if ($offcanvas-enable-left == true) {
      &.c-offcanvas-content-wrap--left {
        @include offcanvas-content(left,$offcanvas-content-reveal-left-offset);
      }
    }
    // Right
    @if ($offcanvas-enable-right == true) {
      &.c-offcanvas-content-wrap--right {
        @include offcanvas-content(right,$offcanvas-content-reveal-right-offset);
      }
    }
  }
  .c-offcanvas--reveal{
    z-index: 0;
    transform: translate3d(0, 0, 0);
  }

  .c-offcanvas-bg.c-offcanvas-bg--reveal{
    @extend %u-offcanvas-animate;
    @if ($offcanvas-enable-left == true) {
      &.c-offcanvas-bg--left {
        @include offcanvas-bg(left,$offset--left);
      }
    }
    @if ($offcanvas-enable-right == true) {
      &.c-offcanvas-bg--right {
        @include offcanvas-bg(right,$offset--right);
      }
    }
  }
}

/**
 * Push
 *
*/
@if ($offcanvas-enable-push== true) {

  .c-offcanvas--push {
    z-index: index($elements, offcanvas);
    &--opening {
      transition-timing-function: $deceleration-curve;
    }
  }
  .c-offcanvas-content-wrap{
    @extend %u-offcanvas-animate;
    z-index: index($elements, offcanvas-content-wrap);
  }
  .c-offcanvas-content-wrap--push {
    //Left
    @if ($offcanvas-enable-left == true) {
      &.c-offcanvas-content-wrap--left {
        @include offcanvas-content(left,$offcanvas-content-reveal-left-offset);
      }
    }
    // Right
    @if ($offcanvas-enable-right == true) {
      &.c-offcanvas-content-wrap--right {
        @include offcanvas-content(right,$offcanvas-content-reveal-right-offset);
      }
    }
  }

  .c-offcanvas-bg.c-offcanvas-bg--push{
    @extend %u-offcanvas-animate;
    @if ($offcanvas-enable-left == true) {
      &.c-offcanvas-bg--left {
        @include offcanvas-bg(left,$offset--left);
      }
    }
    @if ($offcanvas-enable-right == true) {
      &.c-offcanvas-bg--right {
        @include offcanvas-bg(right,$offset--right);
      }
    }
  }
}

// fix
.dialog-off-canvas-main-canvas{
  overflow-x: hidden;
}