@drawer-size: 32em;

.drawer {
  position: absolute !important;
  margin: 0 !important;
  box-sizing: border-box;
  > .content {
    height: 100% !important;
    max-height: 100% !important;
  }
  //default in right

  &.right, &.left {
    top: 0;
    height: 100%;
  }
  &.right:not(.modal-sm):not(.modal-lg):not(.modal-xl):not(.modal-fl), &.left:not(.modal-sm):not(.modal-lg):not(.modal-xl):not(.modal-fl) {
    //max-width: 80%;
    width: @drawer-size;
  }
  &.right {
    right: 0;
    left: auto;
  }
  &.left {
    left: 0;
    right: auto;
  }
  &.top, &.bottom {
    width: 100%;
    max-width: none;
    height: @drawer-size;
    max-height: 80%;
  }
  &.top {
    top: 0;
    bottom: auto;
  }
  &.bottom {
    bottom: 0;
    top: auto;
  }
  &:not(.right):not(.left):not(.top):not(.bottom) {
    top: 0;
    width: @drawer-size;
    max-width: 80%;
    height: 100%;

    right: 0;
    left: auto;
  }
}