// Container that the modal scrolls within
.#{$modal-prefix-cls} {
  $root: #{&};
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $zindex-modal;
  display: none;
  overflow: hidden;
  // Prevent Chrome on Windows from adding a focus outline. For details, see
  // https://github.com/twbs/bootstrap/pull/10951.
  outline: 0;
  // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
  // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
  // See also https://github.com/twbs/bootstrap/issues/17695

  // When fading in the modal, animate it to slide down
  &.fade #{$root}-dialog {
    @include transition($modal-transition);
    transform: translate(0, -25%);
  }

  &.show #{$root}-dialog {
    transform: translate(0, -50%);
  }

  &-open {
    overflow: hidden;
  }

  &-open #{$root} {
    overflow-x: hidden;
    overflow-y: auto;
  }

  &-dialog {
    position: relative;
    top: 50%;
    width: auto;
    margin: 0 auto;
  }

  &-dialog-drag {
    top: 100px;
    pointer-events: auto;

    #{$root}-header{
      cursor: move;
    }
  }

  &.show &-dialog-drag{
    transform: none;
  }

  &-content {
    @include border-radius($border-radius);
    @include box-shadow($modal-content-xs-box-shadow);
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: calc(100vw - #{$modal-dialog-margin}*2);
    max-height: calc(100vh - #{$modal-dialog-margin}*2);
    margin-right: auto;
    margin-left: auto;
    background-color: $modal-content-bg;
    background-clip: padding-box;
    // Remove focus outline from opened modal
    outline: 0;
  }

  &-noMask {
    pointer-events: none;
  }

  &-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: $zindex-modal-backdrop;
    visibility: hidden;
    background-color: $modal-backdrop-bg;
    opacity: 0;
    transition: all $animation-time;
  
    // Fade for backdrop
    &.fade {
      visibility: hidden;
      opacity: 0;
    }
  
    &.show {
      visibility: visible;
      opacity: $modal-backdrop-opacity;
    }
  }

  &-header {
    @include border-top-radius($border-radius);
    display: flex;
    align-items: center; // vertically center it
    justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
    padding: $modal-header-padding-y $modal-header-padding-x;
    flex-shrink: 0;
    height: $modal-header-height;
    border-bottom: 1px solid $gray-light-9;
  
    .close {
      @include hover-focus {
        color: $black;
      }
      padding: 0;
      font-size: $modal-close-size;
      color: rgba($black, .7);
      cursor: pointer;
      background: transparent;
      border: 0;
    }
  }

  &-title {
    margin-bottom: 0;
    font-size: $modal-title-font-size;
    line-height: $modal-title-line-height;
    color: $black;
  }

  &-body {
    @extend %thin-scroll;
    //position: relative;
    // Enable `flex-grow: 1` so that the body take up as much space as possible
    // when should there be a fixed height on `.modal-dialog`.
    flex-grow: 1;
    //解决IE下 父级flex元素  max-height 无效问题， 150px为 modal-header + modal-footer 高度
    max-height: calc(100vh - #{$modal-dialog-margin} * 2 - 150px)\9;
    padding: $modal-inner-padding-y $modal-inner-padding-x;
    overflow: auto;
  
    .dropdown {
      position: static;
    }
  }

  &-footer {
    display: flex;
    align-items: center; // vertically center
    justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
    padding: $modal-footer-padding-y $modal-footer-padding-x;
    flex-shrink: 0;
    height: $modal-footer-height;
    border-top: 1px solid $gray-light-9;
  
    // Easily place margin between footer elements
    > :not(:first-child) {
      margin-left: 5px;
    }
  
    > :not(:last-child) {
      margin-right: 5px;
    }
  }

  // Measure scrollbar width for padding body during modal show/hide
  &-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll;
  }

  &-confirm {
    .#{$modal-prefix-cls}-footer {
      border-top: 0;
      height: $modal-confirm-footer-height;
      padding: 0 $modal-confirm-footer-padding-x $modal-confirm-footer-padding-y $modal-confirm-footer-padding-x
    }
    // .#{$modal-prefix-cls}-body {
    //   padding: $modal-inner-padding-y $modal-inner-padding 0 $modal-inner-padding
    // }
    &-header {
      padding-bottom: 8px;
      position: relative;
  
      &-title {
        display: inline-block;
        font-size: $font-size-base;
        font-weight: bold;
        line-height: 21px;
        color: $body-color;
        margin-left: 32px;
        margin-top: 6px;
      }
      &-icon {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 21px;
      }
    }
  
    &-body {
      position: relative;
      padding-top: 0;
      padding-left: 32px;
      margin-top: 0;
      font-size: $font-size-sm;
    }
  }
}