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

.mt-tab-container::-webkit-scrollbar {
  display: none; }

.mt-tab-item-text {
  word-wrap: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.mt-tab-container::-webkit-scrollbar {
  display: none; }

/*
  @component tab
  @display Tab
  @chinese 标签页
  @family navigation
*/
:root {
  /**
   @desc icon-size
   @namespace size/small
   @semantic 小尺寸图标大小
  */
  --tab-small-icon-size: var(--icon-xxs);
  /**
   @desc icon-size
   @namespace size/medium
   @semantic 中尺寸图标大小
  */
  --tab-medium-icon-size: var(--icon-xs);
  /**
   @desc icon-size
   @namespace size/large
   @semantic 大尺寸图标大小
  */
  --tab-large-icon-size: var(--icon-s);
  /*
   @desc spacing
   @namespace size/small
   @semantic 小尺寸内部间隙
  */
  --tab-small-spacing: var(--box-small-spacing);
  /*
   @desc spacing
   @namespace size/medium
   @semantic 中尺寸内部间隙
  */
  --tab-medium-spacing: var(--box-medium-spacing);
  /*
   @desc spacing
   @namespace size/large
   @semantic 大尺寸内部间隙
  */
  --tab-large-spacing: var(--box-large-spacing);
  /**
   @desc font-size
   @namespace size/small
   @semantic 小尺寸文字大小
  */
  --tab-small-font-size: var(--p-body-1-font-size);
  /**
   @desc font-size
   @namespace size/medium
   @semantic 中尺寸文字大小
  */
  --tab-medium-font-size: var(--p-body-2-font-size);
  /**
   @desc font-size
   @namespace size/large
   @semantic 大尺寸文字大小
  */
  --tab-large-font-size: var(--p-subhead-font-size);
  /**
     @desc padding
     @namespace size/small
     @semantic small内边距
    */
  --tab-small-padding: var(--box-small-padding);
  /**
     @desc border radius
     @namespace size/small
     @semantic small内边距
     */
  --tab-small-corner: var(--box-small-border-radius);
  /**
     @desc padding
     @namespace size/medium
     @semantic medium内边距
    */
  --tab-medium-padding: var(--box-medium-padding);
  /**
     @desc border radius
     @namespace size/medium
     @semantic medium内边距
     */
  --tab-medium-corner: var(--box-medium-border-radius);
  /**
     @desc padding
     @namespace size/large
     @semantic large内边距
    */
  --tab-large-padding: var(--box-large-padding);
  /**
     @desc border radius
     @namespace size/large
     @semantic large内边距
     */
  --tab-large-corner: var(--box-large-border-radius);
  /**
   @desc bg-color
   @namespace state/normal
   @semantic 背景色
  */
  --tab-bg-color: var(--box-normal-outline-background-color);
  /**
   @desc bg-color
   @namespace state/capsule
   @semantic 背景色
  */
  --tab-capsule-bg-color: var(--box-normal-outline-background-color);
  /**
   @desc bg-color
   @namespace state/capsule
   @semantic 选中背景色
  */
  --tab-capsule-active-bg-color: var(--box-primary-solid-background-color);
  /**
   @desc divider-color
   @namespace state/normal
   @semantic 分割线颜色
  */
  --tab-divider-color: var(--box-normal-outline-border-color);
  /**
   @desc divider-height
   @namespace size/bounding
   @semantic 分割线高度
  */
  --tab-divider-height: var(--line-1);
  /**
   @desc active-line-height
   @namespace state/active
   @semantic 激活线高度
  */
  --tab-active-line-height: 0.5333333333333333vw;
  /**
   @desc color
   @namespace state/normal
   @semantic 普通文本颜色
  */
  --tab-normal-color: var(--box-normal-outline-font-color);
  /**
   @desc color
   @namespace state/active
   @semantic 选中文本颜色
  */
  --tab-active-color: var(--box-primary-text-font-color);
  /**
   @desc color
   @namespace state/capsule
   @semantic 普通文本颜色
  */
  --tab-capsule-normal-color: var(--box-normal-outline-font-color);
  /**
   @desc capsule color
   @namespace state/capsule
   @semantic 选中文本颜色
  */
  --tab-capsule-active-color: var(--box-primary-solid-font-color);
  /**
   @desc border color
   @namespace state/capsule
   @semantic 边框颜色
  */
  --tab-capsule-border-color: var(--box-normal-outline-border-color); }

.mt-tab {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: var(--tab-bg-color);
  z-index: calc(var(--elevation-1) + 1);
  position: relative; }
  .mt-tab-divider {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom-width: var(--tab-divider-height);
    border-bottom-style: solid;
    border-bottom-color: var(--tab-divider-color); }
  .mt-tab-container {
    display: flex;
    flex: 1;
    z-index: var(--elevation-1);
    position: relative; }
    .mt-tab-container--wechat {
      max-height: 12.4vw; }
  .mt-tab-scroll-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: auto; }
    .mt-tab-scroll-container--fullwidth {
      width: 100%; }
    .mt-tab-scroll-container--wechat {
      max-height: 12.4vw; }
  .mt-tab-item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100%;
    box-sizing: border-box; }
    .mt-tab-item--fullwidth {
      flex: 1; }
    .mt-tab-item--small {
      padding: var(--tab-small-padding); }
    .mt-tab-item--medium {
      padding: var(--tab-medium-padding); }
    .mt-tab-item--large {
      padding: var(--tab-large-padding); }
    .mt-tab-item--capsule {
      background-color: var(--tab-capsule-bg-color);
      border: var(--line-1) solid var(--tab-capsule-border-color); }
      .mt-tab-item--capsule + .mt-tab-item--capsule {
        margin-left: calc(-1 * var(--line-1)); }
    .mt-tab-item--active-capsule {
      border-color: var(--tab-capsule-active-bg-color);
      background-color: var(--tab-capsule-active-bg-color);
      z-index: 1; }
    .mt-tab-item-text {
      text-align: center; }
      .mt-tab-item-text--small {
        font-size: var(--tab-small-font-size); }
      .mt-tab-item-text--medium {
        font-size: var(--tab-medium-font-size); }
      .mt-tab-item-text--large {
        font-size: var(--tab-large-font-size); }
      .mt-tab-item-text--normal {
        color: var(--tab-normal-color); }
      .mt-tab-item-text--capsule {
        color: var(--tab-capsule-normal-color); }
      .mt-tab-item-text--active-normal {
        color: var(--tab-active-color); }
      .mt-tab-item-text--active-capsule {
        color: var(--tab-capsule-active-color); }
    .mt-tab-item-icon--small {
      font-size: var(--tab-small-icon-size);
      margin-right: var(--tab-small-spacing); }
    .mt-tab-item-icon--medium {
      font-size: var(--tab-medium-icon-size);
      margin-right: var(--tab-medium-spacing); }
    .mt-tab-item-icon--large {
      font-size: var(--tab-large-icon-size);
      margin-right: var(--tab-large-spacing); }
    .mt-tab-item-icon--normal {
      color: var(--tab-normal-color); }
    .mt-tab-item-icon--capsule {
      color: var(--tab-capsule-normal-color); }
    .mt-tab-item-icon--active-normal {
      color: var(--tab-active-color); }
    .mt-tab-item-icon--active-capsule {
      color: var(--tab-capsule-active-color); }
    .mt-tab-item-active-line {
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: var(--tab-active-color);
      transition: all var(--motion-time-2);
      height: var(--tab-active-line-height);
      border-radius: var(--corner-semicircle); }
      .mt-tab-item-active-line--narrow {
        left: 50%;
        border-radius: calc(var(--tab-active-line-height) / 2);
        transition: all var(--motion-time-1); }
        .mt-tab-item-active-line--narrow-small {
          width: calc(var(--tab-small-font-size) * 2);
          margin-left: calc(-1 * var(--tab-small-font-size)); }
        .mt-tab-item-active-line--narrow-medium {
          width: calc(var(--tab-medium-font-size) * 2);
          margin-left: calc(-1 * var(--tab-medium-font-size)); }
        .mt-tab-item-active-line--narrow-large {
          width: calc(var(--tab-large-font-size) * 2);
          margin-left: calc(-1 * var(--tab-large-font-size)); }
      .mt-tab-item-active-line--enter {
        transform: scaleX(1); }
      .mt-tab-item-active-line--exit {
        transform: scaleX(0); }
  .mt-tab .mt-tab-item--small:first-child {
    border-top-left-radius: var(--tab-small-corner);
    border-bottom-left-radius: var(--tab-small-corner); }
  .mt-tab .mt-tab-item--small:last-child {
    border-top-right-radius: var(--tab-small-corner);
    border-bottom-right-radius: var(--tab-small-corner); }
  .mt-tab .mt-tab-item--medium:first-child {
    border-top-left-radius: var(--tab-medium-corner);
    border-bottom-left-radius: var(--tab-medium-corner); }
  .mt-tab .mt-tab-item--medium:last-child {
    border-top-right-radius: var(--tab-medium-corner);
    border-bottom-right-radius: var(--tab-medium-corner); }
  .mt-tab .mt-tab-item--large:first-child {
    border-top-left-radius: var(--tab-large-corner);
    border-bottom-left-radius: var(--tab-large-corner); }
  .mt-tab .mt-tab-item--large:last-child {
    border-top-right-radius: var(--tab-large-corner);
    border-bottom-right-radius: var(--tab-large-corner); }
  .mt-tab .mt-tab-item--capsule:last-child {
    border-right-style: solid; }
  .mt-tab-tool {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; }
    .mt-tab-tool--small {
      padding: var(--tab-small-padding);
      font-size: var(--tab-small-font-size);
      line-height: var(--tab-small-font-size); }
    .mt-tab-tool-icon--small {
      font-size: var(--tab-small-icon-size);
      line-height: var(--tab-small-font-size); }
    .mt-tab-tool--medium {
      padding: var(--tab-medium-padding);
      font-size: var(--tab-medium-font-size);
      line-height: var(--tab-medium-font-size); }
    .mt-tab-tool-icon--medium {
      font-size: var(--tab-medium-icon-size);
      line-height: var(--tab-medium-font-size); }
    .mt-tab-tool--large {
      padding: var(--tab-large-padding);
      font-size: var(--tab-large-font-size);
      line-height: var(--tab-large-font-size); }
    .mt-tab-tool-icon--large {
      font-size: var(--tab-large-icon-size);
      line-height: var(--tab-large-font-size); }
  .mt-tab-drawer {
    max-height: 80vw;
    width: 100%; }
