// Off-Canvas

body.lock-scroll {
  // overflow: hidden!important;
}

.offcanvas_container {
  position: relative;
  overflow: hidden;
  background: #fff;
  -o-transition: 0.5s -o-filter ease;
}

.offcanvas_main_content {
  position: relative;
  z-index: 2;
  background: #fff;
  transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.offcanvas_overlay {
  body.no-offcanvas-animation & {
    top: 100%;
    left: 100%;
    width: 0;
    height: 0;

    &:after {
      z-index: -1;
    }
  }
}

.offcanvas_aside {
  position: fixed;
  top: 0;
  z-index: 1001;
  width: $offcanvas_mobile_width;
  height: 100%;
  overflow: hidden;

  &.offcanvas_aside_top {
    width: 100%;
    -webkit-transition: -webkit-transform 0.75s cubic-bezier(0.19, 1, 0.22, 1);
    transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);

    &:before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      background-color: white;
    }
  }

  &.offcanvas_aside_left {
    left: 0;
    -webkit-transform: translate3d(-$offcanvas_mobile_width, 0, 0);
    transform: translate3d(-$offcanvas_mobile_width, 0, 0);
    -webkit-transition: -webkit-transform 0.75s cubic-bezier(0.19, 1, 0.22, 1);
    transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1);

    @media #{breakpoint(medium)} {
      width: $offcanvas_mediumup_width;
      -webkit-transform: translate3d(-$offcanvas_mediumup_width, 0, 0);
      transform: translate3d(-$offcanvas_mediumup_width, 0, 0);
    }

    @media #{breakpoint(large)} {
      width: $offcanvas_largeup_width;
      -webkit-transform: translate3d(-$offcanvas_largeup_width, 0, 0);
      transform: translate3d(-$offcanvas_largeup_width, 0, 0);
    }

    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;

    &:before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      background-color: white;
    }
  }

  &.offcanvas_aside_right {
    right: 0;
    -webkit-transform: translate3d($offcanvas_mobile_width, 0, 0);
    transform: translate3d($offcanvas_mobile_width, 0, 0);
    -webkit-transition: -webkit-transform 0.75s cubic-bezier(0.19, 1, 0.22, 1);
    transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1);

    @media #{breakpoint(medium)} {
      width: $offcanvas_mediumup_width;
      -webkit-transform: translate3d($offcanvas_mediumup_width, 0, 0);
      transform: translate3d($offcanvas_mediumup_width, 0, 0);
    }

    @media #{breakpoint(large)} {
      width: $offcanvas_largeup_width;
      -webkit-transform: translate3d($offcanvas_largeup_width, 0, 0);
      transform: translate3d($offcanvas_largeup_width, 0, 0);
    }

    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;

    &:before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      background-color: #fff;
      width: 100%;
    }
  }

  body.no-offcanvas-animation & {
    visibility: hidden;
  }

  .offcanvas_aside_content {
    position: relative;
    height: 100%;
    overflow: auto;
    padding: 0px 100px 0 100px;
    @include breakpoint(medium down) {
      padding: 0px 50px 0 50px;
    }
  }

  &.offcanvas_aside_left {
    .offcanvas_aside_content {
      padding-top: 100px;

      button.close-icon {
        left: 100px;
        top: 50px;

        @include breakpoint(medium down) {
          left: 50px;
        }
      }
    }
  }

  &.offcanvas_aside_top {
    .offcanvas_aside_content {
      padding: 0;
    }
  }
}

body.offcanvas_open {
  .offcanvas_overlay {
    opacity: 1;
    pointer-events: auto;
  }
}

// Offcanvas - Left

body {
  &.offcanvas_left .offcanvas_aside_left,
  &.offcanvas_right .offcanvas_aside_right,
  &.offcanvas_top .offcanvas_aside_top {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);

    -webkit-transition: -webkit-transform 1s cubic-bezier(0.19, 1, 0.22, 1);
    transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
  }
}

// Left Canvas Open Animation

@-webkit-keyframes leftCanvasOpen {
  0% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  30% {
    -webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

@keyframes leftCanvasOpen {
  0% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  30% {
    -webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

// Right Canvas Open Animation

@-webkit-keyframes rightCanvasOpen {
  // 0% {
  //   -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  //           clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  // }
  // 30% {
  //   -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
  //           clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
  // }
  // 100% {
  //   -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  //           clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  // }
}

@keyframes rightCanvasOpen {
  0% {
    @include transform(rotate3d(0, 0, 1, -25deg) translate3d(100%, -5em, 0));
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  to {
    @include transform(rotate3d(0, 0, 1, 0) translate3d(0, -1em, 0));
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

// Right Canvas Close Animation

@keyframes rightCanvasClose {
  0% {
    @include transform(rotate3d(0, 0, 1, 0) translate3d(0, -1em, 0));

    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  to {
    @include transform(rotate3d(0, 0, 1, 25deg) translate3d(100%, -5em, 0));
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

// Left Canvas Close Animation

@-webkit-keyframes leftCanvasClose {
  0% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  50% {
    -webkit-clip-path: polygon(0 0, 60% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 60% 0, 100% 100%, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

@keyframes leftCanvasClose {
  0% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  50% {
    -webkit-clip-path: polygon(0 0, 60% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 60% 0, 100% 100%, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

// Top Canvas  Animation

@keyframes topCanvasOpen {
  0% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
  }

  to {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

@keyframes topCanvasClose {
  0% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 70%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 70%);
  }
  50% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 70%, 0 70%);
    clip-path: polygon(0 0, 100% 0, 100% 70%, 0 70%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 0 70%);
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 70%);
  }
}

.offcanvas_overlay,
.transparent-window {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.3);
  z-index: 300;
  @include transition(
    opacity 1s cubic-bezier(0.19, 1, 0.22, 1),
    visibility 1s steps(1, end)
  );

  opacity: 0;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  cursor: url(../images/ui/cross.svg), url(../images/ui/cross.png), zoom-out;
}

body.offcanvas_bottom {
  .transparent-window {
    opacity: 1;
    pointer-events: auto;
  }
}

.navigation_overlay,
.topbar_overlay {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.3);
  z-index: 300;
  transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1),
    visibility 1s steps(1, end);
  opacity: 0;
  visibility: hidden;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;

  &.visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-delay: 0s;
  }
}

.navigation_overlay {
  z-index: 300;
}

.topbar_overlay {
  z-index: 5;
}