// 
// @description : 
// @author      : Adarsh Pastakia
// @copyright   : 2016
// @license     : MIT

.ui-drawer-toggle {
  cursor : pointer;
  display: inline-block;
  margin : 0 .25em;
  padding: .25em;
  color  : $link-text;

  &:hover {
    color: $link-hover-text;
  }
}

.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%;
      height : 1.5em;
      padding: .25em .5em;
    }
  }

  > .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;
      }

      > .ui-drawer-close:before {
        font-family: Framework;
        content    : $fi-ui-arrow-thin-left;
      }
    }

    &.show > .ui-drawer-content {
      left: 0;
    }
  }

  &.end {
    > .ui-drawer-content {
      right: -1 * $drawer-width;

      > .ui-drawer-close {
        text-align: left;
        text-align: start;
      }

      > .ui-drawer-close:before {
        font-family: Framework;
        content    : $fi-ui-arrow-thin-right;
      }
    }

    &.show > .ui-drawer-content {
      right: 0;
    }
  }

  &.show {
    & > .ui-drawer-content {
      @include box-shadow(0 0 50px 5px $base-shadow-dark);
    }

    & > .ui-drawer-shim {
      display: block;
    }
  }
}

.rtl,
[dir="rtl"] {
  .ui-drawer.start {
    > .ui-drawer-content {
      right: -1 * $drawer-width;
      left : auto;

      > .ui-drawer-close {}

      > .ui-drawer-close:before {
        font-family: Framework;
        content    : $fi-ui-arrow-thin-right;
      }
    }

    &.show > .ui-drawer-content {
      right: 0;
    }
  }

  .ui-drawer.end {
    > .ui-drawer-content {
      left : -1 * $drawer-width;
      right: auto;

      > .ui-drawer-close {}

      > .ui-drawer-close:before {
        font-family: Framework;
        content    : $fi-ui-arrow-thin-left;
      }
    }

    &.show > .ui-drawer-content {
      left: 0;
    }
  }
}
@if $enable-blur {
  .ua-safari .ui-drawer > .ui-drawer-content {
    background-color: rgba($drawer-bg, .6);
    @include backdrop-blur(50px);
  }
}