@charset "UTF-8";
/*
  @component dialog
  @display Dialog
  @chinese 对话框
  @family feedback
*/
:root {
  /*
    @desc bg-color
    @semantic 背景色
    @namespace style/common
   */
  --dialog-bg-color: var(--color-white);
  /*
    @desc padding(l,r)
    @semantic 左右内间距
    @namespace size/common
   */
  --dialog-padding-lr: var(--s-4);
  /*
    @desc divider-width
    @semantic 分割线尺寸
    @namespace size/common
   */
  --dialog-divider-width: var(--line-1);
  /*
    @desc divider-color
    @semantic 分割线颜色
    @namespace style/common
   */
  --dialog-divider-color: var(--color-line1-1);
  /*
    @desc centered-border-color
    @semantic 分割线颜色
    @namespace style/common
   */
  --dialog-centered-border-color: var(--color-line1-4);
  /*
    @desc centered-corner
    @semantic 圆角尺寸
    @namespace size/common
   */
  --dialog-centered-corner: var(--corner-2);
  /*
    @desc title-font-size
    @semantic 标题字体大小
    @namespace size/title
   */
  --dialog-title-font-size: var(--p-title-font-size);
  /*
    @desc content-font-size
    @semantic 字体大小
    @namespace size/content
   */
  --dialog-content-font-size: var(--p-body-1-font-size);
  /*
    @desc content-font-color
    @semantic 字体颜色
    @namespace style/content
   */
  --dialog-content-font-color: var(--color-text1-3);
  /*
    @desc ok-font-weight
    @semantic 确认按钮字重
    @namespace size/footer
   */
  --dialog-ok-btn-font-weight: 600;
  /*
    @desc cancel-font-weight
    @semantic 取消按钮字重
    @namespace size/footer
   */
  --dialog-cancel-btn-font-weight: 400;
  /*
    @desc cancel-btn-gap
    @semantic 按钮间隙
    @namespace size/footer
   */
  --dialog-footer-btn-gap: var(--s-2);
  /**
    @desc close-icon-color
    @semantic 关闭图标颜色
    @namespace state/header
   */
  --dialog-close-icon-color: var(--color-text1-2);
  /*
    @desc title-color
    @semantic 标题颜色
    @namespace style/title
   */
  --dialog-title-font-color: var(--color-text1-4); }

.mt-dialog {
  background-color: var(--dialog-bg-color); }
  .mt-dialog--centered {
    border-radius: var(--dialog-centered-corner);
    width: 72vw; }
  .mt-dialog-container {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    box-sizing: border-box; }
    .mt-dialog-container--centered {
      padding: var(--s-5) var(--s-4);
      flex-direction: column; }
    .mt-dialog-container--ios {
      justify-content: flex-start;
      align-items: center; }
  .mt-dialog-main {
    flex: 1; }
  .mt-dialog-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    box-sizing: border-box;
    border-bottom: var(--dialog-divider-width) solid var(--dialog-divider-color);
    padding-left: var(--dialog-padding-lr); }
    .mt-dialog-header--centered {
      padding-left: 0;
      border: none; }
  .mt-dialog-icon {
    margin-right: var(--box-medium-spacing);
    margin-top: var(--s-4);
    line-height: 1.2; }
    .mt-dialog-icon--alert {
      color: var(--color-help-3); }
    .mt-dialog-icon--confirm {
      color: var(--color-warning-3); }
  .mt-dialog-title {
    flex: 1;
    box-sizing: border-box;
    margin-top: var(--s-4);
    margin-bottom: var(--s-4);
    color: var(--dialog-title-font-color);
    font-size: var(--dialog-title-font-size);
    line-height: 1.2;
    text-align: left; }
    .mt-dialog-title--fullwidth {
      padding-right: var(--s-4); }
    .mt-dialog-title--centered {
      padding: 0;
      margin-bottom: 0.5333333333333333vw; }
    .mt-dialog-title--ios {
      text-align: center;
      padding-right: 0; }
  .mt-dialog-close-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding-top: var(--s-4);
    padding-bottom: var(--s-4);
    padding-left: var(--dialog-padding-lr);
    padding-right: var(--dialog-padding-lr); }
    .mt-dialog-close-wrapper--centered {
      position: absolute;
      right: 0;
      top: 0;
      height: auto;
      padding: var(--s-2); }
  .mt-dialog-close {
    color: var(--dialog-close-icon-color);
    font-size: var(--dialog-title-font-size);
    line-height: 1.2; }
    .mt-dialog-close--centered {
      line-height: 1; }
  .mt-dialog-close--single {
    position: absolute;
    right: 0;
    right: 0; }
  .mt-dialog-content {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    max-height: 60vh;
    overflow-y: scroll; }
  .mt-dialog-inner-content {
    flex: 1;
    padding: var(--s-4) 0 var(--s-4) var(--dialog-padding-lr);
    font-size: var(--dialog-content-font-size);
    line-height: calc(var(--dialog-content-font-size) + var(--s-2)); }
    .mt-dialog-inner-content--fullwidth {
      padding-right: var(--dialog-padding-lr); }
    .mt-dialog-inner-content--centered {
      padding: 0; }
  .mt-dialog-content--centered {
    text-align: center; }
  .mt-dialog-content--centered-android {
    text-align: left; }
  .mt-dialog-content-text {
    font-size: var(--dialog-content-font-size);
    line-height: calc(var(--dialog-content-font-size) + var(--s-2));
    color: var(--dialog-content-font-color);
    white-space: pre-wrap;
    word-break: break-word; }
  .mt-dialog-footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    border-top: var(--dialog-divider-width) solid var(--dialog-divider-color);
    padding: var(--s-2) var(--dialog-padding-lr);
    box-sizing: border-box; }
    .mt-dialog-footer--centered {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      padding-bottom: var(--box-medium-padding-ver);
      padding-right: var(--box-medium-padding-hoz); }
      .mt-dialog-footer--centered-ios {
        justify-content: center;
        border-top-width: var(--dialog-divider-width);
        border-top-color: var(--dialog-centered-border-color);
        border-top-style: solid;
        padding: 0;
        text-align: center; }
  .mt-dialog-btn {
    flex: 1; }
  .mt-dialog-btn--centered {
    display: flex;
    flex: 1;
    padding-left: var(--s-2);
    padding-right: var(--s-2); }
    .mt-dialog-btn--centered-ok {
      font-weight: var(--dialog-ok-btn-font-weight); }
    .mt-dialog-btn--centered-cancel {
      font-weight: var(--dialog-cancel-btn-font-weight); }
  .mt-dialog-btn-col--ios {
    flex: 1;
    border-right-width: var(--dialog-divider-width);
    border-right-style: solid;
    border-right-color: var(--dialog-centered-border-color);
    text-align: center; }
    .mt-dialog-btn-col--ios:last-child {
      border-right: none; }
  .mt-dialog-footer-gap {
    width: var(--dialog-footer-btn-gap); }
