index.less

@import '../../style/mixins/box.less';
@import '../../style/mixins/reset.less';
@import '../../style/motion/zoom.less';

.@{modal-prefix} {
  .reset-component-new();

  position: relative;
  pointer-events: none;
  width: auto;
  max-width: calc(100vw - 32px);
  margin: 0 auto;

  &-wrapper {
    z-index: 1000;
    overflow: auto;
    outline: none;

    .box(fixed);
  }

  &-sentinel {
    width: 0;
    height: 0;
    overflow: hidden;
    outline: none;
  }

  &-content {
    .reset-font-size();
    .reset-color();

    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    pointer-events: auto;
    overflow: hidden;
    border-radius: @modal-border-radius;
    box-shadow: @modal-box-shadow;

    > .@{header-prefix} {
      padding-left: 16px;
      padding-right: 16px;
    }
  }

  &-body {
    flex: 1;
    padding: 8px 16px;
    overflow: auto;

    &-title {
      .reset-font-size(@modal-body-title-font-size);

      font-weight: @modal-body-title-font-weight;
      color: @modal-body-title-color;
      margin-bottom: 4px;
    }

    &-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      padding-right: 16px;
      color: @modal-body-content-color;

      &-only-title {
        align-items: center;
        flex-direction: row;
        justify-content: start;

        .@{modal-prefix}-body-title {
          margin-bottom: 0;
        }
      }
    }

    &-confirm,
    &-info,
    &-success,
    &-warning,
    &-error {
      display: flex;
      padding: 0 16px;
    }

    &-icon {
      font-size: @modal-body-icon-font-size;
      line-height: 1;
      margin: 0 16px;
    }

    &-confirm {
      .@{modal-prefix}-body-icon {
        color: @modal-body-confirm-color;
      }
    }

    &-info {
      .@{modal-prefix}-body-icon {
        color: @modal-body-info-color;
      }
    }

    &-success {
      .@{modal-prefix}-body-icon {
        color: @modal-body-success-color;
      }
    }

    &-warning {
      .@{modal-prefix}-body-icon {
        color: @modal-body-warning-color;
      }
    }

    &-error {
      .@{modal-prefix}-body-icon {
        color: @modal-body-error-color;
      }
    }
  }

  &-footer {
    text-align: end;
    padding: 12px 16px;

    .@{button-prefix} + .@{button-prefix} {
      margin-left: 8px;
    }
  }

  &-centered {
    text-align: center;

    &::before {
      display: inline-block;
      width: 0;
      height: 100%;
      vertical-align: middle;
      content: '';
    }

    .@{modal-prefix} {
      display: inline-block;
      text-align: left;
      vertical-align: middle;
    }
  }
}

@media (max-width: @screen-sm-max) {
  .@{modal-prefix} {
    max-width: calc(100vw - 16px);
    margin: 8px auto;
  }

  .@{modal-prefix}-centered {
    .@{modal-prefix} {
      flex: 1;
    }
  }
}