.#{$drawer-prefix-cls} {
  position: fixed;
  z-index: $popup-zindex;
  overflow-y: auto;
  background-color: $white;
  transition: transform $transition-time ease-out;

  &-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: $popup-zindex;
    visibility: hidden;
    background-color: $mask-bg;
    opacity: 0;
    transition: opacity $transition-time ease-out;

    &--show {
      visibility: visible;
      opacity: 1;
    }
  }

  &--left,
  &--right {
    top: 0;
    bottom: 0;
  }

  &--top,
  &--bottom {
    right: 0;
    left: 0;
  }

  &--left {
    left: 0;
    transform: translateX(-100%);
  }

  &--right {
    right: 0;
    transform: translateX(100%);
  }

  &--top {
    top: 0;
    transform: translateY(-100%);
  }

  &--bottom {
    bottom: 0;
    transform: translateY(100%);
  }

  &--open {
    transform: translate(0);
  }
}