@charset "UTF-8";
/*
  @component message
  @display Message
  @chinese 信息反馈
  @family feedback
*/
:root {
  /**
   @desc spacing
   @semantic 元素间距
   @namespace size/bounding
  */
  --message-spacing: var(--box-medium-spacing);
  /*
   @desc corner
   @semantic 圆角尺寸
   @namespace size/bounding
  */
  --message-corner: var(--corner-zero);
  /**
   @desc elevation
   @semantic 海拔
   @namespace size/elevation
  */
  --message-elevation: var(--elevation-4);
  /**
   @desc font-large
   @semantic 标题字号
   @namespace size/medium
  */
  --message-font-large: var(--p-body-2-font-size);
  /**
   @desc font-small
   @semantic 内容字号

   @namespace size/medium
  */
  --message-font-small: var(--p-body-1-font-size);
  /**
   @desc title-color
   @semantic 标题颜色
   @namespace color/normal
  */
  --message-title-color: var(--color-text1-4);
  /**
   @desc bg
   @semantic 背景色
   @namespace color/success
  */
  --message-bg-success: var(--color-success-1);
  /**
   @desc bg
   @semantic 背景色
   @namespace color/warning
  */
  --message-bg-warning: var(--color-warning-1);
  /**
   @desc bg
   @semantic 背景色
   @namespace color/error
  */
  --message-bg-error: var(--color-error-1);
  /**
   @desc bg
   @semantic 背景色
   @namespace color/notice
  */
  --message-bg-notice: var(--color-notice-1);
  /**
   @desc bg
   @semantic 背景色
   @namespace color/help
  */
  --message-bg-help: var(--color-help-1);
  /**
   @desc bg
   @semantic 背景色
   @namespace color/loading
  */
  --message-bg-loading: var(--color-white);
  /**
   @desc icon
   @semantic 图标色
   @namespace color/success
  */
  --message-icon-success: var(--color-success-3);
  /**
   @desc icon
   @semantic 图标色
   @namespace color/warning
  */
  --message-icon-warning: var(--color-warning-4);
  /**
   @desc icon
   @semantic 图标色
   @namespace color/error
  */
  --message-icon-error: var(--color-error-3);
  /**
   @desc icon
   @semantic 图标色
   @namespace color/notice
  */
  --message-icon-notice: var(--color-help-3);
  /**
   @desc icon
   @semantic 图标色
   @namespace color/help
  */
  --message-icon-help: var(--color-notice-3);
  /**
   @desc icon
   @semantic 图标色
   @namespace color/loading
  */
  --message-icon-loading: var(--color-brand-3);
  /**
   @desc bg
   @semantic 背景色
   @namespace color/toast
  */
  --message-toast-bg: rgba(0, 0, 0, 0.6);
  /**
   @desc min-width
   @semantic 最小宽度
   @namespace size/toast
  */
  --message-toast-min-width: var(--s-20);
  /**
   @desc color
   @semantic 文本颜色
   @namespace color/toast
  */
  --message-toast-color: var(--color-white);
  /**
   @desc padding
   @semantic 边距
   @namespace size/toast
  */
  --message-toast-spacing: var(--s-3);
  /*
   @desc corner
   @semantic 圆角
   @namespace size/toast
  */
  --message-toast-corner: var(--corner-2);
  /**
   @desc icon-size
   @semantic 图标大小
   @namespace size/toast
  */
  --message-toast-icon-size: var(--p-headline-icon-size); }

.mt-message {
  z-index: var(--message-elevation);
  border-radius: var(--message-corner); }
  .mt-message--inline-success {
    background-color: var(--message-bg-success); }
  .mt-message--inline-warning {
    background-color: var(--message-bg-warning); }
  .mt-message--inline-error {
    background-color: var(--message-bg-error); }
  .mt-message--inline-notice {
    background-color: var(--message-bg-notice); }
  .mt-message--inline-help {
    background-color: var(--message-bg-help); }
  .mt-message--inline-loading {
    background-color: var(--message-bg-loading); }
  .mt-message--inline {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    padding: var(--message-spacing);
    box-sizing: border-box; }
    .mt-message--inline--no-content {
      align-items: center; }
  .mt-message-container {
    flex-grow: 1;
    flex-shrink: 1; }
    .mt-message-container--toast {
      display: table-row; }
  .mt-message-icon-container--toast {
    display: table-cell;
    padding-bottom: var(--message-spacing); }
  .mt-message-icon {
    display: block; }
    .mt-message-icon--success {
      color: var(--message-icon-success); }
    .mt-message-icon--warning {
      color: var(--message-icon-warning); }
    .mt-message-icon--error {
      color: var(--message-icon-error); }
    .mt-message-icon--notice {
      color: var(--message-icon-notice); }
    .mt-message-icon--help {
      color: var(--message-icon-help); }
    .mt-message-icon--loading {
      color: var(--message-icon-loading); }
    .mt-message-icon--inline {
      margin-right: var(--message-spacing); }
    .mt-message-icon--toast {
      color: var(--message-toast-color);
      font-size: var(--p-display-1-icon-size); }
  .mt-message-title {
    font-size: var(--message-font-large);
    color: var(--message-title-color);
    word-break: break-all;
    white-space: pre-wrap;
    line-height: 1.5; }
    .mt-message-title--success {
      color: var(--message-icon-success); }
    .mt-message-title--warning {
      color: var(--message-icon-warning); }
    .mt-message-title--error {
      color: var(--message-icon-error); }
    .mt-message-title--notice {
      color: var(--message-icon-notice); }
    .mt-message-title--help {
      color: var(--message-icon-help); }
    .mt-message-title--loading {
      color: var(--message-icon-loading); }
  .mt-message-close {
    color: var(--color-text1-2);
    line-height: calc(var(--message-font-large) * 1.5); }
  .mt-message-content-container {
    font-size: var(--message-font-small); }
    .mt-message-content-container--toast {
      display: table-cell;
      text-align: center; }
  .mt-message-content {
    font-size: var(--message-font-small); }
    .mt-message-content--inline {
      color: var(--color-text1-3); }
    .mt-message-content--toast {
      color: var(--message-toast-color); }
  .mt-message--toast {
    display: table;
    background-color: var(--message-toast-bg);
    padding: var(--message-toast-spacing);
    border-radius: var(--message-toast-corner);
    min-width: var(--message-toast-min-width);
    max-width: 80vw;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box; }
  .mt-message-mask {
    position: fixed;
    z-index: calc(var(--message-elevation) - 1);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: transparent; }
