/**
 *
 * This file may have been modified by Bytedance Inc. (“Bytedance Inc.'s Modifications”). 
 * All Bytedance Inc.'s Modifications are Copyright (year) Bytedance Inc..  
 * 
 * This source code is licensed under the Apache license.
 * See LICENSE file in the project root for license information.
 *
 */
/* modal 样式 */
.@{ant-prefix}-modal-content:not(.sp-null) {
  max-height: 640px;
  display: flex;
  flex-direction: column;

  // 关闭按钮位置
  .@{ant-prefix}-modal-close {
    right: 8px;
    .@{ant-prefix}-modal-close-x {
      font-size: 20px;
    }
  }
  // 内容区域
  .@{ant-prefix}-modal-body {
    flex: 1;
    position: relative;
    overflow: auto;
    color: @color-text-icon-1;

    // 有滚动条时，底部出现遮罩

    &.sp-modal-body-scroll {
      padding-bottom: 24px;
      & + .@{ant-prefix}-modal-footer {
        position: relative;

        &::before {
          content: '';
          width: 100%;
          height: 24px;
          display: block;
          position: absolute;
          background: linear-gradient(0deg, #fff 0%, rgba(0, 0, 0, 0) 100%);
          left: 0;
          top: -24px;
        }
      }
    }
  }
}

// 自定义modal样式
.@{ant-prefix}-modal {
  // 无padding

  // 默认底部，按钮交换位置

  &.modal-with-default-footer {
    .@{ant-prefix}-modal-footer {
      display: flex;
      flex-direction: row-reverse;

      button + button {
        margin-left: 0;
        margin-right: 8px;
      }
    }
  }

  &:not(.modal-with-default-footer) {
    .@{ant-prefix}-modal-body {
      padding-bottom: @padding-lg;
    }
  }

  &.modal-body-spacing-none {
    .@{ant-prefix}-modal-body {
      padding: 0;
      margin: 0;
    }
  }
  // icon相关

  .modal-confirm-icon {
    font-size: 24px;
    line-height: 24px;
    float: left;
    margin-right: 0;

    &.sp-success {
      color: @color-function-success-main;
    }

    &.sp-info {
      color: @color-primary-brand;
    }

    &.sp-warning {
      color: @color-function-warning-main;
    }

    &.sp-error {
      color: @color-function-danger-main;
    }
  }
}

// 自定义头部img
.@{ant-prefix}-modal-confirm.sp-header-img {
  padding-top: @modal-header-img-height;
  background-size: 100% @modal-header-img-height;
  background-position: top;
  background-repeat: no-repeat;
  border-radius: @border-radius-base @border-radius-base 0 0;
  .@{ant-prefix}-modal-content {
    border-radius: 0 0 @border-radius-base @border-radius-base;
  }
}

/* confirm 样式 */
.@{ant-prefix}-modal-confirm {
  
  &-img {
    .@{ant-prefix}-modal-body {

      &:not(.sp-null) {
        padding: 0;
      }
    }
    .@{ant-prefix}-modal-confirm-body-wrapper {
      padding: 24px;
    }
    .@{ant-prefix}-modal-confirm-img {

      img {
        width: 100%;
        height: 192px;
      }
    }
  }

  &-closable-bottom-body {
    .@{ant-prefix}-modal-body {

      &:not(.sp-null) {
        overflow: visible;
      }
    }

    .@{ant-prefix}-modal-confirm-img {

      img {
        width: 100%;
        height: 360px;
      }
    }
  }

  &-close-botton {
    width: 30px;
    height: 30px;
    border: 1px solid #fff;
    border-radius: 50%;
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    margin: auto;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .@{ant-prefix}-modal-content .@{ant-prefix}-modal-close {
    right: 16px;
    top: 16px;
    .@{ant-prefix}-modal-close-x {
      width: 16px;
      height: 16px;
      font-size: 16px;
      line-height: 16px;
    }
  }
  .@{ant-prefix}-modal-confirm-body {
    .@{ant-prefix}-modal-confirm-content {
      margin-top: 16px;
    }
    & > .modal-confirm-icon + .@{ant-prefix}-modal-confirm-title {
      padding-left: 8px;
      padding-right: 24px;
      line-height: 24px;
      & + .@{ant-prefix}-modal-confirm-content {
        margin-left: 32px;
      }
    }
  }
  .@{ant-prefix}-modal-confirm-btns {
    display: flex;
    flex-direction: row-reverse;

    > button.hidden-cancel-button {
      display: none !important;
    }

    > button:not(.hidden-cancel-button) + button {
      margin-right: 8px;
    }
  }
}