@charset "UTF-8";

.os-drawer {
  position: fixed;
  width: $drawer-width;
  height: 100%;
  top: 0;
  left: -100%;
  padding-top: $os-header-height;
  padding-left: $action-bar-closed-width;
  background: $action-bar-background;
  background-color: $drawer-light-background;
  border-right: $drawer-border;
  @include transition(.25s ease-out all);
  z-index: $drawer-z-index;

  .plugin-view {
    margin-top: 0;

    h2:first-child {
      margin-top: 0;
    }
  }

  .drawer-toolbar {

    ul {

      list-style: none;
      padding: .5rem;
      margin: 0;
      text-align: right;

      li {
        display: inline-block;
        padding: 0;
        margin: 0;
        text-indent: 0;
        cursor: pointer;
        @include border-radius(2.5rem);
        width: 2.5rem;
        height: 2.5rem;
      }
    }
  }

  .drawer-content-wrap {
    position: relative;
    padding: $drawer-inner-padding;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    @include transition(.5s ease-in all);
  }

}

.drawer-dark {
  background-color: $drawer-dark-background;
}

// open state (css transition to these states)
.drawer-open {
  left: 0;

  .drawer-content-wrap {
    opacity: 1;
  }
}