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

/*
  @component select-drawer
  @display SelectDrawer
  @chinese 选择抽屉
  @family utils
*/
:root {
  /*
    @desc padding(t,b)
    @namespace  size/small
    @semantic  上下间距
  */
  --select-drawer-small-padding-tb: var(--s-1);
  /*
    @desc padding(t,b)
    @namespace  size/medium
    @semantic  上下间距
  */
  --select-drawer-medium-padding-tb: var(--s-2);
  /*
    @desc padding(t,b)
    @namespace  size/large
    @semantic  上下间距
  */
  --select-drawer-large-padding-tb: var(--s-3);
  /*
    @desc padding(l,r)
    @namespace  size/normal
    @semantic  左右间距
  */
  --select-drawer-padding-lr: var(--s-4);
  /*
    @desc color
    @namespace  statement/normal
    @semantic  内容颜色
  */
  --select-drawer-normal-color: var(--color-text1-4);
  /*
    @desc  color
    @namespace  statement/inverse
    @semantic  内容颜色
  */
  --select-drawer-inverse-color: var(--color-text2-4);
  /*
    @desc  disabled-color
    @namespace  statement/normal
    @semantic  禁用颜色
  */
  --select-drawer-disabled-color: var(--color-text1-1);
  /*
    @desc  disabled-color
    @namespace  statement/inverse
    @semantic  内容颜色
  */
  --select-drawer-inverse-disabled-color: var(--color-text2-1);
  /*
    @desc  icon-color
    @namespace  statement/normal
    @semantic  箭头颜色
  */
  --select-drawer-normal-icon-color: var(--color-text1-2);
  /*
    @desc  icon-color
    @namespace  statement/inverse
    @semantic  箭头颜色
  */
  --select-drawer-inverse-icon-color: var(--color-text2-2);
  /*
    @desc  icon-disabled-color
    @namespace  statement/inverse
    @semantic  箭头禁用颜色
  */
  --select-drawer-inverse-disabled-icon-color: var(--color-text2-1);
  /*
    @desc  title-color
    @namespace  statement/normal
    @semantic  标题颜色
  */
  --select-drawer-title-color: var(--color-text1-4);
  /*
    @desc  placeholder-color
    @namespace  statement/normal
    @semantic  占位颜色
  */
  --select-drawer-normal-placeholder-color: var(--color-text1-2);
  /*
    @desc  placeholder-color
    @namespace  statement/inverse
    @semantic  占位颜色
  */
  --select-drawer-inverse-placeholder-color: var(--color-text2-2);
  /*
    @desc  font-size
    @namespace  size/large
    @semantic  字体大小
  */
  --select-drawer-large-font-size: var(--p-subhead-font-size);
  /*
    @desc  font-size
    @namespace  size/medium
    @semantic  字体大小
  */
  --select-drawer-medium-font-size: var(--p-body-2-font-size);
  /*
    @desc  font-size
    @namespace  size/small
    @semantic  字体大小
  */
  --select-drawer-small-font-size: var(--p-body-1-font-size);
  /*
    @desc  icon-size
    @namespace  size/large
    @semantic  图标大小
  */
  --select-drawer-large-icon-size: var(--icon-s);
  /*
    @desc  icon-size
    @namespace  size/medium
    @semantic  图标大小
  */
  --select-drawer-medium-icon-size: var(--icon-xs);
  /*
    @desc  icon-size
    @namespace  size/small
    @semantic  图标大小
  */
  --select-drawer-small-icon-size: var(--icon-xxs);
  /*
    @desc  padding(l,r)
    @namespace  state/empty
    @semantic  空选项时弹出框左右内边距
  */
  --select-drawer-empty-padding-lr: var(--s-5);
  /*
    @desc  padding(t,b)
    @namespace  state/empty
    @semantic  空选项时弹出框上下内边距
  */
  --select-drawer-empty-padding-tb: var(--s-10);
  /*
    @desc  content-font-color
    @namespace  state/empty
    @semantic  空选项弹出框提示文案字体颜色
  */
  --select-drawer-empty-font-color: var(--color-text1-2);
  /*
    @desc  content-font-size
    @namespace  state/empty
    @semantic  空选项弹出框提示文案字体大小
  */
  --select-drawer-empty-font-size: var(--p-body-1-font-size); }

