@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 small-height
     @semantic 高度
     @namespace size/common
     @type enum
     @enum size
     @configurable
   */
  --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
    */
  --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
    */
  --button-large-height: calc(
    2 * var(--button-large-padding-tb) + 2 * var(--button-large-border-width) + var(--button-large-font-size)
  );
  /**
       @desc padding
       @semantic 填充
       @namespace size/small
       @unconfigurable
     */
  --button-small-padding: var(--box-small-padding);
  /*
       @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
       @semantic 填充
       @namespace size/medium
       @unconfigurable
     */
  --button-medium-padding: var(--box-medium-padding);
  /*
       @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
       @semantic 填充
       @namespace size/large
       @unconfigurable
     */
  --button-large-padding: var(--box-large-padding);
  /*
       @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 border-color
         @semantic 边框色
         @namespace state/normal/solid
       */
  --button-normal-solid-border-color: var(--box-normal-solid-border-color);
  /**
         @desc 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
         @namespace state/normal/solid
         @semantic 边框色
       */
  --button-normal-solid-border-color-disabled: var(--box-normal-solid-border-color-disabled);
  /**
         @desc bg-color
         @namespace state/normal/solid
         @semantic 背景色
       */
  --button-normal-solid-background-color: var(--box-normal-solid-background-color);
  /**
         @desc bg-color-active
         @namespace state/normal/solid
         @semantic 背景色激活
       */
  --button-normal-solid-background-color-active: var(--box-normal-solid-background-color-active);
  /**
         @desc bg-color-disabled
         @namespace state/normal/solid
         @semantic 背景色
       */
  --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 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
         @namespace state/normal/outline
         @semantic 边框色
       */
  --button-normal-outline-border-color-disabled: var(--box-normal-outline-border-color-disabled);
  /**
         @desc bg-color
         @namespace state/normal/outline
         @semantic 背景色
       */
  --button-normal-outline-background-color: var(--box-normal-outline-background-color);
  /**
         @desc bg-color-active
         @namespace state/normal/outline
         @semantic 背景色激活
       */
  --button-normal-outline-background-color-active: var(--box-normal-outline-background-color-active);
  /**
         @desc bg-color-disabled
         @namespace state/normal/outline
         @semantic 背景色
       */
  --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 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
         @namespace state/normal/text
         @semantic 边框色
       */
  --button-normal-text-border-color-disabled: var(--box-normal-text-border-color-disabled);
  /**
         @desc bg-color
         @namespace state/normal/text
         @semantic 背景色
       */
  --button-normal-text-background-color: var(--box-normal-text-background-color);
  /**
         @desc bg-color-active
         @namespace state/normal/text
         @semantic 背景色激活
       */
  --button-normal-text-background-color-active: var(--box-normal-text-background-color-active);
  /**
         @desc bg-color-disabled
         @namespace state/normal/text
         @semantic 背景色
       */
  --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/primary/solid
       */
  --button-primary-solid-border-color: var(--box-primary-solid-border-color);
  /**
         @desc 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
         @namespace state/primary/solid
         @semantic 边框色
       */
  --button-primary-solid-border-color-disabled: var(--box-primary-solid-border-color-disabled);
  /**
         @desc bg-color
         @namespace state/primary/solid
         @semantic 背景色
       */
  --button-primary-solid-background-color: var(--box-primary-solid-background-color);
  /**
         @desc bg-color-active
         @namespace state/primary/solid
         @semantic 背景色激活
       */
  --button-primary-solid-background-color-active: var(--box-primary-solid-background-color-active);
  /**
         @desc bg-color-disabled
         @namespace state/primary/solid
         @semantic 背景色
       */
  --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 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
         @namespace state/primary/outline
         @semantic 边框色
       */
  --button-primary-outline-border-color-disabled: var(--box-primary-outline-border-color-disabled);
  /**
         @desc bg-color
         @namespace state/primary/outline
         @semantic 背景色
       */
  --button-primary-outline-background-color: var(--box-primary-outline-background-color);
  /**
         @desc bg-color-active
         @namespace state/primary/outline
         @semantic 背景色激活
       */
  --button-primary-outline-background-color-active: var(--box-primary-outline-background-color-active);
  /**
         @desc bg-color-disabled
         @namespace state/primary/outline
         @semantic 背景色
       */
  --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 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
         @namespace state/primary/text
         @semantic 边框色
       */
  --button-primary-text-border-color-disabled: var(--box-primary-text-border-color-disabled);
  /**
         @desc bg-color
         @namespace state/primary/text
         @semantic 背景色
       */
  --button-primary-text-background-color: var(--box-primary-text-background-color);
  /**
         @desc bg-color-active
         @namespace state/primary/text
         @semantic 背景色激活
       */
  --button-primary-text-background-color-active: var(--box-primary-text-background-color-active);
  /**
         @desc bg-color-disabled
         @namespace state/primary/text
         @semantic 背景色
       */
  --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/warning/solid
       */
  --button-warning-solid-border-color: var(--box-warning-solid-border-color);
  /**
         @desc 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
         @namespace state/warning/solid
         @semantic 边框色
       */
  --button-warning-solid-border-color-disabled: var(--box-warning-solid-border-color-disabled);
  /**
         @desc bg-color
         @namespace state/warning/solid
         @semantic 背景色
       */
  --button-warning-solid-background-color: var(--box-warning-solid-background-color);
  /**
         @desc bg-color-active
         @namespace state/warning/solid
         @semantic 背景色激活
       */
  --button-warning-solid-background-color-active: var(--box-warning-solid-background-color-active);
  /**
         @desc bg-color-disabled
         @namespace state/warning/solid
         @semantic 背景色
       */
  --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 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
         @namespace state/warning/outline
         @semantic 边框色
       */
  --button-warning-outline-border-color-disabled: var(--box-warning-outline-border-color-disabled);
  /**
         @desc bg-color
         @namespace state/warning/outline
         @semantic 背景色
       */
  --button-warning-outline-background-color: var(--box-warning-outline-background-color);
  /**
         @desc bg-color-active
         @namespace state/warning/outline
         @semantic 背景色激活
       */
  --button-warning-outline-background-color-active: var(--box-warning-outline-background-color-active);
  /**
         @desc bg-color-disabled
         @namespace state/warning/outline
         @semantic 背景色
       */
  --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 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
         @namespace state/warning/text
         @semantic 边框色
       */
  --button-warning-text-border-color-disabled: var(--box-warning-text-border-color-disabled);
  /**
         @desc bg-color
         @namespace state/warning/text
         @semantic 背景色
       */
  --button-warning-text-background-color: var(--box-warning-text-background-color);
  /**
         @desc bg-color-active
         @namespace state/warning/text
         @semantic 背景色激活
       */
  --button-warning-text-background-color-active: var(--box-warning-text-background-color-active);
  /**
         @desc bg-color-disabled
         @namespace state/warning/text
         @semantic 背景色
       */
  --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 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
         @namespace state/inverse/solid
         @semantic 边框色
       */
  --button-inverse-solid-border-color-disabled: var(--box-inverse-solid-border-color-disabled);
  /**
         @desc bg-color
         @namespace state/inverse/solid
         @semantic 背景色
       */
  --button-inverse-solid-background-color: var(--box-inverse-solid-background-color);
  /**
         @desc bg-color-active
         @namespace state/inverse/solid
         @semantic 背景色激活
       */
  --button-inverse-solid-background-color-active: var(--box-inverse-solid-background-color-active);
  /**
         @desc bg-color-disabled
         @namespace state/inverse/solid
         @semantic 背景色
       */
  --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 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
         @namespace state/inverse/outline
         @semantic 边框色
       */
  --button-inverse-outline-border-color-disabled: var(--box-inverse-outline-border-color-disabled);
  /**
         @desc bg-color
         @namespace state/inverse/outline
         @semantic 背景色
       */
  --button-inverse-outline-background-color: var(--box-inverse-outline-background-color);
  /**
         @desc bg-color-active
         @namespace state/inverse/outline
         @semantic 背景色激活
       */
  --button-inverse-outline-background-color-active: var(--box-inverse-outline-background-color-active);
  /**
         @desc bg-color-disabled
         @namespace state/inverse/outline
         @semantic 背景色
       */
  --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 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
         @namespace state/inverse/text
         @semantic 边框色
       */
  --button-inverse-text-border-color-disabled: var(--box-inverse-text-border-color-disabled);
  /**
         @desc bg-color
         @namespace state/inverse/text
         @semantic 背景色
       */
  --button-inverse-text-background-color: var(--box-inverse-text-background-color);
  /**
         @desc bg-color-active
         @namespace state/inverse/text
         @semantic 背景色激活
       */
  --button-inverse-text-background-color-active: var(--box-inverse-text-background-color-active);
  /**
         @desc bg-color-disabled
         @namespace state/inverse/text
         @semantic 背景色
       */
  --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); }
