@import "../lib.less";

.@{veui-prefix}-drawer {
  &-box {
    .@{veui-prefix}-dialog-content {
      display: flex;
      flex-direction: column;
      max-height: none;
      margin: 0;
      transform: translate(0, 0);
      border-radius: 0;
      overflow: auto;
      .veui-transition(transform);

      &-head {
        [ui~="s"]& {
          font-size: @dls-drawer-title-font-size-s;
        }

        [ui~="m"]& {
          font-size: @dls-drawer-title-font-size-m;
        }

        &-close {
          .@{veui-prefix}-icon {
            .dls-icon-size(
              @dls-drawer-close-icon-size,
              @dls-dialog-close-icon-min-size
            );
          }
        }
      }

      &-body {
        flex-grow: 1;
      }
    }
  }

  &-top {
    .@{veui-prefix}-dialog-content {
      .absolute(0, 0, auto, 0);
      width: auto !important;
      box-shadow: @dls-drawer-shadow-top;
    }
  }
  &-right {
    .@{veui-prefix}-dialog-content {
      .absolute(0, 0, 0, auto);
      width: @dls-drawer-width;
      box-shadow: @dls-drawer-shadow-right;
    }
  }
  &-bottom {
    .@{veui-prefix}-dialog-content {
      .absolute(auto, 0, 0, 0);
      width: auto !important;
      box-shadow: @dls-drawer-shadow-bottom;
    }
  }
  &-left {
    .@{veui-prefix}-dialog-content {
      .absolute(0, auto, 0, 0);
      width: @dls-drawer-width;
      box-shadow: @dls-drawer-shadow-left;
    }
  }

  &-box.@{veui-prefix}-overlay-enter,
  &-box.@{veui-prefix}-overlay-leave-to {
    &.@{veui-prefix}-drawer-top {
      .@{veui-prefix}-dialog-content {
        transform: translateY(-20px);
      }
    }
    &.@{veui-prefix}-drawer-right {
      .@{veui-prefix}-dialog-content {
        transform: translateX(20px);
      }
    }
    &.@{veui-prefix}-drawer-bottom {
      .@{veui-prefix}-dialog-content {
        transform: translateY(20px);
      }
    }
    &.@{veui-prefix}-drawer-left {
      .@{veui-prefix}-dialog-content {
        transform: translateX(-20px);
      }
    }
  }
}