@charset "UTF-8";
/*
  @component number-picker
  @display NumberPicker
  @chinese 数字输入框
  @family data-entry
*/
:root {
  /*
    @desc large-font-size
    @semantic 大尺寸字号
    @namespace size/common
  */
  --numberpicker-large-font-size: var(--p-subhead-font-size);
  /*
    @desc medium-font-size
    @semantic 中尺寸字号
    @namespace size/common
  */
  --numberpicker-medium-font-size: var(--p-body-2-font-size);
  /*
    @desc small-font-size
    @semantic 小尺寸字号
    @namespace size/common
  */
  --numberpicker-small-font-size: var(--p-caption-font-size);
  /*
    @desc small-width
    @semantic 输入框宽度
    @namespace size/input
  */
  --numberpicker-small-input-width: var(--s-14);
  /*
    @desc medium-width
    @semantic 输入框宽度
    @namespace size/input
  */
  --numberpicker-medium-input-width: var(--s-16);
  /*
    @desc large-width
    @semantic 输入框宽度
    @namespace size/input
  */
  --numberpicker-large-input-width: var(--s-18);
  /*
     @desc small-height
     @semantic 高度
     @namespace size/input
     @type enum
     @enum size
   */
  --numberpicker-small-height: var(--s-6);
  /*
      @desc medium-height
      @semantic 高度
      @namespace size/input
      @type enum
      @enum size
    */
  --numberpicker-medium-height: var(--s-8);
  /*
      @desc large-height
      @semantic 高度
      @namespace size/input
      @type enum
      @enum size
    */
  --numberpicker-large-height: var(--s-11);
  /*
    @desc margin
    @semantic 外边距
    @namespace size/bounding
    @type number
  */
  --numberpicker-small-margin: 1.0666666666666667vw;
  /*
    @desc margin
    @semantic 外边距
    @namespace size/bounding
    @type number
  */
  --numberpicker-medium-margin: 2.1333333333333333vw;
  /*
    @desc margin
    @semantic 外边距
    @namespace size/bounding
    @type number
  */
  --numberpicker-large-margin: 3.2vw;
  /*
    @desc height
    @semantic 高度
    @namespace size/common
  */
  --numberpicker-height: var(--s-4);
  /*
    @desc input-border-color
    @semantic 输入框边框颜色
    @namespace style/input
  */
  --numberpicker-input-border-color: var(--color-line1-4);
  /*
    @desc input-font-color
    @semantic 输入框文字颜色
    @namespace style/input
  */
  --numberpicker-input-color: var(--color-text1-4);
  /*
    @desc button-corner
    @semantic 按钮圆角
    @namespace size/button
  */
  --numberpicker-button-corner: var(--corner-1);
  /*
    @desc border-width
    @semantic 按钮边框尺寸
    @namespace size/button
  */
  --numberpicker-button-border-width: var(--line-1);
  /*
    @desc button-border-color
    @semantic 按钮边框颜色
    @namespace style/button
  */
  --numberpicker-button-border-color: var(--color-line1-4);
  /*
    @desc icon-color
    @semantic 图标颜色
    @namespace style/button
  */
  --numberpicker-button-icon-color: var(--color-text1-4);
  /*
    @desc input-color
    @semantic 禁用输入框文字颜色
    @namespace style/input
  */
  --numberpicker-disabled-input-color: var(--color-text1-1);
  /*
    @desc icon-color
    @semantic 禁用图标颜色
    @namespace style/button
  */
  --numberpicker-disabled-button-icon-color: var(--color-text1-1);
  /*
    @desc disabled-bg-color
    @semantic 禁用背景色
    @namespace style/common
   */
  --numberpicker-disabed-bg-color: var(--color-transparent); }

.mt-numberpicker {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch; }
  .mt-numberpicker-input {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    border-width: var(--line-1);
    border-style: var(--line-solid);
    border-color: var(--numberpicker-input-border-color);
    border-radius: 0;
    color: var(--numberpicker-input-color);
    outline: none;
    text-align: center;
    appearance: none;
    font-family: var(--font-family);
    height: auto;
    line-height: unset; }
    .mt-numberpicker-input::-webkit-outer-spin-button, .mt-numberpicker-input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      appearance: none; }
    .mt-numberpicker-input--small {
      width: var(--numberpicker-small-input-width);
      padding: 0 var(--box-small-spacing);
      font-size: var(--numberpicker-small-font-size);
      height: var(--numberpicker-small-height);
      margin-left: var(--numberpicker-small-margin);
      margin-right: var(--numberpicker-small-margin); }
    .mt-numberpicker-input--medium {
      width: var(--numberpicker-medium-input-width);
      padding: 0 var(--box-medium-spacing);
      font-size: var(--numberpicker-medium-font-size);
      height: var(--numberpicker-medium-height);
      margin-left: var(--numberpicker-medium-margin);
      margin-right: var(--numberpicker-medium-margin); }
    .mt-numberpicker-input--large {
      width: var(--numberpicker-large-input-width);
      padding: 0 var(--box-large-spacing);
      font-size: var(--numberpicker-large-font-size);
      height: var(--numberpicker-large-height);
      margin-left: var(--numberpicker-large-margin);
      margin-right: var(--numberpicker-large-margin); }
    .mt-numberpicker-input--disabled {
      color: var(--numberpicker-disabled-input-color);
      background-color: var(--numberpicker-disabed-bg-color); }
    .mt-numberpicker-input--readonly {
      border-color: var(--numberpicker-input-border-color); }
    .mt-numberpicker-input--no-button {
      margin-left: 0;
      margin-right: 0; }
  .mt-numberpicker-button {
    border-width: var(--numberpicker-button-border-width);
    border-style: var(--line-solid);
    border-color: var(--numberpicker-button-border-color);
    border-radius: var(--numberpicker-button-corner);
    --button-small-min-width: 0;
    --button-medium-min-width: 0;
    --button-large-min-width: 0; }
    .mt-numberpicker-button--small {
      padding: var(--box-small-spacing);
      height: var(--numberpicker-small-height);
      height: var(--numberpicker-small-height); }
    .mt-numberpicker-button--medium {
      padding: var(--box-medium-spacing);
      height: var(--numberpicker-medium-height);
      height: var(--numberpicker-medium-height); }
    .mt-numberpicker-button--large {
      padding: var(--box-large-spacing);
      height: var(--numberpicker-large-height);
      height: var(--numberpicker-large-height); }
    .mt-numberpicker-button-decrease {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0; }
    .mt-numberpicker-button-increase {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0; }
    .mt-numberpicker-button--disabled {
      background-color: var(--numberpicker-disabed-bg-color); }
    .mt-numberpicker-button-icon {
      left: 0;
      color: var(--numberpicker-button-icon-color);
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: var(--numberpicker-height);
      height: var(--numberpicker-height);
      line-height: var(--numberpicker-height); }
      .mt-numberpicker-button-icon--small {
        font-size: var(--numberpicker-small-font-size); }
      .mt-numberpicker-button-icon--medium {
        font-size: var(--numberpicker-medium-font-size); }
      .mt-numberpicker-button-icon--large {
        font-size: var(--numberpicker-large-font-size); }
      .mt-numberpicker-button-icon--disabled {
        color: var(--numberpicker-disabled-button-icon-color); }
