@import './variables.scss';
@import '~@alifd/next/lib/core/style/_global';
@import '~@alifd/next/lib/core/style/_motion';
@import '~@alifd/next/lib/drawer/scss/variable';
@import '~@alifd/next/lib/drawer/scss/mixin';

.#{$css-prefix}drawer-right,
.#{$css-prefix}drawer-left {
  &.#{$css-prefix}drawer-large {
    width: $b-design-large-size;
  }
  &.#{$css-prefix}drawer-medium {
    width: $b-design-medium-size;
  }
  &.#{$css-prefix}drawer-small {
    width: $b-design-small-size;
  }
  &.#{$css-prefix}drawer-fullscreen {
    width: calc(100% - #{$s-8});
    max-width: calc(100% - #{$s-8});
  }

  &.#{$css-prefix}drawer-large,
  &.#{$css-prefix}drawer-medium,
  &.#{$css-prefix}drawer-small,
  &.#{$css-prefix}drawer-fullscreen {
    box-shadow: -16px 0 32px 0 rgba(0, 0, 0, 0.1);
  }
}

.#{$css-prefix}drawer-header {
  padding: $s-6 $s-7 $s-5 $s-8;
}

.#{$css-prefix}drawer-body {
  padding: $s-5 $s-7 $s-5 $s-8;
}

.#{$css-prefix}drawer-top,
.#{$css-prefix}drawer-bottom {
  height: $b-design-top-size;
}

.#{$css-prefix}overlay-wrapper {
  .#{$css-prefix}drawer-multilevel,
  .#{$css-prefix}overlay-backdrop {
    z-index: 1000;
  }
}

// 底部按钮位置

// 底部按钮actions
.#{$css-prefix}drawer-footer {
  .#{$css-prefix}drawer-body {
    margin-bottom: 48px;
  }
  &.#{$css-prefix}drawer-with-top {
    .#{$css-prefix}drawer-body {
      margin-bottom: 100px;
    }
  }
  .#{$css-prefix}drawer-btn {
    position: absolute;
    bottom: 0;
    width: calc(100% - 48px);
    background-color: white;
  }
}
.#{$css-prefix}drawer-footer-right {
  .#{$css-prefix}drawer-btn {
    padding-bottom: $s-16;
  }
  .#{$css-prefix}drawer-btn-child {
    display: inline-flex;
    position: absolute;
    right: $s-12;
    text-align: center;
  }
}

.#{$css-prefix}drawer-footer-center {
  .#{$css-prefix}drawer-btn {
    padding-bottom: $s-16;
  }
  .#{$css-prefix}drawer-btn-child {
    display: inline-flex;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
}

.#{$css-prefix}drawer-footer-left {
  .#{$css-prefix}drawer-btn {
    padding-bottom: $s-6;
  }
  .#{$css-prefix}drawer-btn-child {
    display: inline-flex;
    left: $b-design-footer-btn-t;
    text-align: center;
    padding-left: 2px;
  }
}

.#{$css-prefix}drawer-footer-only-ok {
  .#{$css-prefix}btn-secondary {
    display: none;
  }
}

.#{$css-prefix}drawer-footer-only-cancel {
  .#{$css-prefix}btn-primary {
    display: none;
  }
  .#{$css-prefix}btn-secondary {
    margin-right: 0 !important;
  }
}

.#{$css-prefix}drawer-footer-reverse {
  .#{$css-prefix}drawer-btn-child {
    flex-direction: row-reverse;
    padding-top: $s-2;
    .#{$css-prefix}btn-primary {
      margin-right: $s-2 !important;
    }
    .#{$css-prefix}btn-secondary {
      margin-right: 0 !important;
    }
  }
}