@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); }
