.@{css-prefix}-modal-backdrop, .bui-modal-backdrop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: @modal-backdrop-bg;
  height: 100%;
  z-index: 1050;
}

.@{css-prefix}modal-open {
  overflow: hidden;
}

.@{css-prefix}modal-open.@{css-prefix}modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.@{css-prefix}modal {
  display: flex;
  //position: absolute;
  overflow: auto;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  align-items: center;
  &-topfix {
    align-items: start;
  }

  .bui-modal-dialog {
    position: relative;
    width: @modal-md-width;
    background-color: @modal-bg;
    border-radius: @modal-border-radius;
    box-shadow: @modal-shadow;
    margin: auto;

    &.bui-modal-sm {
      width: @modal-sm-width;
    }

    &.bui-modal-lg {
      width: @modal-lg-width;
    }

    &-info-title {
      .bui-modal-dialog-type(@modal-title-info-color);
    }

    &-success-title {
      .bui-modal-dialog-type(@modal-title-success-color);
    }

    &-warning-title {
      .bui-modal-dialog-type(@modal-title-warning-color);
    }

    &-error-title {
      .bui-modal-dialog-type(@modal-title-danger-color);
    }

    &-type-content {
      padding-left: @padding-lg + 2px;
    }
  }

  .bui-modal-header {
    padding: @modal-header-padding;
    color: @modal-header-color;
    &.bui-modal-dividing-line {
      padding: 21px 24px;
    }
  }

  .bui-modal-title {
    line-height: @modal-title-line-height;
    font-size: @modal-title-font-size;
    font-weight: @modal-title-font-weight;
    color: @modal-title-color;
  }

  .modal-close-icon {
    fill: @modal-close-icon-color;
    position: absolute;
    top: 25px;
    right: 25px;
    cursor: pointer;

    &:hover {
      fill: @modal-close-icon-hover-color;
    }
  }

  .bui-modal-body {
    padding: 0 24px;
    color: @modal-body-color;
    font-size: @modal-body-font-size;

    &.bui-modal-dividing-line {
      padding: 0;
      border-top: 1px solid @modal-dividing-border;
      border-bottom: 1px solid @modal-dividing-border;
    }
    &.bui-no-slot-head {
      padding-top: 24px;
      border-top: none;
    }

    &.bui-no-slot-footer {
      padding-bottom: 24px;
      border-bottom: none;
    }
  }

  .bui-modal-footer {
    padding: 32px 24px 24px 24px;
    text-align: right;

    &.bui-modal-dividing-line {
      padding: 16px 24px;
    }

    .bui-btn {
      margin-left: @modal-footer-button-margin-left;
    }
  }
  // 全局的 close icon
  .bui-modal-close-icon {
    fill: @modal-close-icon-color;
    position: absolute;
    top: 25px;
    right: 25px;
    cursor: pointer;

    &:hover {
      fill: @modal-close-icon-hover-color;
    }
  }
}

.@{css-prefix}modal-backdrop {
  transition: opacity 0.18s linear;
  opacity: 0;

  &.in {
    opacity: 1;
  }
}

.modal-fade-enter-active,
.modal-fade-leave-active {
  transition: opacity 0.18s linear;
  opacity: 1 !important;

  &.modal-fade-enter,
  &.modal-fade-leave-active {
    opacity: 0 !important;
  }
}

.bui-modal-dialog-type(@icon-fill) {
  .bui-modal-dialog-type-title-icon {
    vertical-align: -3px;
    margin-right: @padding-xs;
    fill: @icon-fill;
  }
}
.@{css-prefix}modal-rtl {
  direction: rtl;
  .modal-close-icon, .bui-modal-close-icon {
    right: auto;
    left: 25px;
  }
  .bui-modal-footer {
    text-align:left;
  }
}