@modal-prefix: ~'@{icecream-prefix}-modal';

@modal-header-font-size: @icecream-font-size-title;
@modal-header-padding-vertical: @icecream-gap-md;
@modal-header-padding-horizontal: @icecream-gap-lg;

.@{modal-prefix}-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: @icecream-z-index-modal;
  overflow: auto;
  // TODO 开启这个，应该让我们的 Mask 被点击，而不是 rc 的的 wrap
  // 记得考虑 Modal 滚动的场景
  // pointer-events: none;

  &-centered {
    text-align: center;

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

    .@{modal-prefix} {
      top: 0;
      display: inline-block;
      padding-bottom: 0;
      text-align: start;
      vertical-align: middle;
    }
  }
}

.@{modal-prefix} {
  pointer-events: auto;
  position: relative;

  &-content {
    position: relative;
    background-color: @icecream-white;
    border: none;
    border-radius: @icecream-border-radius @icecream-border-radius;
    background-clip: padding-box;
    box-shadow: @icecream-box-shadow-lg;
  }

  &-close {
    @icon-size: @modal-header-font-size;
    @title-height: getIcecreamLineHeightByPx(@modal-header-font-size) + @modal-header-padding-vertical * 2;

    .extendBase;
    position: absolute;
    right: 24px - @icecream-gap-xs;
    top: (@title-height - @icon-size) / 2 - @icecream-gap-xs;
    // 热区范围
    padding: @icecream-gap-xs;
    line-height: 0;
    color: @icecream-color-grey-7;
    font-size: @icecream-font-size-title;
    cursor: pointer;
    outline: none;
    border: 0;
    background: transparent;

    &:hover {
      color: @icecream-color-grey-8;
    }
  }

  &-header {
    .extendBaseEnhanced();
    padding: @icecream-gap-md @icecream-gap-lg;
    color: @icecream-color-grey-10;
    .setFontSize(@modal-header-font-size);
    font-weight: @icecream-bold;
    border-radius: @icecream-border-radius @icecream-border-radius 0 0;
    background: @icecream-white;
    border-bottom: 1px solid @icecream-color-grey-5;
  }

  &-body {
    padding: @icecream-gap-lg;
  }

  &-footer {
    padding: 0 @icecream-gap-lg @icecream-gap-lg;
    text-align: right;
    border-radius: @icecream-border-radius;

    .@{button-prefix} + .@{button-prefix} {
      margin-left: @icecream-gap-sm;
    }
  }
}

@media (min-width: 768px) {
  .@{modal-prefix} {
    width: 600px;
    margin: 100px auto 48px auto;
  }

  .@{modal-prefix}-wrap-centered .@{modal-prefix} {
    margin: 0 auto;
  }
}