@import './status.less';

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

@dialog-title-font-size: @icecream-font-size-title;
@dialog-content-font-size: @icecream-font-size-main;
@dialog-icon-font-size: @icecream-font-size-5;
@dialog-padding: @icecream-gap-lg;

.@{dialog-prefix}-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: @icecream-z-index-modal;
  overflow: auto;
}

.@{dialog-prefix} {
  // 参考 antd
  width: 416px;
  margin: 100px auto 48px auto;

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

  &-close {
    position: absolute;
    right: @dialog-padding - @icecream-gap-xs;
    top: @dialog-padding - @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;
    transition: @icecream-transitions;

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

  &-body {
    display: flex;
    padding: @dialog-padding;
    font-size: @icecream-font-size-main;
  }
}

.@{dialog-prefix}-body {
  &-icon {
    @padding-top: (getIcecreamLineHeightByPx(@dialog-title-font-size) - @dialog-icon-font-size) / 2px;

    margin-right: @icecream-gap-sm;
    padding-top: @padding-top;
    font-size: @dialog-icon-font-size;
    color: @icecream-color-orange-6;
    // line-height 居中 svg 不靠谱，设置成 0 换 padding 去调整
    line-height: 0;
  }

  &-main {
    width: 100%;
    // 参考 antd 的
    min-width: 177px;

    &-title {
      .extendBase();
      // 防止和 close 按钮重叠
      padding-right: @icecream-gap-lg;
      color: @icecream-bold-color;
      .setFontSize(@dialog-title-font-size);
      font-weight: @icecream-bold;
    }

    &-content {
      .extendBase();
      // 防止和 close 按钮重叠 24 + 按钮 16
      padding-right: @icecream-gap-lg + @dialog-title-font-size;
      color: @icecream-color-grey-10;
      font-size: @dialog-content-font-size;
    }

    // 有标题的情况
    &-title + &-content {
      padding-right: 0;
      margin-top: @icecream-gap-md;
    }

    &-footer {
      .extendBase();
      margin-top: @icecream-gap-lg;
      text-align: right;

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