//
// @description :
// @author      : Adarsh Pastakia
// @copyright   : 2017
// @license     : MIT
.ui-drawer-toggle {
  cursor     : pointer;
  margin     : 0 0.5em;
  display    : inline-block;
  line-height: 1;

  &:hover {}
}

.ui-drawer {
  pointer-events: none;
  z-index       : $z-index-drawer;
  @include position(absolute, 0);

  > .ui-drawer-content {
    z-index         : 1;
    width           : $drawer-width;
    pointer-events  : all;
    background-color: $drawer-bg;
    @include position(absolute, 0 auto);
    @include transition(all .5s);

    > .ui-drawer-close {
      width      : 100%;
      line-height: 2em;
      padding    : 0 0.5em;
      margin-top : -.25em;
      color      : $secondary;
    }
  }

  > .ui-drawer-shim {
    z-index       : 0;
    display       : none;
    background    : $drawer-shim;
    pointer-events: all;
    @include position(absolute, 0);
  }

  &.start {
    > .ui-drawer-content {
      left: -1 * $drawer-width;

      > .ui-drawer-close {
        text-align: right;
        text-align: end;
      }
    }

    &.show > .ui-drawer-content {
      left: 0;
    }
  }

  &.end {
    > .ui-drawer-content {
      right: -1 * $drawer-width;

      > .ui-drawer-close {
        text-align: left;
        text-align: start;
      }
    }

    &.show > .ui-drawer-content {
      right: 0;
    }
  }

  &.show {
    & > .ui-drawer-content {
      @include box-shadow(0 0 50px 5px $base-shadow-color);
    }

    & > .ui-drawer-shim {
      display: block;
    }
  }
}

.rtl,
[dir="rtl"] {
  .ui-drawer {
    .ui-drawer-close .ui-icon {
      @include transform(scaleX(-1));
    }

    &.start {
      > .ui-drawer-content {
        right: -1 * $drawer-width;
        left : auto;
      }

      &.show > .ui-drawer-content {
        right: 0;
      }
    }

    &.end {
      > .ui-drawer-content {
        left : -1 * $drawer-width;
        right: auto;
      }

      &.show > .ui-drawer-content {
        left: 0;
      }
    }
  }
}