.mt-selectdrawer {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box; }
  .mt-selectdrawer--small {
    font-size: var(--select-drawer-small-font-size); }
  .mt-selectdrawer--medium {
    font-size: var(--select-drawer-medium-font-size); }
  .mt-selectdrawer--large {
    font-size: var(--select-drawer-large-font-size); }
  .mt-selectdrawer-content {
    padding-left: var(--select-drawer-padding-lr);
    flex: 1;
    min-width: 0;
    color: var(--select-drawer-normal-color); }
    .mt-selectdrawer-content--small {
      padding-top: var(--select-drawer-small-padding-tb);
      padding-bottom: var(--select-drawer-small-padding-tb); }
    .mt-selectdrawer-content--medium {
      padding-top: var(--select-drawer-medium-padding-tb);
      padding-bottom: var(--select-drawer-medium-padding-tb); }
    .mt-selectdrawer-content--large {
      padding-top: var(--select-drawer-large-padding-tb);
      padding-bottom: var(--select-drawer-large-padding-tb); }
    .mt-selectdrawer-content--inverse {
      color: var(--select-drawer-inverse-color); }
    .mt-selectdrawer-content--right {
      justify-content: flex-end;
      text-align: right; }
    .mt-selectdrawer-content-text--disabled {
      color: var(--select-drawer-disabled-color); }
    .mt-selectdrawer-content-text--right {
      justify-content: flex-end;
      text-align: right; }
    .mt-selectdrawer-content-text--inverse {
      color: var(--select-drawer-inverse-color); }
    .mt-selectdrawer-content-text--inverse-disabled {
      color: var(--select-drawer-inverse-disabled-color); }
  .mt-selectdrawer-placeholder {
    color: var(--select-drawer-normal-placeholder-color); }
    .mt-selectdrawer-placeholder--right {
      justify-content: flex-end;
      text-align: right; }
    .mt-selectdrawer-placeholder--inverse {
      color: var(--select-drawer-inverse-placeholder-color); }
    .mt-selectdrawer-placeholder--disabled {
      color: var(--select-drawer-disabled-color); }
    .mt-selectdrawer-placeholder--inverse-disabled {
      color: var(--select-drawer-inverse-disabled-color); }
  .mt-selectdrawer-icon {
    display: flex;
    justify-content: center;
    padding-right: var(--select-drawer-padding-lr);
    color: var(--select-drawer-normal-icon-color); }
    .mt-selectdrawer-icon--small {
      padding-top: var(--select-drawer-small-padding-tb);
      padding-bottom: var(--select-drawer-small-padding-tb); }
    .mt-selectdrawer-icon--medium {
      padding-top: var(--select-drawer-medium-padding-tb);
      padding-bottom: var(--select-drawer-medium-padding-tb); }
    .mt-selectdrawer-icon--large {
      padding-top: var(--select-drawer-large-padding-tb);
      padding-bottom: var(--select-drawer-large-padding-tb); }
    .mt-selectdrawer-icon--inverse {
      color: var(--select-drawer-inverse-icon-color); }
    .mt-selectdrawer-icon-text {
      position: relative;
      right: -31.25%; }
      .mt-selectdrawer-icon-text--small {
        font-size: var(--select-drawer-small-icon-size); }
      .mt-selectdrawer-icon-text--medium {
        font-size: var(--select-drawer-medium-icon-size); }
      .mt-selectdrawer-icon-text--large {
        font-size: var(--select-drawer-large-icon-size); }
      .mt-selectdrawer-icon-text--inverse {
        color: var(--select-drawer-inverse-icon-color); }
      .mt-selectdrawer-icon-text--disabled {
        color: var(--select-drawer-disabled-color); }
      .mt-selectdrawer-icon-text--inverse-disabled {
        color: var(--select-drawer-inverse-disabled-icon-color); }
  .mt-selectdrawer-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: var(--line-1) var(--line-solid) var(--color-line1-3);
    font-size: var(--p-body-2-font-size);
    padding-top: var(--s-2);
    padding-bottom: var(--s-2); }
    .mt-selectdrawer-toolbar-title {
      flex-grow: 1;
      text-align: center;
      color: var(--select-drawer-title-color); }
  .mt-selectdrawer-drawer-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    box-sizing: border-box; }
  .mt-selectdrawer-drawer--empty {
    padding-left: var(--select-drawer-empty-padding-lr);
    padding-right: var(--select-drawer-empty-padding-lr);
    padding-top: var(--select-drawer-empty-padding-tb);
    padding-bottom: var(--select-drawer-empty-padding-tb); }
  .mt-selectdrawer-drawer-empty-text {
    color: var(--select-drawer-empty-font-color);
    font-size: var(--select-drawer-empty-font-size);
    text-align: center; }
