// ┌─────────┐
// │ Drawers │
// └─────────┘
//  ↳ http://esri.github.io/calcite-web/documentation/patterns/#drawers
//  ↳ patterns → _drawers.md

$transform-transition: transform 200ms cubic-bezier(0.215, 0.440, 0.420, 0.880);
$opacity-transition: opacity 200ms linear;

@mixin drawer() {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  visibility: hidden;
  overflow: hidden;
  opacity: 0;
  background: $transparent-black;
  @include transition(visibility 0ms linear 200ms, $opacity-transition);
  z-index: 1001;
  &.is-active {
    visibility: visible;
    opacity: 1;
    background-color: $transparent-black;
    @include transition-delay(0ms);
    &.drawer-left .drawer-nav {
      @include transform(translate3d($drawer-width,0,0));
      @if ($include-right-to-left) {
        html[dir="rtl"] & {
          @include transform(translate3d(-$drawer-width,0,0));
        }
      }
    }
    &.drawer-right .drawer-nav {
      @include transform(translate3d(-$drawer-width,0,0));
      @if ($include-right-to-left) {
        html[dir="rtl"] & {
          @include transform(translate3d($drawer-width,0,0));
        }
      }
    }
  }
}

@mixin drawer-nav() {
  position: absolute;
  top: 0;
  height: 100%;
  width: $drawer-width;
  margin: 0;
  padding: 0;
  list-style: none;
  background: $white;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  @include transform(translate3d(0,0,0));
  @include transition-prefixed($transform-transition);
}

@if $include-drawers == true {
  .drawer { @include drawer();}
  .drawer-nav { @include drawer-nav();}
  .drawer-left .drawer-nav  {
    left: -$drawer-width;
    @if ($include-right-to-left) {
      html[dir="rtl"] & {
        left: 100%;
      }
    }
  }
  .drawer-right .drawer-nav {
    left: 100%;
    @if ($include-right-to-left) {
      html[dir="rtl"] & {
        left: -$drawer-width;
      }
    }
  }
  .drawer-no-overflow { overflow: hidden; }
}