@import "../lib.less";
@import "../variables/components/drawer.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;
      padding: 0 @veui-drawer-blank @veui-drawer-blank;
      .veui-transition(transform);

      &-head {
        height: @veui-drawer-head-height;
        color: #000;
        padding-left: 0;
        padding-right: 0;
        [ui~="s"]& {
          font-size: @veui-drawer-title-font-size-s;
        }

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

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

      &-body {
        flex-grow: 1;
        background-color: @veui-drawer-content-bg;
        padding: 0;
      }
      &-foot {
        text-align: center;
      }
    }
  }

  &-top {
    .@{veui-prefix}-dialog-content {
      .absolute(0, 0, auto, 0);
      width: auto !important;
    }
    [ui~="xs"]& .@{veui-prefix}-dialog-content{
      height: @veui-drawer-height-xs;
    }
    [ui~="s"]& .@{veui-prefix}-dialog-content{
      height: @veui-drawer-height-s;
    }
    [ui~="m"]& .@{veui-prefix}-dialog-content{
      height: @veui-drawer-height-m;
    }
  }
  &-right {
    .@{veui-prefix}-dialog-content {
      .absolute(0, 0, 0, auto);
    }
    [ui~="xs"]& .@{veui-prefix}-dialog-content{
      width: @veui-drawer-width-xs;
    }
    [ui~="s"]& .@{veui-prefix}-dialog-content{
      width: @veui-drawer-width-s;
    }
    [ui~="m"]& .@{veui-prefix}-dialog-content{
        width: @veui-drawer-width-m;
    }
    [ui~="l"]& .@{veui-prefix}-dialog-content{
      width: @veui-drawer-width-l;
    }
    [ui~="xl"]& .@{veui-prefix}-dialog-content{
      width: @veui-drawer-width-xl;
    }
  }
  &-bottom {
    .@{veui-prefix}-dialog-content {
      .absolute(auto, 0, 0, 0);
      width: auto !important;
    }
    [ui~="xs"]& .@{veui-prefix}-dialog-content{
      height: @veui-drawer-height-xs;
    }
    [ui~="s"]& .@{veui-prefix}-dialog-content{
      height: @veui-drawer-height-s;
    }
    [ui~="m"]& .@{veui-prefix}-dialog-content{
        height: @veui-drawer-height-m;
    }
  }
  &-left {
    .@{veui-prefix}-dialog-content {
      .absolute(0, auto, 0, 0);
    }
    [ui~="xs"]& .@{veui-prefix}-dialog-content{
      width: @veui-drawer-width-xs;
    }
    [ui~="s"]& .@{veui-prefix}-dialog-content{
      width: @veui-drawer-width-s;
    }
    [ui~="m"]& .@{veui-prefix}-dialog-content{
        width: @veui-drawer-width-m;
    }
    [ui~="l"]& .@{veui-prefix}-dialog-content{
      width: @veui-drawer-width-l;
    }
    [ui~="xl"]& .@{veui-prefix}-dialog-content{
      width: @veui-drawer-width-xl;
    }
  }

  &-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);
      }
    }
  }
}