@import '../variables';

.mdk-drawer-layout {
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  
  &--fullbleed {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .mdk-drawer {
    position: relative;
    &[data-persistent] {
      width: $mdk-drawer-width;
      &[data-position=left] {
        order: 0;
      }
      &[data-position=right] {
        order: 2;
      }
    }
  }
}
.mdk-drawer-layout__content {
  position: relative;
  height: 100%;
  transition: transform 0.2s;
  min-width: 320px;
  z-index: 0;
  order: 1;
  flex: 1 1 0%;

  // explicit CSS modifier
  // intended for use with .mdk-drawer-layout[has-scrolling-region]
  &--scrollable {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

[dir=rtl] .mdk-drawer-layout {
  .mdk-drawer[data-persistent] {
    &[data-position=left] {
      order: 2;
    }
    &[data-position=right] {
      order: 0;
    }
  }
}