@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';
@import '../../../styles/mixins.scss';

$class-prefix: 'cn-ui-m';
$sizes: small, medium, large;
/*
@desc transparent
@semantic 透明色
@category default
@unconfigurable
*/
$-color-transparent: transparent;
/*
@desc padding-lr
@semantic 左右内边距
@namespace size/common
*/
$-dialog-padding-lr: $m-s-24;
/*
@desc title-min-height
@semantic 标题高度
@namespace size/title
*/
$-dialog-title-min-height: $m-s-48;
/*
@desc spacing
@senmantic 元素间隙
*/
$-box-medium-spacing: $m-s-6;
/*
@desc title
@semantic 中标题-字号
@group p.font-size
*/
$-p-title-font-size: $m-s-16;
/*
@desc title-font-size
@semantic 标题字体大小
@namespace size/title
*/
$-dialog-title-font-size: $-p-title-font-size;
/*
@desc centered-icon-size
@semantic 居中模式居中弹窗的图标大小
@namespace size/title
*/
$-dialog-centered-icon-size: $m-s-27;
/*
@desc help3
@semantic 帮助提示3
@category function
*/
$-color-help-3: $m-color-primary;
/*
@desc warning3
@semantic 警告提示3
@category function
*/
$-color-warning-3: $m-color-warning;
/*
@desc success3
@semantic 成功提示3
@category function
*/
$-color-success-3: $m-color-success;
/*
@desc error3
@semantic 错误提示3
@category function
*/
$-color-error-3: $m-color-error;
/*
@desc notice3
@semantic 告知提示3
@category function
*/
$-color-notice-3: $m-color-primary;
/*
@desc title-color
@semantic 标题颜色
@namespace style/title
*/
$-dialog-title-font-color: $m-color-text-title1;
/*
@desc content-bottom
@semantic 标题顶部间隙
@namespace size/title
*/
$-dialog-centered-title-margin-top: $m-s-9;
/*
@desc content-top
@semantic 标题底部间隙
@namespace size/title
*/
$-dialog-centered-title-margin-bottom: $m-s-9;
/*
@desc content-font-size
@semantic 内容字体大小
@namespace size/content
*/
$-dialog-content-font-size: $m-s-14;
/*
@desc padding
@senmantic 上下内边距
@unconfigurable
*/
$-box-medium-padding-ver: $m-s-6;
/*
@desc padding
@senmantic 水平内边距
@unconfigurable
*/
$-box-medium-padding-hoz: $m-s-12;
/*
@desc divider-width
@semantic 分割线粗细
@namespace size/title
*/
$-dialog-divider-width: $m-s-base;
/*
@desc centered-border-color
@semantic 分割线颜色
@namespace style/common
*/
$-dialog-centered-border-color: $m-color-bg;
$-dialog-divider-color: $m-color-bg-disabled;

