@charset "UTF-8";
/*
  @component typography
  @display Typography
  @chinese 排版
  @family data-display
*/
:root {
  /*
    @desc color
    @namespace state/mark
    @semantic 颜色
  */
  --typography-mark-color: var(--color-text1-4);
  /*
    @desc bg-color
    @namespace state/mark
    @semantic 背景颜色
  */
  --typography-mark-background-color: var(--color-warning-2);
  /*
    @desc corner
    @namespace state/code
    @semantic 圆角尺寸
  */
  --typography-code-corner: var(--corner-1);
  /*
    @desc color
    @namespace state/code
    @semantic 字体颜色
  */
  --typography-code-color: var(--color-text1-4);
  /*
    @desc bg-color
    @namespace state/code
    @semantic 背景颜色
  */
  --typography-code-background-color: var(--color-fill1-2);
  /*
    @desc border-color
    @namespace state/code
    @semantic 边框颜色
  */
  --typography-code-border-color: var(--color-line1-1); }

.mt-typography--body-1 {
  font-size: var(--p-body-1-font-size);
  font-weight: var(--p-body-1-font-weight); }

.mt-typography--body-2 {
  font-size: var(--p-body-2-font-size);
  font-weight: var(--p-body-2-font-weight); }

.mt-typography--title {
  font-size: var(--p-title-font-size);
  font-weight: var(--p-title-font-weight); }

.mt-typography--subhead {
  font-size: var(--p-subhead-font-size);
  font-weight: var(--p-subhead-font-weight); }

.mt-typography--display-1 {
  font-size: var(--p-display-1-font-size);
  font-weight: var(--p-display-1-font-weight); }

.mt-typography--display-2 {
  font-size: var(--p-display-2-font-size);
  font-weight: var(--p-display-2-font-weight); }

.mt-typography--display-3 {
  font-size: var(--p-display-3-font-size);
  font-weight: var(--p-display-3-font-weight); }

.mt-typography--headline {
  font-size: var(--p-headline-font-size);
  font-weight: var(--p-headline-font-weight); }

.mt-typography--caption {
  font-size: var(--p-caption-font-size);
  font-weight: var(--p-caption-font-weight); }

.mt-typography--overline {
  font-size: var(--p-overline-font-size);
  font-weight: var(--p-overline-font-weight); }

.mt-typography--code {
  display: inline-block;
  color: var(--typography-code-color);
  background-color: var(--typography-code-background-color);
  border: var(--line-1) solid var(--typography-code-border-color);
  border-radius: var(--typography-code-corner); }

.mt-typography--strong {
  font-weight: bold; }

.mt-typography--underline {
  text-decoration: underline; }

.mt-typography--delete {
  text-decoration: line-through; }

.mt-typography--mark {
  color: var(--typography-mark-color);
  background-color: var(--typography-mark-background-color); }

.mt-typography--title {
  font-weight: bold; }
