@mixin drawer(
  $direction: left,
  $mode: push,
  $width: 320px,
  $height: 100%,
  $background: $white
) {

  width: $width;
  height: $height;
  background-color: $background;

  @if ($direction == left) {

    top: 0;
    left: 0;

    @if ($mode == push or $mode == overlay) {
      transform: translateX(-100%);
    }

    @if ($mode == push or $mode == pull) {
      @include drawer-transform-x($width);
    }

  } @else if ($direction == right) {

    top: 0;
    right: 0;

    @if ($mode == push or $mode == overlay) {
      transform: translateX(100%);
    }

    @if ($mode == push or $mode == pull) {
      @include drawer-transform-x($width * -1);
    }

  } @else if ($direction == top) {

    top: 0;
    left: 0;

    @if ($mode == push or $mode == overlay) {
      transform: translateY(-100%);
    }

    @if ($mode == push or $mode == pull) {
      @include drawer-transform-y($height);
    }

  } @else if ($direction == bottom) {

    bottom: 0;
    left: 0;

    @if ($mode == push or $mode == overlay) {
      transform: translateY(100%);
    }

    @if ($mode == push or $mode == pull) {
      @include drawer-transform-y($height * -1);
    }
  }

  @if ($mode == overlay or $direction == top or $direction == bottom) {
    z-index: $drawer-zindex;
  } @else {
    z-index: $drawer-zindex;
  }

  @if ($mode == push or $mode == pull or $mode == overlay) {
    @include transition(
      visibility 0s
      linear $drawer-duration,
      opacity 5ms linear $drawer-duration,
      transform $drawer-duration $drawer-easing
    );
  }

  &.drawer-active {
    //	transition: opacity 0.05s, transform $drawer-duration $drawer-easing;
  }
}

@mixin drawer-transform-x($width) {
  &.drawer-active ~ .drawer-push,
  &.drawer-active ~ .drawer-overlay,
  &.drawer-active ~ .wrapper {
    transform: translateX($width);
  }
}

@mixin drawer-transform-y($height) {
  &.drawer-active ~ .drawer-push,
  &.drawer-active ~ .drawer-overlay,
  &.drawer-active ~ .wrapper {
    transform: translateY($height);
  }
}

.container-fluid {
  //	overflow-x: hidden;
  //	position: absolute;
  //	top: 0;
  //	right: 0;
  //	left: 0;
  //	height: 100%;
  //	overflow-y: scroll;
  //	overscroll-behavior-y: contain;
  //-webkit-transform: translate3d(0, 0, 0);

  .drawer-active & {
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
  }
}


.drawer-push {
  @include transition(transform $drawer-duration $drawer-easing);
}

.drawer-panel {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  display: flex;
  z-index: 99999;
  will-change: transform;
}

@if index($drawer-directions, left) {

  .drawer-left {
    @include drawer(left);
    z-index: 99999;
  }

}

@if index($drawer-directions, right) {
  .drawer-right {
    @include drawer(right);
    z-index: 99999;
  }
}

@if index($drawer-directions, top) {
  .drawer-top {
    @include drawer(top, push, 100%, 260px);
  }
}

@if index($drawer-directions, bottom) {
  .drawer-bottom {
    @include drawer(bottom, push, 100%, 400px);
  }
}

.drawer-active {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  @include transition(transform $drawer-duration $drawer-easing);
  //opacity $drawer-overlay-duration ease-in;
}

.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: $drawer-overlay-z-index;
  width: 100%;
  height: 100%;
  background-color: $drawer-overlay-bg;
  visibility: hidden;
  opacity: 0;
  user-select: none;
  @include transition(
    visibility 5ms linear $drawer-duration,
    transform $drawer-duration $drawer-easing,
    opacity $drawer-overlay-duration ease
  );

  .bg-visible & {
    visibility: visible;
    opacity: 1;
    @include transition(
      visibility 5ms linear $drawer-duration,
      opacity 5ms linear
    );
  }

  .drawer-open & {
    will-change: transform, opacity;
    visibility: visible;
    opacity: 1;
    @include transition(
      transform $drawer-duration $drawer-easing,
      opacity $drawer-overlay-duration ease
    );
  }
}