@alifd/meet-react/lib/button/styles/index.css

Fusion Mobile React UI System Component

@charset "UTF-8";
/*
  @component button
  @display Button
  @chinese 按键
  @family general
*/
:root {
  /**
    @desc motion-type
    @semantic 动画类型
    @namespace base/motion
    @unconfigurable
  */
  --button-motion-type: var(--motion-type-ease);
  /**
    @desc motion-time
    @semantic 动画时长
    @namespace base/motion
    @unconfigurable
  */
  --button-motion-time: var(--motion-time-2);
  /*
     @desc font-size
     @semantic 字体大小(小号)
     @namespace size/common
   */
  --button-small-font-size: var(--p-body-1-font-size);
  /*
     @desc font-size
     @semantic 字体大小(中号)
     @namespace size/common
   */
  --button-medium-font-size: var(--p-body-2-font-size);
  /*
     @desc font-size
     @semantic 字体大小(大号)
     @namespace size/common
   */
  --button-large-font-size: var(--p-subhead-font-size);
  /*
     @desc small-min-width
     @semantic 最小宽(小号)
     @namespace size/common
   */
  --button-small-min-width: var(--s-12);
  /*
     @desc medium-min-width
     @semantic 最小宽(中号)
     @namespace size/common
   */
  --button-medium-min-width: var(--s-14);
  /*
     @desc large-min-width
     @semantic 最小宽(大号)
     @namespace size/common
   */
  --button-large-min-width: var(--s-16);
  /*
     @desc padding-lr
     @semantic 左右内边距(小号)
     @namespace size/small
   */
  --button-small-padding-lr: var(--box-small-padding-hoz);
  /**
     @desc padding-tb
     @semantic 上下内边距(小号)
     @namespace size/small
   */
  --button-small-padding-tb: var(--box-small-padding-ver);
  /**
     @desc spacing
     @semantic 内部元素间隙(小号)
     @namespace size/small
   */
  --button-small-spacing: var(--box-small-spacing);
  /*
     @desc border-width
     @namespace size/small
     @semantic 边框宽度(小号)
   */
  --button-small-border-width: var(--box-small-border-width);
  /*
     @desc corner
     @namespace size/small
     @semantic 圆角尺寸(小号)
   */
  --button-small-corner: var(--box-small-border-radius);
  /*
     @desc padding-lr
     @semantic 左右内边距(中号)
     @namespace size/medium
   */
  --button-medium-padding-lr: var(--box-medium-padding-hoz);
  /**
     @desc padding-tb
     @semantic 上下内边距(中号)
     @namespace size/medium
   */
  --button-medium-padding-tb: var(--box-medium-padding-ver);
  /**
     @desc spacing
     @semantic 内部元素间隙(中号)
     @namespace size/medium
   */
  --button-medium-spacing: var(--box-medium-spacing);
  /*
     @desc border-width
     @namespace size/medium
     @semantic 边框宽度(中号)
   */
  --button-medium-border-width: var(--box-medium-border-width);
  /*
     @desc corner
     @namespace size/medium
     @semantic 圆角尺寸(中号)
   */
  --button-medium-corner: var(--box-medium-border-radius);
  /*
     @desc padding-lr
     @semantic 左右内边距(大号)
     @namespace size/large
   */
  --button-large-padding-lr: var(--box-large-padding-hoz);
  /**
     @desc padding-tb
     @semantic 上下内边距(大号)
     @namespace size/large
   */
  --button-large-padding-tb: var(--box-large-padding-ver);
  /**
     @desc spacing
     @semantic 内部元素间隙(大号)
     @namespace size/large
   */
  --button-large-spacing: var(--box-large-spacing);
  /*
     @desc border-width
     @namespace size/large
     @semantic 边框宽度(大号)
   */
  --button-large-border-width: var(--box-large-border-width);
  /*
     @desc corner
     @namespace size/large
     @semantic 圆角尺寸(大号)
   */
  --button-large-corner: var(--box-large-border-radius);
  /*
     @desc small-height
     @semantic 高度(小号)
     @namespace size/common
     @type enum
     @enum size
     @configurable
     @composite
   */
  --button-small-height: calc(
    2 * var(--button-small-padding-tb) + 2 * var(--button-small-border-width) + var(--button-small-font-size)
  );
  /*
      @desc medium-height
      @semantic 高度(中号)
      @namespace size/common
      @type enum
      @enum size
      @configurable
      @composite
    */
  --button-medium-height: calc(
    2 * var(--button-medium-padding-tb) + 2 * var(--button-medium-border-width) + var(--button-medium-font-size)
  );
  /*
      @desc large-height
      @semantic 高度(大号)
      @namespace size/common
      @type enum
      @enum size
      @configurable
      @composite
    */
  --button-large-height: calc(
    2 * var(--button-large-padding-tb) + 2 * var(--button-large-border-width) + var(--button-large-font-size)
  );
  /*
     @desc border-color
     @semantic 边框色(主要-实心模式)
     @namespace state/primary/solid
   */
  --button-primary-solid-border-color: var(--box-primary-solid-border-color);
  /**
     @desc type-primary-border-color-active
     @semantic 激活边框色(主要-实心模式)
     @namespace state/primary/solid
   */
  --button-primary-solid-border-color-active: var(--box-primary-solid-border-color-active);
  /**
     @desc border-color-disabled
     @semantic 禁用边框色(主要-实心模式)
     @namespace state/primary/solid
   */
  --button-primary-solid-border-color-disabled: var(--box-primary-solid-border-color-disabled);
  /**
     @desc bg-color
     @semantic 背景色(主要-实心模式)
     @namespace state/primary/solid
   */
  --button-primary-solid-background-color: var(--box-primary-solid-background-color);
  /**
     @desc bg-color-active
     @semantic 激活背景色(主要-实心模式)
     @namespace state/primary/solid
   */
  --button-primary-solid-background-color-active: var(--box-primary-solid-background-color-active);
  /**
     @desc bg-color-disabled
     @semantic 禁用背景色(主要-实心模式)
     @namespace state/primary/solid
   */
  --button-primary-solid-background-color-disabled: var(--box-primary-solid-background-color-disabled);
  /*
     @desc font-color
     @semantic 字体色(主要-实心模式)
     @namespace state/primary/solid
   */
  --button-primary-solid-font-color: var(--box-primary-solid-font-color);
  /**
     @desc font-color-active
     @semantic 激活字体色(主要-实心模式)
     @namespace state/primary/solid
   */
  --button-primary-solid-font-color-active: var(--box-primary-solid-font-color-active);
  /**
     @desc font-color-disabled
     @semantic 禁用字体色(主要-实心模式)
     @namespace state/primary/solid
   */
  --button-primary-solid-font-color-disabled: var(--box-primary-solid-font-color-disabled);
  /*
     @desc border-color
     @semantic 边框色(主要-空心模式)
     @namespace state/primary/outline
   */
  --button-primary-outline-border-color: var(--box-primary-outline-border-color);
  /**
     @desc type-primary-border-color-active
     @semantic 激活边框色(主要-空心模式)
     @namespace state/primary/outline
   */
  --button-primary-outline-border-color-active: var(--box-primary-outline-border-color-active);
  /**
     @desc border-color-disabled
     @semantic 禁用边框色(主要-空心模式)
     @namespace state/primary/outline
   */
  --button-primary-outline-border-color-disabled: var(--box-primary-outline-border-color-disabled);
  /**
     @desc bg-color
     @semantic 背景色(主要-空心模式)
     @namespace state/primary/outline
   */
  --button-primary-outline-background-color: var(--box-primary-outline-background-color);
  /**
     @desc bg-color-active
     @semantic 激活背景色(主要-空心模式)
     @namespace state/primary/outline
   */
  --button-primary-outline-background-color-active: var(--box-primary-outline-background-color-active);
  /**
     @desc bg-color-disabled
     @semantic 禁用背景色(主要-空心模式)
     @namespace state/primary/outline
   */
  --button-primary-outline-background-color-disabled: var(--box-primary-outline-background-color-disabled);
  /*
     @desc font-color
     @semantic 字体色(主要-空心模式)
     @namespace state/primary/outline
   */
  --button-primary-outline-font-color: var(--box-primary-outline-font-color);
  /**
     @desc font-color-active
     @semantic 激活字体色(主要-空心模式)
     @namespace state/primary/outline
   */
  --button-primary-outline-font-color-active: var(--box-primary-outline-font-color-active);
  /**
     @desc font-color-disabled
     @semantic 禁用字体色(主要-空心模式)
     @namespace state/primary/outline
   */
  --button-primary-outline-font-color-disabled: var(--box-primary-outline-font-color-disabled);
  /*
     @desc border-color
     @semantic 边框色(主要-文本模式)
     @namespace state/primary/text
   */
  --button-primary-text-border-color: var(--box-primary-text-border-color);
  /**
     @desc type-primary-border-color-active
     @semantic 激活边框色(主要-文本模式)
     @namespace state/primary/text
   */
  --button-primary-text-border-color-active: var(--box-primary-text-border-color-active);
  /**
     @desc border-color-disabled
     @semantic 禁用边框色(主要-文本模式)
     @namespace state/primary/text
   */
  --button-primary-text-border-color-disabled: var(--box-primary-text-border-color-disabled);
  /**
     @desc bg-color
     @semantic 背景色(主要-文本模式)
     @namespace state/primary/text
   */
  --button-primary-text-background-color: var(--box-primary-text-background-color);
  /**
     @desc bg-color-active
     @semantic 激活背景色(主要-文本模式)
     @namespace state/primary/text
   */
  --button-primary-text-background-color-active: var(--box-primary-text-background-color-active);
  /**
     @desc bg-color-disabled
     @semantic 禁用背景色(主要-文本模式)
     @namespace state/primary/text
   */
  --button-primary-text-background-color-disabled: var(--box-primary-text-background-color-disabled);
  /*
     @desc font-color
     @semantic 字体色(主要-文本模式)
     @namespace state/primary/text
   */
  --button-primary-text-font-color: var(--box-primary-text-font-color);
  /**
     @desc font-color-active
     @semantic 激活字体色(主要-文本模式)
     @namespace state/primary/text
   */
  --button-primary-text-font-color-active: var(--box-primary-text-font-color-active);
  /**
     @desc font-color-disabled
     @semantic 禁用字体色(主要-文本模式)
     @namespace state/primary/text
   */
  --button-primary-text-font-color-disabled: var(--box-primary-text-font-color-disabled);
  /*
     @desc border-color
     @semantic 边框色(次要-实心模式)
     @namespace state/normal/solid
   */
  --button-normal-solid-border-color: var(--box-normal-solid-border-color);
  /**
     @desc type-normal-border-color-active
     @semantic 激活边框色(次要-实心模式)
     @namespace state/normal/solid
   */
  --button-normal-solid-border-color-active: var(--box-normal-solid-border-color-active);
  /**
     @desc border-color-disabled
     @semantic 禁用边框色(次要-实心模式)
     @namespace state/normal/solid
   */
  --button-normal-solid-border-color-disabled: var(--box-normal-solid-border-color-disabled);
  /**
     @desc bg-color
     @semantic 背景色(次要-实心模式)
     @namespace state/normal/solid
   */
  --button-normal-solid-background-color: var(--box-normal-solid-background-color);
  /**
     @desc bg-color-active
     @semantic 激活背景色(次要-实心模式)
     @namespace state/normal/solid
   */
  --button-normal-solid-background-color-active: var(--box-normal-solid-background-color-active);
  /**
     @desc bg-color-disabled
     @semantic 禁用背景色(次要-实心模式)
     @namespace state/normal/solid
   */
  --button-normal-solid-background-color-disabled: var(--box-normal-solid-background-color-disabled);
  /*
     @desc font-color
     @semantic 字体色(次要-实心模式)
     @namespace state/normal/solid
   */
  --button-normal-solid-font-color: var(--box-normal-solid-font-color);
  /**
     @desc font-color-active
     @semantic 激活字体色(次要-实心模式)
     @namespace state/normal/solid
   */
  --button-normal-solid-font-color-active: var(--box-normal-solid-font-color-active);
  /**
     @desc font-color-disabled
     @semantic 禁用字体色(次要-实心模式)
     @namespace state/normal/solid
   */
  --button-normal-solid-font-color-disabled: var(--box-normal-solid-font-color-disabled);
  /*
     @desc border-color
     @semantic 边框色(次要-空心模式)
     @namespace state/normal/outline
   */
  --button-normal-outline-border-color: var(--box-normal-outline-border-color);
  /**
     @desc type-normal-border-color-active
     @semantic 激活边框色(次要-空心模式)
     @namespace state/normal/outline
   */
  --button-normal-outline-border-color-active: var(--box-normal-outline-border-color-active);
  /**
     @desc border-color-disabled
     @semantic 禁用边框色(次要-空心模式)
     @namespace state/normal/outline
   */
  --button-normal-outline-border-color-disabled: var(--box-normal-outline-border-color-disabled);
  /**
     @desc bg-color
     @semantic 背景色(次要-空心模式)
     @namespace state/normal/outline
   */
  --button-normal-outline-background-color: var(--box-normal-outline-background-color);
  /**
     @desc bg-color-active
     @semantic 激活背景色(次要-空心模式)
     @namespace state/normal/outline
   */
  --button-normal-outline-background-color-active: var(--box-normal-outline-background-color-active);
  /**
     @desc bg-color-disabled
     @semantic 禁用背景色(次要-空心模式)
     @namespace state/normal/outline
   */
  --button-normal-outline-background-color-disabled: var(--box-normal-outline-background-color-disabled);
  /*
     @desc font-color
     @semantic 字体色(次要-空心模式)
     @namespace state/normal/outline
   */
  --button-normal-outline-font-color: var(--box-normal-outline-font-color);
  /**
     @desc font-color-active
     @semantic 激活字体色(次要-空心模式)
     @namespace state/normal/outline
   */
  --button-normal-outline-font-color-active: var(--box-normal-outline-font-color-active);
  /**
     @desc font-color-disabled
     @semantic 禁用字体色(次要-空心模式)
     @namespace state/normal/outline
   */
  --button-normal-outline-font-color-disabled: var(--box-normal-outline-font-color-disabled);
  /*
     @desc border-color
     @semantic 边框色(次要-文本模式)
     @namespace state/normal/text
   */
  --button-normal-text-border-color: var(--box-normal-text-border-color);
  /**
     @desc type-normal-border-color-active
     @semantic 激活边框色(次要-文本模式)
     @namespace state/normal/text
   */
  --button-normal-text-border-color-active: var(--box-normal-text-border-color-active);
  /**
     @desc border-color-disabled
     @semantic 禁用边框色(次要-文本模式)
     @namespace state/normal/text
   */
  --button-normal-text-border-color-disabled: var(--box-normal-text-border-color-disabled);
  /**
     @desc bg-color
     @semantic 背景色(次要-文本模式)
     @namespace state/normal/text
   */
  --button-normal-text-background-color: var(--box-normal-text-background-color);
  /**
     @desc bg-color-active
     @semantic 激活背景色(次要-文本模式)
     @namespace state/normal/text
   */
  --button-normal-text-background-color-active: var(--box-normal-text-background-color-active);
  /**
     @desc bg-color-disabled
     @semantic 禁用背景色(次要-文本模式)
     @namespace state/normal/text
   */
  --button-normal-text-background-color-disabled: var(--box-normal-text-background-color-disabled);
  /*
     @desc font-color
     @semantic 字体色(次要-文本模式)
     @namespace state/normal/text
   */
  --button-normal-text-font-color: var(--box-normal-text-font-color);
  /**
     @desc font-color-active
     @semantic 激活字体色(次要-文本模式)
     @namespace state/normal/text
   */
  --button-normal-text-font-color-active: var(--box-normal-text-font-color-active);
  /**
     @desc font-color-disabled
     @semantic 禁用字体色(次要-文本模式)
     @namespace state/normal/text
   */
  --button-normal-text-font-color-disabled: var(--box-normal-text-font-color-disabled);
  /*
     @desc border-color
     @semantic 边框色(警告-实心模式)
     @namespace state/warning/solid
   */
  --button-warning-solid-border-color: var(--box-warning-solid-border-color);
  /**
     @desc type-warning-border-color-active
     @semantic 激活边框色(警告-实心模式)
     @namespace state/warning/solid
   */
  --button-warning-solid-border-color-active: var(--box-warning-solid-border-color-active);
  /**
     @desc border-color-disabled
     @semantic 禁用边框色(警告-实心模式)
     @namespace state/warning/solid
   */
  --button-warning-solid-border-color-disabled: var(--box-warning-solid-border-color-disabled);
  /**
     @desc bg-color
     @semantic 背景色(警告-实心模式)
     @namespace state/warning/solid
   */
  --button-warning-solid-background-color: var(--box-warning-solid-background-color);
  /**
     @desc bg-color-active
     @semantic 激活背景色(警告-实心模式)
     @namespace state/warning/solid
   */
  --button-warning-solid-background-color-active: var(--box-warning-solid-background-color-active);
  /**
     @desc bg-color-disabled
     @semantic 禁用背景色(警告-实心模式)
     @namespace state/warning/solid
   */
  --button-warning-solid-background-color-disabled: var(--box-warning-solid-background-color-disabled);
  /*
     @desc font-color
     @semantic 字体色(警告-实心模式)
     @namespace state/warning/solid
   */
  --button-warning-solid-font-color: var(--box-warning-solid-font-color);
  /**
     @desc font-color-active
     @semantic 激活字体色(警告-实心模式)
     @namespace state/warning/solid
   */
  --button-warning-solid-font-color-active: var(--box-warning-solid-font-color-active);
  /**
     @desc font-color-disabled
     @semantic 禁用字体色(警告-实心模式)
     @namespace state/warning/solid
   */
  --button-warning-solid-font-color-disabled: var(--box-warning-solid-font-color-disabled);
  /*
     @desc border-color
     @semantic 边框色(警告-空心模式)
     @namespace state/warning/outline
   */
  --button-warning-outline-border-color: var(--box-warning-outline-border-color);
  /**
     @desc type-warning-border-color-active
     @semantic 激活边框色(警告-空心模式)
     @namespace state/warning/outline
   */
  --button-warning-outline-border-color-active: var(--box-warning-outline-border-color-active);
  /**
     @desc border-color-disabled
     @semantic 禁用边框色(警告-空心模式)
     @namespace state/warning/outline
   */
  --button-warning-outline-border-color-disabled: var(--box-warning-outline-border-color-disabled);
  /**
     @desc bg-color
     @semantic 背景色(警告-空心模式)
     @namespace state/warning/outline
   */
  --button-warning-outline-background-color: var(--box-warning-outline-background-color);
  /**
     @desc bg-color-active
     @semantic 激活背景色(警告-空心模式)
     @namespace state/warning/outline
   */
  --button-warning-outline-background-color-active: var(--box-warning-outline-background-color-active);
  /**
     @desc bg-color-disabled
     @semantic 禁用背景色(警告-空心模式)
     @namespace state/warning/outline
   */
  --button-warning-outline-background-color-disabled: var(--box-warning-outline-background-color-disabled);
  /*
     @desc font-color
     @semantic 字体色(警告-空心模式)
     @namespace state/warning/outline
   */
  --button-warning-outline-font-color: var(--box-warning-outline-font-color);
  /**
     @desc font-color-active
     @semantic 激活字体色(警告-空心模式)
     @namespace state/warning/outline
   */
  --button-warning-outline-font-color-active: var(--box-warning-outline-font-color-active);
  /**
     @desc font-color-disabled
     @semantic 禁用字体色(警告-空心模式)
     @namespace state/warning/outline
   */
  --button-warning-outline-font-color-disabled: var(--box-warning-outline-font-color-disabled);
  /*
     @desc border-color
     @semantic 边框色(警告-文本模式)
     @namespace state/warning/text
   */
  --button-warning-text-border-color: var(--box-warning-text-border-color);
  /**
     @desc type-warning-border-color-active
     @semantic 激活边框色(警告-文本模式)
     @namespace state/warning/text
   */
  --button-warning-text-border-color-active: var(--box-warning-text-border-color-active);
  /**
     @desc border-color-disabled
     @semantic 禁用边框色(警告-文本模式)
     @namespace state/warning/text
   */
  --button-warning-text-border-color-disabled: var(--box-warning-text-border-color-disabled);
  /**
     @desc bg-color
     @semantic 背景色(警告-文本模式)
     @namespace state/warning/text
   */
  --button-warning-text-background-color: var(--box-warning-text-background-color);
  /**
     @desc bg-color-active
     @semantic 激活背景色(警告-文本模式)
     @namespace state/warning/text
   */
  --button-warning-text-background-color-active: var(--box-warning-text-background-color-active);
  /**
     @desc bg-color-disabled
     @semantic 禁用背景色(警告-文本模式)
     @namespace state/warning/text
   */
  --button-warning-text-background-color-disabled: var(--box-warning-text-background-color-disabled);
  /*
     @desc font-color
     @semantic 字体色(警告-文本模式)
     @namespace state/warning/text
   */
  --button-warning-text-font-color: var(--box-warning-text-font-color);
  /**
     @desc font-color-active
     @semantic 激活字体色(警告-文本模式)
     @namespace state/warning/text
   */
  --button-warning-text-font-color-active: var(--box-warning-text-font-color-active);
  /**
     @desc font-color-disabled
     @semantic 禁用字体色(警告-文本模式)
     @namespace state/warning/text
   */
  --button-warning-text-font-color-disabled: var(--box-warning-text-font-color-disabled);
  /*
     @desc border-color
     @semantic 边框色(反色-实心模式)
     @namespace state/inverse/solid
   */
  --button-inverse-solid-border-color: var(--box-inverse-solid-border-color);
  /**
     @desc type-inverse-border-color-active
     @semantic 激活边框色(反色-实心模式)
     @namespace state/inverse/solid
   */
  --button-inverse-solid-border-color-active: var(--box-inverse-solid-border-color-active);
  /**
     @desc border-color-disabled
     @semantic 禁用边框色(反色-实心模式)
     @namespace state/inverse/solid
   */
  --button-inverse-solid-border-color-disabled: var(--box-inverse-solid-border-color-disabled);
  /**
     @desc bg-color
     @semantic 背景色(反色-实心模式)
     @namespace state/inverse/solid
   */
  --button-inverse-solid-background-color: var(--box-inverse-solid-background-color);
  /**
     @desc bg-color-active
     @semantic 激活背景色(反色-实心模式)
     @namespace state/inverse/solid
   */
  --button-inverse-solid-background-color-active: var(--box-inverse-solid-background-color-active);
  /**
     @desc bg-color-disabled
     @semantic 禁用背景色(反色-实心模式)
     @namespace state/inverse/solid
   */
  --button-inverse-solid-background-color-disabled: var(--box-inverse-solid-background-color-disabled);
  /*
     @desc font-color
     @semantic 字体色(反色-实心模式)
     @namespace state/inverse/solid
   */
  --button-inverse-solid-font-color: var(--box-inverse-solid-font-color);
  /**
     @desc font-color-active
     @semantic 激活字体色(反色-实心模式)
     @namespace state/inverse/solid
   */
  --button-inverse-solid-font-color-active: var(--box-inverse-solid-font-color-active);
  /**
     @desc font-color-disabled
     @semantic 禁用字体色(反色-实心模式)
     @namespace state/inverse/solid
   */
  --button-inverse-solid-font-color-disabled: var(--box-inverse-solid-font-color-disabled);
  /*
     @desc border-color
     @semantic 边框色(反色-空心模式)
     @namespace state/inverse/outline
   */
  --button-inverse-outline-border-color: var(--box-inverse-outline-border-color);
  /**
     @desc type-inverse-border-color-active
     @semantic 激活边框色(反色-空心模式)
     @namespace state/inverse/outline
   */
  --button-inverse-outline-border-color-active: var(--box-inverse-outline-border-color-active);
  /**
     @desc border-color-disabled
     @semantic 禁用边框色(反色-空心模式)
     @namespace state/inverse/outline
   */
  --button-inverse-outline-border-color-disabled: var(--box-inverse-outline-border-color-disabled);
  /**
     @desc bg-color
     @semantic 背景色(反色-空心模式)
     @namespace state/inverse/outline
   */
  --button-inverse-outline-background-color: var(--box-inverse-outline-background-color);
  /**
     @desc bg-color-active
     @semantic 激活背景色(反色-空心模式)
     @namespace state/inverse/outline
   */
  --button-inverse-outline-background-color-active: var(--box-inverse-outline-background-color-active);
  /**
     @desc bg-color-disabled
     @semantic 禁用背景色(反色-空心模式)
     @namespace state/inverse/outline
   */
  --button-inverse-outline-background-color-disabled: var(--box-inverse-outline-background-color-disabled);
  /*
     @desc font-color
     @semantic 字体色(反色-空心模式)
     @namespace state/inverse/outline
   */
  --button-inverse-outline-font-color: var(--box-inverse-outline-font-color);
  /**
     @desc font-color-active
     @semantic 激活字体色(反色-空心模式)
     @namespace state/inverse/outline
   */
  --button-inverse-outline-font-color-active: var(--box-inverse-outline-font-color-active);
  /**
     @desc font-color-disabled
     @semantic 禁用字体色(反色-空心模式)
     @namespace state/inverse/outline
   */
  --button-inverse-outline-font-color-disabled: var(--box-inverse-outline-font-color-disabled);
  /*
     @desc border-color
     @semantic 边框色(反色-文本模式)
     @namespace state/inverse/text
   */
  --button-inverse-text-border-color: var(--box-inverse-text-border-color);
  /**
     @desc type-inverse-border-color-active
     @semantic 激活边框色(反色-文本模式)
     @namespace state/inverse/text
   */
  --button-inverse-text-border-color-active: var(--box-inverse-text-border-color-active);
  /**
     @desc border-color-disabled
     @semantic 禁用边框色(反色-文本模式)
     @namespace state/inverse/text
   */
  --button-inverse-text-border-color-disabled: var(--box-inverse-text-border-color-disabled);
  /**
     @desc bg-color
     @semantic 背景色(反色-文本模式)
     @namespace state/inverse/text
   */
  --button-inverse-text-background-color: var(--box-inverse-text-background-color);
  /**
     @desc bg-color-active
     @semantic 激活背景色(反色-文本模式)
     @namespace state/inverse/text
   */
  --button-inverse-text-background-color-active: var(--box-inverse-text-background-color-active);
  /**
     @desc bg-color-disabled
     @semantic 禁用背景色(反色-文本模式)
     @namespace state/inverse/text
   */
  --button-inverse-text-background-color-disabled: var(--box-inverse-text-background-color-disabled);
  /*
     @desc font-color
     @semantic 字体色(反色-文本模式)
     @namespace state/inverse/text
   */
  --button-inverse-text-font-color: var(--box-inverse-text-font-color);
  /**
     @desc font-color-active
     @semantic 激活字体色(反色-文本模式)
     @namespace state/inverse/text
   */
  --button-inverse-text-font-color-active: var(--box-inverse-text-font-color-active);
  /**
     @desc font-color-disabled
     @semantic 禁用字体色(反色-文本模式)
     @namespace state/inverse/text
   */
  --button-inverse-text-font-color-disabled: var(--box-inverse-text-font-color-disabled);
}

