@charset "UTF-8";
.mt-drawer-title {
  word-wrap: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

/*
  @component drawer
  @display Drawer
  @chinese 抽屉
  @family feedback
*/
:root {
  /*
    @desc  bg-color
    @semantic 内容背景色
    @namespace state/normal
   */
  --drawer-content-bg-color: var(--color-white);
  /**
    @desc elevation
    @semantic 海拔
    @namespace state/normal
    @unconfigurable
  */
  --drawer-elevation: var(--elevation-3);
  /**
    @desc  shadow
    @semantic 阴影
    @namespace size/bounding
   */
  --drawer-content-shadow: var(--shadow-zero);
  /*
    @desc  corner
    @semantic 圆角
    @namespace size/bounding
   */
  --drawer-content-corner: var(--corner-zero);
  /**
    @desc title-padding
    @semantic 标题内边距
    @namespace size/title
   */
  --drawer-title-padding: var(--box-medium-padding);
  /**
    @desc title-border-width
    @semantic 边框宽度
    @namespace size/title
   */
  --drawer-title-border-width: var(--box-medium-border-width);
  /*
    @desc title-border-color
    @semantic 标题分割线颜色
    @namespace state/title
   */
  --drawer-title-border-color: var(--box-normal-outline-border-color);
  /**
    @desc title-font-color
    @semantic 字体颜色
    @namespace state/title
   */
  --drawer-title-font-color: var(--color-black);
  /**
    @desc title-font-size
    @semantic 字体大小
    @namespace size/title
   */
  --drawer-title-font-size: var(--p-subhead-font-size);
  /**
    @desc icon-size
    @semantic 图标尺寸
    @namespace size/icon
   */
  --drawer-close-icon-size: var(--s-5);
  /**
    @desc icon-color
    @semantic 图标颜色
    @namespace state/icon
   */
  --drawer-close-icon-color: var(--color-text1-2); }

.mt-drawer {
  box-sizing: border-box;
  background-color: var(--drawer-content-bg-color);
  overflow: hidden;
  box-shadow: var(--drawer-content-shadow);
  position: relative; }
  .mt-drawer-modal {
    --modal-elevation: var(--drawer-elevation); }
  .mt-drawer-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    height: 100%;
    overflow: auto; }
  .mt-drawer-close {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
    top: 0;
    height: calc(var(--drawer-title-font-size) * 1.2);
    padding: var(--s-2);
    color: var(--drawer-close-icon-color);
    box-sizing: content-box; }
    .mt-drawer-close-icon {
      font-size: var(--drawer-close-icon-size); }
  .mt-drawer-title {
    padding: var(--drawer-title-padding);
    border-bottom-width: var(--drawer-title-border-width);
    border-bottom-style: solid;
    border-bottom-color: var(--drawer-title-border-color);
    color: var(--drawer-title-font-color);
    font-size: var(--drawer-title-font-size);
    line-height: 1.2;
    box-sizing: border-box;
    flex-shrink: 0;
    flex-grow: 0; }
    .mt-drawer-title--center {
      text-align: center; }
    .mt-drawer-title--with-icon {
      padding-right: calc(var(--drawer-title-font-size) * 1.2 + var(--s-2) * 2); }
  .mt-drawer--left {
    border-top-right-radius: var(--drawer-content-corner);
    border-bottom-right-radius: var(--drawer-content-corner);
    max-width: 100%; }
  .mt-drawer--right {
    border-top-left-radius: var(--drawer-content-corner);
    border-bottom-left-radius: var(--drawer-content-corner);
    max-width: 100%; }
  .mt-drawer--top {
    border-bottom-left-radius: var(--drawer-content-corner);
    border-bottom-right-radius: var(--drawer-content-corner);
    max-height: 100%; }
  .mt-drawer--bottom {
    border-top-left-radius: var(--drawer-content-corner);
    border-top-right-radius: var(--drawer-content-corner);
    max-height: 100%; }