.#{$hashClassName}.#{$class-prefix}-dialog {
  border-radius: $m-radius-larger;
  display: flex;
  flex-direction: column;
  width: calc(100% - #{$m-s-80});
  max-height: calc(100vh - #{$m-s-160});
  background-color: $m-color-bg-white;

  &--centered {
    border-radius: $m-radius-larger;
  }

  .#{$class-prefix}-dialog {
    &-container {
      flex: 1;
      position: relative;
      overflow: auto;
      padding-top: $m-s-20;
      @include flex(row, flex-start, flex-start);
      box-sizing: border-box;

      &--centered {
        padding: $m-s-15 $m-s-12;
        flex-direction: column;
      }

      &--ios {
        justify-content: flex-start;
        align-items: center;
      }
    }

    &-main {
      flex: 1;
    }

    &-header {
      @include flex(row, center flex-start);
      padding: 0 $m-s-24 $m-s-12;
      box-sizing: border-box;
      justify-content: center;

      &--centered {
        padding-left: 0;
        border: none;
        min-height: auto;
      }
    }

    &-icon {
      margin-right: $m-s-4;
      // 实际图标偏小，做一下调整
      font-size: calc(#{$-dialog-title-font-size} * 1.2);
      line-height: $-dialog-title-min-height;
      // margin-top: calc((#{$-dialog-title-min-height} - #{$-dialog-title-font-size}) / 4);

      &--centered {
        margin-right: 0;
        font-size: $-dialog-centered-icon-size;
        line-height: 1;
      }

      &--alert {
        color: $-color-help-3;
      }

      &--confirm {
        color: $-color-warning-3;
      }

      &--success {
        color: $-color-success-3;
      }

      &--error {
        color: $-color-error-3;
      }

      &--notice {
        color: $-color-notice-3;
      }

      &--warning {
        color: $-color-warning-3;
      }

      &--help {
        color: $-color-help-3;
      }
    }

    &-title {
      box-sizing: border-box;
      // margin-top: calc((#{$-dialog-title-min-height} - #{$-dialog-title-font-size} * 1.2) / 2);
      // margin-bottom: $m-s-6;
      color: $-dialog-title-font-color;
      font-size: $-dialog-title-font-size;
      font-weight: 600;

      &--centered {
        padding: 0;
        margin-top: $-dialog-centered-title-margin-top;
        margin-bottom: $-dialog-centered-title-margin-bottom;
      }

      &--ios {
        text-align: center;
        padding-right: 0;
      }
    }

    &-bottom-close-icon {
      position: absolute;
      bottom: calc(#{$m-s-86} * -1);
      left: 0;
      right: 0;
      padding: $m-s-24;
      margin: auto;
      color: $m-color-bg-darker1;
      box-sizing: content-box;
    }

    &-close-wrapper {
      @include flex(row, center);
      right: $m-s-10;
      top: $m-s-10;
      box-sizing: border-box;
      height: $-dialog-title-min-height;
      padding: $m-s-6 $-dialog-padding-lr;

      &--centered {
        position: absolute;
        right: 0;
        top: 0;
        height: auto;
        padding: $m-s-6;
      }
    }

    &-close {
      color: var(--dialog-close-icon-color);
      font-size: $-dialog-title-font-size;
      line-height: 1.2;

      &--centered {
        line-height: 1;
      }
    }

    &-close--single {
      position: absolute;
      right: 0;
    }

    &-content {
      @include flex(row, flex-start, flex-start);
      max-height: calc(100vh - var(--m-s-300, 300px));
      overflow: auto;
      color: $m-color-text-title3;

      &::-webkit-scrollbar {
        width: $m-s-4;
      }

      &::-webkit-scrollbar-thumb {
        width: $m-s-4;
        background: $m-color-bg;
        border-radius: $m-s-6;
      }

      &::-webkit-scrollbar-track {
        border-radius: $m-s-6;
        background-color: transparent;
      }
    }

    &-inner-content {
      flex: 1;
      padding: 0 $m-s-24;
      font-size: $-dialog-content-font-size;
      line-height: calc(#{$-dialog-content-font-size} + #{$m-s-10});

      &--fullwidth {
        padding-right: $-dialog-padding-lr;
      }

      &--centered {
        padding: 0;
      }
    }

    &-content--centered {
      text-align: center;
    }

    &-content--centered-android {
      text-align: left;
    }

    &-content-text {
      font-size: $-dialog-content-font-size;
      line-height: calc(#{$-dialog-content-font-size} + #{$m-s-6});
      color: var(--dialog-content-font-color);
      white-space: pre-wrap;
      word-break: break-word;
    }

    &-content-bgImgWrapper {
      position: relative;
    }

    &-content-innerWrapper {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
    }

    &-content-bgImg {
      width: 90%;
      opacity: 0;
    }

    &-footer > div:first-child:nth-last-child(3) ~ &-footer {
      @include flex(row);
    }

    &-footer.footer-2 {
      @include flex(row);
      .#{$class-prefix}-dialog-btn {
        margin-top: 0;
      }
    }

    &-footer {
      display: flex;
      flex-direction: column;
      gap: $m-s-8;
      padding: $m-s-20 $m-s-12 $m-s-12 $m-s-12;
      box-sizing: border-box;

      &--centered {
        flex-direction: row;
        align-items: flex-end;
        padding-bottom: $-box-medium-padding-ver;
        padding-right: $-box-medium-padding-ver;

        &-ios {
          justify-content: center;
          border-top-width: $-dialog-divider-width;
          border-top-color: $-dialog-centered-border-color;
          border-top-style: solid;
          padding: 0;
          text-align: center;
        }
      }
    }

    &-btn {
      flex: 1;
      width: 100%;
      margin-top: $m-s-6;
      &:first-child {
        margin-top: 0;
      }
    }

    &-btn--centered {
      display: flex;
      flex: 1;
      height: var(--dialog-footer-centered-height);
      padding-left: $m-s-6;
      padding-right: $m-s-6;

      &-ok {
        font-weight: $m-font-weight-semi-bold;
      }

      &-cancel {
        font-weight: $m-font-weight;
      }
    }

    &-btn-col {
      &--ios {
        flex: 1;
        border-right-width: $-dialog-divider-width;
        border-right-style: solid;
        border-right-color: $-dialog-centered-border-color;
        text-align: center;

        &:last-child {
          border-right: none;
        }
      }
    }
  }
}

// 兼容在CnSlider中使用
.#{$hashClassName}.cn-ui-m-modal {
  .cn-ui-m-dialog-popup {
    --modal-container-bg-color: $-color-transparent;
    @include flex(column);

    &-container {
      max-height: 80vh;
      width: 100%;
      // border-radius: var(--dialog-popup-corner);
      border-top-left-radius: $m-s-12;
      border-top-right-radius: $m-s-12;
      background-color: $-color-transparent;
      overflow: auto;
    }

    .#{$class-prefix}-icon {
      color: $m-color-bg-white;
      margin-top: $m-s-15;
      position: absolute;
      right: $m-s-12;
    }
  }
}
/* prettier-ignore */
[dir=rtl] .#{$hashClassName}.#{$class-prefix}-dialog {
  .#{$class-prefix}-dialog {
    &-inner-content {
      &--fullwidth {
        padding-right: $-dialog-padding-lr;
      }
    }
  }
}