.mt-button {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: all var(--button-motion-time) var(--button-motion-type);
  text-align: center;
  outline: none;
  cursor: pointer;
  user-select: none;
  border-style: solid;
  box-sizing: border-box;
  /* state */
}
.mt-button--small {
  min-width: var(--button-small-min-width);
  border-width: var(--button-small-border-width);
  border-radius: var(--button-small-corner);
  padding: 0 var(--button-small-padding-lr);
  height: var(--button-small-height);
  line-height: 1;
}
.mt-button-icon--small-last {
  position: relative;
  right: calc(-1 * var(--button-small-spacing));
}
.mt-button-icon--small-first {
  position: relative;
  left: calc(-1 * var(--button-small-spacing));
}
.mt-button-font--small {
  font-size: var(--button-small-font-size);
}
.mt-button--medium {
  min-width: var(--button-medium-min-width);
  border-width: var(--button-medium-border-width);
  border-radius: var(--button-medium-corner);
  padding: 0 var(--button-medium-padding-lr);
  height: var(--button-medium-height);
  line-height: 1;
}
.mt-button-icon--medium-last {
  position: relative;
  right: calc(-1 * var(--button-medium-spacing));
}
.mt-button-icon--medium-first {
  position: relative;
  left: calc(-1 * var(--button-medium-spacing));
}
.mt-button-font--medium {
  font-size: var(--button-medium-font-size);
}
.mt-button--large {
  min-width: var(--button-large-min-width);
  border-width: var(--button-large-border-width);
  border-radius: var(--button-large-corner);
  padding: 0 var(--button-large-padding-lr);
  height: var(--button-large-height);
  line-height: 1;
}
.mt-button-icon--large-last {
  position: relative;
  right: calc(-1 * var(--button-large-spacing));
}
.mt-button-icon--large-first {
  position: relative;
  left: calc(-1 * var(--button-large-spacing));
}
.mt-button-font--large {
  font-size: var(--button-large-font-size);
}
.mt-button--normal-solid {
  border-color: var(--button-normal-solid-border-color);
  background-color: var(--button-normal-solid-background-color);
  color: var(--button-normal-solid-font-color);
}
.mt-button--normal-solid:after {
  border-color: var(--button-normal-solid-border-color);
}
.mt-button--normal-solid:active {
  border-color: var(--button-normal-solid-border-color-active);
  background-color: var(--button-normal-solid-background-color-active);
  color: var(--button-normal-solid-font-color-active);
  -webkit-tap-highlight-color: transparent;
}
.mt-button--normal-solid:active:after {
  border-color: var(--button-normal-solid-border-color-active);
}
.mt-button--normal-solid-disabled:active, .mt-button--normal-solid-disabled {
  border-color: var(--button-normal-solid-border-color-disabled);
  background-color: var(--button-normal-solid-background-color-disabled);
  color: var(--button-normal-solid-font-color-disabled);
}
.mt-button--normal-solid-disabled:active:after, .mt-button--normal-solid-disabled:after {
  border-color: var(--button-normal-solid-border-color-disabled);
}
.mt-button--normal-outline {
  border-color: var(--button-normal-outline-border-color);
  background-color: var(--button-normal-outline-background-color);
  color: var(--button-normal-outline-font-color);
}
.mt-button--normal-outline:after {
  border-color: var(--button-normal-outline-border-color);
}
.mt-button--normal-outline:active {
  border-color: var(--button-normal-outline-border-color-active);
  background-color: var(--button-normal-outline-background-color-active);
  color: var(--button-normal-outline-font-color-active);
  -webkit-tap-highlight-color: transparent;
}
.mt-button--normal-outline:active:after {
  border-color: var(--button-normal-outline-border-color-active);
}
.mt-button--normal-outline-disabled:active, .mt-button--normal-outline-disabled {
  border-color: var(--button-normal-outline-border-color-disabled);
  background-color: var(--button-normal-outline-background-color-disabled);
  color: var(--button-normal-outline-font-color-disabled);
}
.mt-button--normal-outline-disabled:active:after, .mt-button--normal-outline-disabled:after {
  border-color: var(--button-normal-outline-border-color-disabled);
}
.mt-button--normal-text {
  border-color: var(--button-normal-text-border-color);
  background-color: var(--button-normal-text-background-color);
  color: var(--button-normal-text-font-color);
  /*border-color: none;
  border-width: 0;*/
  border: none;
}
.mt-button--normal-text:after {
  border-color: var(--button-normal-text-border-color);
}
.mt-button--normal-text:active {
  border-color: var(--button-normal-text-border-color-active);
  background-color: var(--button-normal-text-background-color-active);
  color: var(--button-normal-text-font-color-active);
  -webkit-tap-highlight-color: transparent;
}
.mt-button--normal-text:active:after {
  border-color: var(--button-normal-text-border-color-active);
}
.mt-button--normal-text-disabled:active, .mt-button--normal-text-disabled {
  border-color: var(--button-normal-text-border-color-disabled);
  background-color: var(--button-normal-text-background-color-disabled);
  color: var(--button-normal-text-font-color-disabled);
}
.mt-button--normal-text-disabled:active:after, .mt-button--normal-text-disabled:after {
  border-color: var(--button-normal-text-border-color-disabled);
}
.mt-button--primary-solid {
  border-color: var(--button-primary-solid-border-color);
  background-color: var(--button-primary-solid-background-color);
  color: var(--button-primary-solid-font-color);
}
.mt-button--primary-solid:after {
  border-color: var(--button-primary-solid-border-color);
}
.mt-button--primary-solid:active {
  border-color: var(--button-primary-solid-border-color-active);
  background-color: var(--button-primary-solid-background-color-active);
  color: var(--button-primary-solid-font-color-active);
  -webkit-tap-highlight-color: transparent;
}
.mt-button--primary-solid:active:after {
  border-color: var(--button-primary-solid-border-color-active);
}
.mt-button--primary-solid-disabled:active, .mt-button--primary-solid-disabled {
  border-color: var(--button-primary-solid-border-color-disabled);
  background-color: var(--button-primary-solid-background-color-disabled);
  color: var(--button-primary-solid-font-color-disabled);
}
.mt-button--primary-solid-disabled:active:after, .mt-button--primary-solid-disabled:after {
  border-color: var(--button-primary-solid-border-color-disabled);
}
.mt-button--primary-outline {
  border-color: var(--button-primary-outline-border-color);
  background-color: var(--button-primary-outline-background-color);
  color: var(--button-primary-outline-font-color);
}
.mt-button--primary-outline:after {
  border-color: var(--button-primary-outline-border-color);
}
.mt-button--primary-outline:active {
  border-color: var(--button-primary-outline-border-color-active);
  background-color: var(--button-primary-outline-background-color-active);
  color: var(--button-primary-outline-font-color-active);
  -webkit-tap-highlight-color: transparent;
}
.mt-button--primary-outline:active:after {
  border-color: var(--button-primary-outline-border-color-active);
}
.mt-button--primary-outline-disabled:active, .mt-button--primary-outline-disabled {
  border-color: var(--button-primary-outline-border-color-disabled);
  background-color: var(--button-primary-outline-background-color-disabled);
  color: var(--button-primary-outline-font-color-disabled);
}
.mt-button--primary-outline-disabled:active:after, .mt-button--primary-outline-disabled:after {
  border-color: var(--button-primary-outline-border-color-disabled);
}
.mt-button--primary-text {
  border-color: var(--button-primary-text-border-color);
  background-color: var(--button-primary-text-background-color);
  color: var(--button-primary-text-font-color);
  /*border-color: none;
  border-width: 0;*/
  border: none;
}
.mt-button--primary-text:after {
  border-color: var(--button-primary-text-border-color);
}
.mt-button--primary-text:active {
  border-color: var(--button-primary-text-border-color-active);
  background-color: var(--button-primary-text-background-color-active);
  color: var(--button-primary-text-font-color-active);
  -webkit-tap-highlight-color: transparent;
}
.mt-button--primary-text:active:after {
  border-color: var(--button-primary-text-border-color-active);
}
.mt-button--primary-text-disabled:active, .mt-button--primary-text-disabled {
  border-color: var(--button-primary-text-border-color-disabled);
  background-color: var(--button-primary-text-background-color-disabled);
  color: var(--button-primary-text-font-color-disabled);
}
.mt-button--primary-text-disabled:active:after, .mt-button--primary-text-disabled:after {
  border-color: var(--button-primary-text-border-color-disabled);
}
.mt-button--warning-solid {
  border-color: var(--button-warning-solid-border-color);
  background-color: var(--button-warning-solid-background-color);
  color: var(--button-warning-solid-font-color);
}
.mt-button--warning-solid:after {
  border-color: var(--button-warning-solid-border-color);
}
.mt-button--warning-solid:active {
  border-color: var(--button-warning-solid-border-color-active);
  background-color: var(--button-warning-solid-background-color-active);
  color: var(--button-warning-solid-font-color-active);
  -webkit-tap-highlight-color: transparent;
}
.mt-button--warning-solid:active:after {
  border-color: var(--button-warning-solid-border-color-active);
}
.mt-button--warning-solid-disabled:active, .mt-button--warning-solid-disabled {
  border-color: var(--button-warning-solid-border-color-disabled);
  background-color: var(--button-warning-solid-background-color-disabled);
  color: var(--button-warning-solid-font-color-disabled);
}
.mt-button--warning-solid-disabled:active:after, .mt-button--warning-solid-disabled:after {
  border-color: var(--button-warning-solid-border-color-disabled);
}
.mt-button--warning-outline {
  border-color: var(--button-warning-outline-border-color);
  background-color: var(--button-warning-outline-background-color);
  color: var(--button-warning-outline-font-color);
}
.mt-button--warning-outline:after {
  border-color: var(--button-warning-outline-border-color);
}
.mt-button--warning-outline:active {
  border-color: var(--button-warning-outline-border-color-active);
  background-color: var(--button-warning-outline-background-color-active);
  color: var(--button-warning-outline-font-color-active);
  -webkit-tap-highlight-color: transparent;
}
.mt-button--warning-outline:active:after {
  border-color: var(--button-warning-outline-border-color-active);
}
.mt-button--warning-outline-disabled:active, .mt-button--warning-outline-disabled {
  border-color: var(--button-warning-outline-border-color-disabled);
  background-color: var(--button-warning-outline-background-color-disabled);
  color: var(--button-warning-outline-font-color-disabled);
}
.mt-button--warning-outline-disabled:active:after, .mt-button--warning-outline-disabled:after {
  border-color: var(--button-warning-outline-border-color-disabled);
}
.mt-button--warning-text {
  border-color: var(--button-warning-text-border-color);
  background-color: var(--button-warning-text-background-color);
  color: var(--button-warning-text-font-color);
  /*border-color: none;
  border-width: 0;*/
  border: none;
}
.mt-button--warning-text:after {
  border-color: var(--button-warning-text-border-color);
}
.mt-button--warning-text:active {
  border-color: var(--button-warning-text-border-color-active);
  background-color: var(--button-warning-text-background-color-active);
  color: var(--button-warning-text-font-color-active);
  -webkit-tap-highlight-color: transparent;
}
.mt-button--warning-text:active:after {
  border-color: var(--button-warning-text-border-color-active);
}
.mt-button--warning-text-disabled:active, .mt-button--warning-text-disabled {
  border-color: var(--button-warning-text-border-color-disabled);
  background-color: var(--button-warning-text-background-color-disabled);
  color: var(--button-warning-text-font-color-disabled);
}
.mt-button--warning-text-disabled:active:after, .mt-button--warning-text-disabled:after {
  border-color: var(--button-warning-text-border-color-disabled);
}
.mt-button--inverse-solid {
  border-color: var(--button-inverse-solid-border-color);
  background-color: var(--button-inverse-solid-background-color);
  color: var(--button-inverse-solid-font-color);
}
.mt-button--inverse-solid:after {
  border-color: var(--button-inverse-solid-border-color);
}
.mt-button--inverse-solid:active {
  border-color: var(--button-inverse-solid-border-color-active);
  background-color: var(--button-inverse-solid-background-color-active);
  color: var(--button-inverse-solid-font-color-active);
  -webkit-tap-highlight-color: transparent;
}
.mt-button--inverse-solid:active:after {
  border-color: var(--button-inverse-solid-border-color-active);
}
.mt-button--inverse-solid-disabled:active, .mt-button--inverse-solid-disabled {
  border-color: var(--button-inverse-solid-border-color-disabled);
  background-color: var(--button-inverse-solid-background-color-disabled);
  color: var(--button-inverse-solid-font-color-disabled);
}
.mt-button--inverse-solid-disabled:active:after, .mt-button--inverse-solid-disabled:after {
  border-color: var(--button-inverse-solid-border-color-disabled);
}
.mt-button--inverse-outline {
  border-color: var(--button-inverse-outline-border-color);
  background-color: var(--button-inverse-outline-background-color);
  color: var(--button-inverse-outline-font-color);
}
.mt-button--inverse-outline:after {
  border-color: var(--button-inverse-outline-border-color);
}
.mt-button--inverse-outline:active {
  border-color: var(--button-inverse-outline-border-color-active);
  background-color: var(--button-inverse-outline-background-color-active);
  color: var(--button-inverse-outline-font-color-active);
  -webkit-tap-highlight-color: transparent;
}
.mt-button--inverse-outline:active:after {
  border-color: var(--button-inverse-outline-border-color-active);
}
.mt-button--inverse-outline-disabled:active, .mt-button--inverse-outline-disabled {
  border-color: var(--button-inverse-outline-border-color-disabled);
  background-color: var(--button-inverse-outline-background-color-disabled);
  color: var(--button-inverse-outline-font-color-disabled);
}
.mt-button--inverse-outline-disabled:active:after, .mt-button--inverse-outline-disabled:after {
  border-color: var(--button-inverse-outline-border-color-disabled);
}
.mt-button--inverse-text {
  border-color: var(--button-inverse-text-border-color);
  background-color: var(--button-inverse-text-background-color);
  color: var(--button-inverse-text-font-color);
  /*border-color: none;
  border-width: 0;*/
  border: none;
}
.mt-button--inverse-text:after {
  border-color: var(--button-inverse-text-border-color);
}
.mt-button--inverse-text:active {
  border-color: var(--button-inverse-text-border-color-active);
  background-color: var(--button-inverse-text-background-color-active);
  color: var(--button-inverse-text-font-color-active);
  -webkit-tap-highlight-color: transparent;
}
.mt-button--inverse-text:active:after {
  border-color: var(--button-inverse-text-border-color-active);
}
.mt-button--inverse-text-disabled:active, .mt-button--inverse-text-disabled {
  border-color: var(--button-inverse-text-border-color-disabled);
  background-color: var(--button-inverse-text-background-color-disabled);
  color: var(--button-inverse-text-font-color-disabled);
}
.mt-button--inverse-text-disabled:active:after, .mt-button--inverse-text-disabled:after {
  border-color: var(--button-inverse-text-border-color-disabled);
}
.mt-button--fullwidth {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.mt-button-group {
  display: flex;
  flex-direction: row;
}
.mt-button-group .mt-button {
  border-radius: 0;
}
.mt-button-group .mt-button--small:first-child {
  border-top-left-radius: var(--button-small-corner);
  border-bottom-left-radius: var(--button-small-corner);
}
.mt-button-group .mt-button--small:not(:last-child) {
  border-right-style: none;
}
.mt-button-group .mt-button--small:last-child {
  border-top-right-radius: var(--button-small-corner);
  border-bottom-right-radius: var(--button-small-corner);
}
.mt-button-group .mt-button--medium:first-child {
  border-top-left-radius: var(--button-medium-corner);
  border-bottom-left-radius: var(--button-medium-corner);
}
.mt-button-group .mt-button--medium:not(:last-child) {
  border-right-style: none;
}
.mt-button-group .mt-button--medium:last-child {
  border-top-right-radius: var(--button-medium-corner);
  border-bottom-right-radius: var(--button-medium-corner);
}
.mt-button-group .mt-button--large:first-child {
  border-top-left-radius: var(--button-large-corner);
  border-bottom-left-radius: var(--button-large-corner);
}
.mt-button-group .mt-button--large:not(:last-child) {
  border-right-style: none;
}
.mt-button-group .mt-button--large:last-child {
  border-top-right-radius: var(--button-large-corner);
  border-bottom-right-radius: var(--button-large-corner);
}