x-next 1.5.0 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (128) hide show
  1. package/AI_USAGE.md +2 -2
  2. package/CHANGELOG.md +36 -0
  3. package/dist/_utils/color.d.ts +53 -0
  4. package/dist/components/color-picker/ColorPicker.d.ts +239 -0
  5. package/dist/components/color-picker/gradient-slider.d.ts +52 -0
  6. package/dist/components/color-picker/index.d.ts +238 -0
  7. package/dist/components/color-picker/panel.d.ts +721 -0
  8. package/dist/components/color-picker/sv-panel.d.ts +48 -0
  9. package/dist/components/date-picker/DatePicker.vue.d.ts +3 -3
  10. package/dist/components/date-picker/index.d.ts +6 -6
  11. package/dist/components/dropdown/Dropdown.vue.d.ts +34 -4
  12. package/dist/components/dropdown/DropdownButton.vue.d.ts +35 -5
  13. package/dist/components/dropdown/DropdownSubmenu.vue.d.ts +34 -4
  14. package/dist/components/dropdown/dropdown-panel.vue.d.ts +30 -0
  15. package/dist/components/dropdown/index.d.ts +209 -29
  16. package/dist/components/form/FormItem.vue.d.ts +3 -3
  17. package/dist/components/form/form-item-label.vue.d.ts +3 -3
  18. package/dist/components/form/index.d.ts +6 -6
  19. package/dist/components/form-select/Select.d.ts +3 -3
  20. package/dist/components/form-select/SelectDropdown.vue.d.ts +30 -0
  21. package/dist/components/form-select/index.d.ts +66 -6
  22. package/dist/components/form-slider/Slider.vue.d.ts +3 -3
  23. package/dist/components/form-slider/index.d.ts +6 -6
  24. package/dist/components/form-slider/slider-button.vue.d.ts +3 -3
  25. package/dist/components/heatmap/Heatmap.d.ts +311 -0
  26. package/dist/components/heatmap/helpers/matrix.d.ts +58 -0
  27. package/dist/components/heatmap/index.d.ts +372 -0
  28. package/dist/components/heatmap/interface.d.ts +57 -0
  29. package/dist/components/image/Image.vue.d.ts +3 -3
  30. package/dist/components/image/ImagePreview.vue.d.ts +3 -3
  31. package/dist/components/image/ImagePreviewAction.d.ts +3 -3
  32. package/dist/components/image/ImagePreviewGroup.vue.d.ts +3 -3
  33. package/dist/components/image/index.d.ts +24 -24
  34. package/dist/components/image/preview-toolbar.vue.d.ts +3 -3
  35. package/dist/components/index.d.ts +2 -0
  36. package/dist/components/menu/sub-menu-pop.vue.d.ts +3 -3
  37. package/dist/components/network/Network.vue.d.ts +1 -1
  38. package/dist/components/network/index.d.ts +3 -3
  39. package/dist/components/network/utils.d.ts +2 -0
  40. package/dist/components/pagination/page-item-ellipsis.vue.d.ts +9 -0
  41. package/dist/components/pagination/page-jumper.vue.d.ts +6 -0
  42. package/dist/components/pagination/page-options.vue.d.ts +6 -6
  43. package/dist/components/popover/Popover.d.ts +1 -1
  44. package/dist/components/popover/index.d.ts +3 -3
  45. package/dist/components/popup/Popup.d.ts +1 -1
  46. package/dist/components/popup/index.d.ts +3 -3
  47. package/dist/components/skeleton/SkeletonShape.vue.d.ts +3 -3
  48. package/dist/components/skeleton/index.d.ts +6 -6
  49. package/dist/components/spin/Spin.d.ts +38 -0
  50. package/dist/components/spin/index.d.ts +30 -0
  51. package/dist/components/table/Table.d.ts +1 -1
  52. package/dist/components/table/index.d.ts +3 -3
  53. package/dist/components/tabs/Tabs.d.ts +1 -1
  54. package/dist/components/tabs/index.d.ts +3 -3
  55. package/dist/components/time-picker/TimePicker.vue.d.ts +3 -3
  56. package/dist/components/time-picker/index.d.ts +6 -6
  57. package/dist/components/tooltip/Tooltip.vue.d.ts +1 -1
  58. package/dist/components/tooltip/index.d.ts +3 -3
  59. package/dist/components/trigger/Trigger.d.ts +1 -1
  60. package/dist/components/trigger/index.d.ts +3 -3
  61. package/dist/components/watermark/Watermark.d.ts +1 -1
  62. package/dist/components/watermark/index.d.ts +3 -3
  63. package/dist/es/_styles/palette-aliases.js +8 -0
  64. package/dist/es/_utils/color.js +73 -0
  65. package/dist/es/components/button/Button.js +2 -2
  66. package/dist/es/components/color-picker/ColorPicker.js +239 -0
  67. package/dist/es/components/color-picker/gradient-slider.js +79 -0
  68. package/dist/es/components/color-picker/index.js +8 -0
  69. package/dist/es/components/color-picker/panel.js +307 -0
  70. package/dist/es/components/color-picker/sv-panel.js +99 -0
  71. package/dist/es/components/dropdown/dropdown-panel.vue.js +17 -17
  72. package/dist/es/components/form-input/Input.js +7 -7
  73. package/dist/es/components/form-input/InputPassword.vue2.js +2 -2
  74. package/dist/es/components/form-input/InputSearch.js +2 -2
  75. package/dist/es/components/form-input-number/InputNumber.js +12 -12
  76. package/dist/es/components/heatmap/Heatmap.js +334 -0
  77. package/dist/es/components/heatmap/helpers/matrix.js +106 -0
  78. package/dist/es/components/heatmap/index.js +8 -0
  79. package/dist/es/components/index.js +118 -114
  80. package/dist/es/components/menu/sub-menu-pop.vue2.js +12 -12
  81. package/dist/es/components/network/Network.vue2.js +72 -72
  82. package/dist/es/components/network/utils.js +44 -35
  83. package/dist/es/components/pagination/Pagination.js +113 -104
  84. package/dist/es/components/pagination/page-item-ellipsis.vue.js +13 -12
  85. package/dist/es/components/pagination/page-item-ellipsis.vue2.js +19 -15
  86. package/dist/es/components/pagination/page-jumper.vue.js +13 -12
  87. package/dist/es/components/pagination/page-jumper.vue2.js +7 -4
  88. package/dist/es/components/pagination/page-options.vue.js +4 -3
  89. package/dist/es/components/pagination/page-options.vue2.js +17 -15
  90. package/dist/es/components/skeleton/Skeleton.vue.js +11 -9
  91. package/dist/es/components/skeleton/SkeletonLine.vue.js +9 -8
  92. package/dist/es/components/skeleton/SkeletonShape.vue.js +8 -7
  93. package/dist/es/components/spin/Spin.js +124 -60
  94. package/dist/es/components/table/Table.js +3 -1
  95. package/dist/es/components/trigger/Trigger.js +19 -19
  96. package/dist/es/icons/_self/empty-better.js +25 -8
  97. package/dist/es/index.js +162 -158
  98. package/dist/es/locale/en-US.js +17 -1
  99. package/dist/es/locale/zh-CN.js +17 -1
  100. package/dist/es/style.css +1 -1
  101. package/dist/index.cjs +4 -4
  102. package/dist/index.umd.js +4 -4
  103. package/dist/locale/interface.d.ts +28 -0
  104. package/dist/style/base.css +1 -1
  105. package/dist/style/button.css +1 -1
  106. package/dist/style/color-picker.css +1 -0
  107. package/dist/style/color-picker.js +2 -0
  108. package/dist/style/date-picker.css +1 -1
  109. package/dist/style/empty.css +1 -1
  110. package/dist/style/form-checkbox.css +1 -1
  111. package/dist/style/form-input-tag.css +1 -1
  112. package/dist/style/form-input.css +1 -1
  113. package/dist/style/form-radio.css +1 -1
  114. package/dist/style/form-textarea.css +1 -1
  115. package/dist/style/form.css +1 -1
  116. package/dist/style/heatmap.css +1 -0
  117. package/dist/style/heatmap.js +2 -0
  118. package/dist/style/image.css +1 -1
  119. package/dist/style/menu.css +1 -1
  120. package/dist/style/pagination.css +1 -1
  121. package/dist/style/skeleton.css +1 -1
  122. package/dist/style/spin.css +1 -1
  123. package/dist/style/steps.css +1 -1
  124. package/dist/style/table.css +1 -1
  125. package/dist/style.css +1 -1
  126. package/dist/types.d.ts +2 -0
  127. package/package.json +1 -1
  128. package/volar.d.ts +2 -0
package/dist/style/button.css CHANGED
@@ -1 +1 @@
1
- :root{--x-button-color-bg-default: var(--x-color-fill-2);--x-button-color-bg-default-hover: var(--x-color-neutral-3);--x-button-color-bg-default-active: var(--x-color-neutral-4);--x-button-color-text-default: var(--x-color-text-primary);--x-button-color-border-default: var(--x-color-border-default);--x-button-color-text-solid: var(--x-color-white);--x-button-color-text-solid-primary: var(--x-color-white);--x-button-color-text-solid-success: var(--x-color-white);--x-button-color-text-solid-warning: var(--x-color-white);--x-button-color-text-solid-strong: var(--x-color-white);--x-button-color-text-solid-danger: var(--x-color-white);--x-button-color-text-solid-info: var(--x-color-white);--x-button-color-bg-primary-subtle: var(--x-color-primary-subtle);--x-button-color-bg-primary-subtle-hover: var(--x-color-primary-subtle-hover);--x-button-color-bg-primary-subtle-active: var(--x-color-primary-subtle-active);--x-button-color-bg-primary-solid: var(--x-color-primary-solid);--x-button-color-bg-primary-solid-hover: var(--x-color-primary-solid-hover);--x-button-color-bg-primary-solid-active: var(--x-color-primary-solid-active);--x-button-color-text-primary: var(--x-color-primary-button-text);--x-button-color-border-primary: var(--x-color-primary-solid);--x-button-color-bg-success-subtle: var(--x-color-success-subtle);--x-button-color-bg-success-subtle-hover: var(--x-color-success-subtle-hover);--x-button-color-bg-success-subtle-active: var(--x-color-success-subtle-active);--x-button-color-bg-success-solid: var(--x-color-success-solid);--x-button-color-bg-success-solid-hover: var(--x-color-success-solid-hover);--x-button-color-bg-success-solid-active: var(--x-color-success-solid-active);--x-button-color-text-success: var(--x-color-success-button-text);--x-button-color-border-success: var(--x-color-success-solid);--x-button-color-bg-warning-subtle: var(--x-color-warning-subtle);--x-button-color-bg-warning-subtle-hover: var(--x-color-warning-subtle-hover);--x-button-color-bg-warning-subtle-active: var(--x-color-warning-subtle-active);--x-button-color-bg-warning-solid: var(--x-color-warning-solid);--x-button-color-bg-warning-solid-hover: var(--x-color-warning-solid-hover);--x-button-color-bg-warning-solid-active: var(--x-color-warning-solid-active);--x-button-color-text-warning: var(--x-color-warning-button-text);--x-button-color-border-warning: var(--x-color-warning-solid);--x-button-color-bg-danger-subtle: var(--x-color-danger-subtle);--x-button-color-bg-danger-subtle-hover: var(--x-color-danger-subtle-hover);--x-button-color-bg-danger-subtle-active: var(--x-color-danger-subtle-active);--x-button-color-bg-danger-solid: var(--x-color-danger-solid);--x-button-color-bg-danger-solid-hover: var(--x-color-danger-solid-hover);--x-button-color-bg-danger-solid-active: var(--x-color-danger-solid-active);--x-button-color-text-danger: var(--x-color-danger-button-text);--x-button-color-border-danger: var(--x-color-danger-solid);--x-button-color-bg-strong-subtle: var(--x-color-strong-subtle);--x-button-color-bg-strong-subtle-hover: var(--x-color-strong-subtle-hover);--x-button-color-bg-strong-subtle-active: var(--x-color-strong-subtle-active);--x-button-color-bg-strong-solid: var(--x-color-strong-solid);--x-button-color-bg-strong-solid-hover: var(--x-color-strong-solid-hover);--x-button-color-bg-strong-solid-active: var(--x-color-strong-solid-active);--x-button-color-text-strong: var(--x-color-strong-button-text);--x-button-color-border-strong: var(--x-color-strong-solid);--x-button-color-bg-info-subtle: var(--x-color-fill-2);--x-button-color-bg-info-subtle-hover: var(--x-color-neutral-3);--x-button-color-bg-info-subtle-active: var(--x-color-neutral-4);--x-button-color-bg-info-solid: var(--x-color-constant-neutral-strong);--x-button-color-bg-info-solid-hover: var(--x-color-constant-neutral-strong-hover);--x-button-color-bg-info-solid-active: var(--x-color-constant-neutral-strong-active);--x-button-color-text-info: var(--x-color-text-secondary);--x-button-color-border-info: var(--x-color-neutral-5)}.x-button{--x-button-width: auto;--x-button-font-weight: 500;--x-button-opacity: 1;--x-button-border-style: solid;--x-button-border-color: var(--x-button-color-border-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-text-color: var(--x-button-color-text-default);--x-button-padding: 0 0;--x-button-mini-height: var(--x-size-mini);--x-button-mini-font-size: 12px;--x-button-mini-padding: 0 8px;--x-button-mini-border-radius: 4px;--x-button-small-height: var(--x-size-small);--x-button-small-font-size: 13px;--x-button-small-padding: 0 10px;--x-button-small-border-radius: 4px;--x-button-medium-height: var(--x-size-medium);--x-button-medium-font-size: 14px;--x-button-medium-padding: 0 14px;--x-button-medium-border-radius: 4px;--x-button-large-height: var(--x-size-large);--x-button-large-font-size: 14px;--x-button-large-padding: 0 20px;--x-button-large-border-radius: 6px;--x-button-huge-height: var(--x-size-huge);--x-button-huge-font-size: 16px;--x-button-huge-font-weight: 400;--x-button-huge-padding: 0 28px;--x-button-huge-border-radius: 4px}.x-button{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button{position:relative;display:inline-flex;justify-content:center;align-items:center;overflow:visible;margin:0;border-style:var(--x-button-border-style);border-width:1px;border-color:var(--x-button-border-color);border-radius:var(--x-button-border-radius);padding:var(--x-button-padding);width:var(--x-button-width);height:var(--x-button-height);color:var(--x-button-text-color);font-size:var(--x-button-font-size);font-weight:var(--x-button-font-weight);white-space:nowrap;background-color:var(--x-button-background-color);opacity:var(--x-button-opacity);outline:none;transition:color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),border-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear);box-sizing:border-box;appearance:none;user-select:none;vertical-align:bottom;cursor:pointer}.x-button>.x-wave{position:absolute;inset:-1px;z-index:0;border-radius:inherit;pointer-events:none;opacity:.45;box-shadow:0 0 0 0 var(--x-wave-color, currentColor);transition:box-shadow var(--x-transition-duration-4, 0.4s) var(--x-transition-timing-function-standard, ease),opacity var(--x-transition-duration-4, 0.4s) var(--x-transition-timing-function-linear, linear)}.x-button>.x-wave-active{opacity:0;box-shadow:0 0 0 6px var(--x-wave-color, currentColor)}.x-button--prefix{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;margin-right:4px}.x-button--suffix{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;margin-left:4px}.x-button--loading{position:relative;z-index:1;display:flex;transition:all .2s ease}.x-button--content{position:relative;z-index:1;display:flex}.x-button.x-button-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-primary{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid);--x-button-border-color: var(--x-button-color-bg-primary-solid)}.x-button-primary:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-hover);--x-button-border-color: var(--x-button-color-bg-primary-solid-hover)}.x-button-primary:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-active);--x-button-border-color: var(--x-button-color-bg-primary-solid-active)}.x-button-primary.x-button-default{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid);--x-button-border-color: var(--x-button-color-bg-primary-solid)}.x-button-primary.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-hover);--x-button-border-color: var(--x-button-color-bg-primary-solid-hover)}.x-button-primary.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-active);--x-button-border-color: var(--x-button-color-bg-primary-solid-active)}.x-button-primary.x-button-success{--x-button-text-color: var(--x-button-color-text-solid-success);--x-button-background-color: var(--x-button-color-bg-success-solid);--x-button-border-color: var(--x-button-color-bg-success-solid)}.x-button-primary.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-success);--x-button-background-color: var(--x-button-color-bg-success-solid-hover);--x-button-border-color: var(--x-button-color-bg-success-solid-hover)}.x-button-primary.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-success);--x-button-background-color: var(--x-button-color-bg-success-solid-active);--x-button-border-color: var(--x-button-color-bg-success-solid-active)}.x-button-primary.x-button-warning{--x-button-text-color: var(--x-button-color-text-solid-warning);--x-button-background-color: var(--x-button-color-bg-warning-solid);--x-button-border-color: var(--x-button-color-bg-warning-solid)}.x-button-primary.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-warning);--x-button-background-color: var(--x-button-color-bg-warning-solid-hover);--x-button-border-color: var(--x-button-color-bg-warning-solid-hover)}.x-button-primary.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-warning);--x-button-background-color: var(--x-button-color-bg-warning-solid-active);--x-button-border-color: var(--x-button-color-bg-warning-solid-active)}.x-button-primary.x-button-strong{--x-button-text-color: var(--x-button-color-text-solid-strong);--x-button-background-color: var(--x-button-color-bg-strong-solid);--x-button-border-color: var(--x-button-color-bg-strong-solid)}.x-button-primary.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-strong);--x-button-background-color: var(--x-button-color-bg-strong-solid-hover);--x-button-border-color: var(--x-button-color-bg-strong-solid-hover)}.x-button-primary.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-strong);--x-button-background-color: var(--x-button-color-bg-strong-solid-active);--x-button-border-color: var(--x-button-color-bg-strong-solid-active)}.x-button-primary.x-button-danger{--x-button-text-color: var(--x-button-color-text-solid-danger);--x-button-background-color: var(--x-button-color-bg-danger-solid);--x-button-border-color: var(--x-button-color-bg-danger-solid)}.x-button-primary.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-danger);--x-button-background-color: var(--x-button-color-bg-danger-solid-hover);--x-button-border-color: var(--x-button-color-bg-danger-solid-hover)}.x-button-primary.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-danger);--x-button-background-color: var(--x-button-color-bg-danger-solid-active);--x-button-border-color: var(--x-button-color-bg-danger-solid-active)}.x-button-primary.x-button-info{--x-button-text-color: var(--x-button-color-text-solid-info);--x-button-background-color: var(--x-button-color-bg-info-solid);--x-button-border-color: var(--x-button-color-bg-info-solid)}.x-button-primary.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-info);--x-button-background-color: var(--x-button-color-bg-info-solid-hover);--x-button-border-color: var(--x-button-color-bg-info-solid-hover)}.x-button-primary.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-info);--x-button-background-color: var(--x-button-color-bg-info-solid-active);--x-button-border-color: var(--x-button-color-bg-info-solid-active)}.x-button-outline{--x-button-border-style: solid}.x-button-outline{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-default{--x-button-border-style: solid}.x-button-outline.x-button-default{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-success{--x-button-border-style: solid}.x-button-outline.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-success)}.x-button-outline.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-button-color-border-success)}.x-button-outline.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-button-color-border-success)}.x-button-outline.x-button-warning{--x-button-border-style: solid}.x-button-outline.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-outline.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-outline.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-outline.x-button-strong{--x-button-border-style: solid}.x-button-outline.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-outline.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-outline.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-outline.x-button-danger{--x-button-border-style: solid}.x-button-outline.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-outline.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-outline.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-outline.x-button-info{--x-button-border-style: solid}.x-button-outline.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-info)}.x-button-outline.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-button-color-border-info)}.x-button-outline.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-button-color-border-info)}.x-button-dashed{--x-button-border-style: dashed}.x-button-dashed{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-default{--x-button-border-style: dashed}.x-button-dashed.x-button-default{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-success{--x-button-border-style: dashed}.x-button-dashed.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-success)}.x-button-dashed.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-button-color-border-success)}.x-button-dashed.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-button-color-border-success)}.x-button-dashed.x-button-warning{--x-button-border-style: dashed}.x-button-dashed.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-dashed.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-dashed.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-dashed.x-button-strong{--x-button-border-style: dashed}.x-button-dashed.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-dashed.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-dashed.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-dashed.x-button-danger{--x-button-border-style: dashed}.x-button-dashed.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-dashed.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-dashed.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-dashed.x-button-info{--x-button-border-style: dashed}.x-button-dashed.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-info)}.x-button-dashed.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-button-color-border-info)}.x-button-dashed.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-button-color-border-info)}.x-button-text{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-default{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain{--x-button-font-weight: 500}.x-button-plain{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button-plain.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button-plain.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button-plain.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border{--x-button-font-weight: 500}.x-button-hide-border{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button-hide-border.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button-hide-border.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button-hide-border.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-link{--x-button-height: auto;--x-button-padding: 0;--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent);--x-button-text-color: var(--x-button-color-text-primary);min-height:0}.x-button-link:not(.is-disabled):hover{--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent);--x-button-text-color: var(--x-button-color-text-primary)}.x-button-link:not(.is-disabled):active{--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent);--x-button-text-color: var(--x-button-color-text-primary)}.x-button-is-disabled{--x-button-opacity: 0.4;cursor:not-allowed}.x-button-block{display:flex;width:100%}.x-button-loading{cursor:default}.x-button-loading-fill--loading{position:absolute;inset:0;z-index:1;justify-content:center;align-items:center;color:var(--x-button-text-color);background-color:var(--x-button-background-color)}.x-button-narrow{--x-button-mini-padding: 0 0;--x-button-small-padding: 0 0;--x-button-medium-padding: 0 0;--x-button-large-padding: 0 0;--x-button-huge-padding: 0 0}.x-button-mini{--x-button-height: var(--x-button-mini-height);--x-button-font-size: var(--x-button-mini-font-size);--x-button-padding: var(--x-button-mini-padding);--x-button-border-radius: var(--x-button-mini-border-radius)}.x-button-small{--x-button-height: var(--x-button-small-height);--x-button-font-size: var(--x-button-small-font-size);--x-button-padding: var(--x-button-small-padding);--x-button-border-radius: var(--x-button-small-border-radius)}.x-button-medium{--x-button-height: var(--x-button-medium-height);--x-button-font-size: var(--x-button-medium-font-size);--x-button-padding: var(--x-button-medium-padding);--x-button-border-radius: var(--x-button-medium-border-radius)}.x-button-large{--x-button-height: var(--x-button-large-height);--x-button-font-size: var(--x-button-large-font-size);--x-button-padding: var(--x-button-large-padding);--x-button-border-radius: var(--x-button-large-border-radius)}.x-button-huge{--x-button-height: var(--x-button-huge-height);--x-button-font-size: var(--x-button-huge-font-size);--x-button-font-weight: var(--x-button-huge-font-weight);--x-button-padding: var(--x-button-huge-padding);--x-button-border-radius: var(--x-button-huge-border-radius)}.x-button-round{--x-button-border-radius: var(--x-button-height);height:var(--x-button-height)}.x-button-circle{--x-button-width: var(--x-button-height);--x-button-padding: 0;--x-button-border-radius: 100%;width:var(--x-button-height);height:var(--x-button-height)}.x-button-group{display:flex;width:min-content}.x-button-group>.x-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.x-button-group>.x-button:last-child{margin-left:-1px;border-left-color:var(--x-button-group-color-separator);border-top-left-radius:0;border-bottom-left-radius:0}.x-button-group>.x-button:not(:first-child):not(:last-child){margin-left:-1px;border-left-color:var(--x-button-group-color-separator);border-radius:0}
1
+ :root{--x-button-color-bg-default: var(--x-color-fill-2);--x-button-color-bg-default-hover: var(--x-color-neutral-3);--x-button-color-bg-default-active: var(--x-color-neutral-4);--x-button-color-text-default: var(--x-color-text-primary);--x-button-color-border-default: var(--x-color-border-default);--x-button-color-text-solid: var(--x-color-white);--x-button-color-text-solid-primary: var(--x-color-white);--x-button-color-text-solid-success: var(--x-color-white);--x-button-color-text-solid-warning: var(--x-color-white);--x-button-color-text-solid-strong: var(--x-color-white);--x-button-color-text-solid-danger: var(--x-color-white);--x-button-color-text-solid-info: var(--x-color-white);--x-button-color-bg-primary-subtle: var(--x-color-primary-subtle);--x-button-color-bg-primary-subtle-hover: var(--x-color-primary-subtle-hover);--x-button-color-bg-primary-subtle-active: var(--x-color-primary-subtle-active);--x-button-color-bg-primary-solid: var(--x-color-primary-solid);--x-button-color-bg-primary-solid-hover: var(--x-color-primary-solid-hover);--x-button-color-bg-primary-solid-active: var(--x-color-primary-solid-active);--x-button-color-text-primary: var(--x-color-primary-button-text);--x-button-color-border-primary: var(--x-color-primary-solid);--x-button-color-bg-success-subtle: var(--x-color-success-subtle);--x-button-color-bg-success-subtle-hover: var(--x-color-success-subtle-hover);--x-button-color-bg-success-subtle-active: var(--x-color-success-subtle-active);--x-button-color-bg-success-solid: var(--x-color-success-solid);--x-button-color-bg-success-solid-hover: var(--x-color-success-solid-hover);--x-button-color-bg-success-solid-active: var(--x-color-success-solid-active);--x-button-color-text-success: var(--x-color-success-button-text);--x-button-color-border-success: var(--x-color-success-solid);--x-button-color-bg-warning-subtle: var(--x-color-warning-subtle);--x-button-color-bg-warning-subtle-hover: var(--x-color-warning-subtle-hover);--x-button-color-bg-warning-subtle-active: var(--x-color-warning-subtle-active);--x-button-color-bg-warning-solid: var(--x-color-warning-solid);--x-button-color-bg-warning-solid-hover: var(--x-color-warning-solid-hover);--x-button-color-bg-warning-solid-active: var(--x-color-warning-solid-active);--x-button-color-text-warning: var(--x-color-warning-button-text);--x-button-color-border-warning: var(--x-color-warning-solid);--x-button-color-bg-danger-subtle: var(--x-color-danger-subtle);--x-button-color-bg-danger-subtle-hover: var(--x-color-danger-subtle-hover);--x-button-color-bg-danger-subtle-active: var(--x-color-danger-subtle-active);--x-button-color-bg-danger-solid: var(--x-color-danger-solid);--x-button-color-bg-danger-solid-hover: var(--x-color-danger-solid-hover);--x-button-color-bg-danger-solid-active: var(--x-color-danger-solid-active);--x-button-color-text-danger: var(--x-color-danger-button-text);--x-button-color-border-danger: var(--x-color-danger-solid);--x-button-color-bg-strong-subtle: var(--x-color-strong-subtle);--x-button-color-bg-strong-subtle-hover: var(--x-color-strong-subtle-hover);--x-button-color-bg-strong-subtle-active: var(--x-color-strong-subtle-active);--x-button-color-bg-strong-solid: var(--x-color-strong-solid);--x-button-color-bg-strong-solid-hover: var(--x-color-strong-solid-hover);--x-button-color-bg-strong-solid-active: var(--x-color-strong-solid-active);--x-button-color-text-strong: var(--x-color-strong-button-text);--x-button-color-border-strong: var(--x-color-strong-solid);--x-button-color-bg-info-subtle: var(--x-color-fill-2);--x-button-color-bg-info-subtle-hover: var(--x-color-neutral-3);--x-button-color-bg-info-subtle-active: var(--x-color-neutral-4);--x-button-color-bg-info-solid: var(--x-color-constant-neutral-strong);--x-button-color-bg-info-solid-hover: var(--x-color-constant-neutral-strong-hover);--x-button-color-bg-info-solid-active: var(--x-color-constant-neutral-strong-active);--x-button-color-text-info: var(--x-color-text-secondary);--x-button-color-border-info: var(--x-color-neutral-5)}.x-button{--x-button-width: auto;--x-button-font-weight: 500;--x-button-opacity: 1;--x-button-border-style: solid;--x-button-border-color: var(--x-button-color-border-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-text-color: var(--x-button-color-text-default);--x-button-padding: 0 0;--x-button-mini-height: var(--x-size-mini);--x-button-mini-font-size: 12px;--x-button-mini-padding: 0 8px;--x-button-mini-border-radius: 4px;--x-button-small-height: var(--x-size-small);--x-button-small-font-size: 13px;--x-button-small-padding: 0 10px;--x-button-small-border-radius: 4px;--x-button-medium-height: var(--x-size-medium);--x-button-medium-font-size: 14px;--x-button-medium-padding: 0 14px;--x-button-medium-border-radius: 4px;--x-button-large-height: var(--x-size-large);--x-button-large-font-size: 14px;--x-button-large-padding: 0 20px;--x-button-large-border-radius: 6px;--x-button-huge-height: var(--x-size-huge);--x-button-huge-font-size: 16px;--x-button-huge-font-weight: 400;--x-button-huge-padding: 0 28px;--x-button-huge-border-radius: 4px}.x-button{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button{position:relative;display:inline-flex;justify-content:center;align-items:center;overflow:visible;margin:0;border-style:var(--x-button-border-style);border-width:1px;border-color:var(--x-button-border-color);border-radius:var(--x-button-border-radius);padding:var(--x-button-padding);width:var(--x-button-width);height:var(--x-button-height);color:var(--x-button-text-color);font-size:var(--x-button-font-size);font-weight:var(--x-button-font-weight);line-height:var(--x-line-height-base);white-space:nowrap;background-color:var(--x-button-background-color);opacity:var(--x-button-opacity);outline:none;transition:color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),border-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear);box-sizing:border-box;appearance:none;user-select:none;vertical-align:bottom;cursor:pointer}.x-button>.x-wave{position:absolute;inset:-1px;z-index:0;border-radius:inherit;pointer-events:none;opacity:.45;box-shadow:0 0 0 0 var(--x-wave-color, currentColor);transition:box-shadow var(--x-transition-duration-4, 0.4s) var(--x-transition-timing-function-standard, ease),opacity var(--x-transition-duration-4, 0.4s) var(--x-transition-timing-function-linear, linear)}.x-button>.x-wave-active{opacity:0;box-shadow:0 0 0 6px var(--x-wave-color, currentColor)}.x-button--prefix{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;margin-right:4px}.x-button--suffix{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;margin-left:4px}.x-button--loading{position:relative;z-index:1;display:flex;transition:all .2s ease}.x-button--content{position:relative;z-index:1;display:flex}.x-button.x-button-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-primary{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid);--x-button-border-color: var(--x-button-color-bg-primary-solid)}.x-button-primary:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-hover);--x-button-border-color: var(--x-button-color-bg-primary-solid-hover)}.x-button-primary:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-active);--x-button-border-color: var(--x-button-color-bg-primary-solid-active)}.x-button-primary.x-button-default{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid);--x-button-border-color: var(--x-button-color-bg-primary-solid)}.x-button-primary.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-hover);--x-button-border-color: var(--x-button-color-bg-primary-solid-hover)}.x-button-primary.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-active);--x-button-border-color: var(--x-button-color-bg-primary-solid-active)}.x-button-primary.x-button-success{--x-button-text-color: var(--x-button-color-text-solid-success);--x-button-background-color: var(--x-button-color-bg-success-solid);--x-button-border-color: var(--x-button-color-bg-success-solid)}.x-button-primary.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-success);--x-button-background-color: var(--x-button-color-bg-success-solid-hover);--x-button-border-color: var(--x-button-color-bg-success-solid-hover)}.x-button-primary.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-success);--x-button-background-color: var(--x-button-color-bg-success-solid-active);--x-button-border-color: var(--x-button-color-bg-success-solid-active)}.x-button-primary.x-button-warning{--x-button-text-color: var(--x-button-color-text-solid-warning);--x-button-background-color: var(--x-button-color-bg-warning-solid);--x-button-border-color: var(--x-button-color-bg-warning-solid)}.x-button-primary.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-warning);--x-button-background-color: var(--x-button-color-bg-warning-solid-hover);--x-button-border-color: var(--x-button-color-bg-warning-solid-hover)}.x-button-primary.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-warning);--x-button-background-color: var(--x-button-color-bg-warning-solid-active);--x-button-border-color: var(--x-button-color-bg-warning-solid-active)}.x-button-primary.x-button-strong{--x-button-text-color: var(--x-button-color-text-solid-strong);--x-button-background-color: var(--x-button-color-bg-strong-solid);--x-button-border-color: var(--x-button-color-bg-strong-solid)}.x-button-primary.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-strong);--x-button-background-color: var(--x-button-color-bg-strong-solid-hover);--x-button-border-color: var(--x-button-color-bg-strong-solid-hover)}.x-button-primary.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-strong);--x-button-background-color: var(--x-button-color-bg-strong-solid-active);--x-button-border-color: var(--x-button-color-bg-strong-solid-active)}.x-button-primary.x-button-danger{--x-button-text-color: var(--x-button-color-text-solid-danger);--x-button-background-color: var(--x-button-color-bg-danger-solid);--x-button-border-color: var(--x-button-color-bg-danger-solid)}.x-button-primary.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-danger);--x-button-background-color: var(--x-button-color-bg-danger-solid-hover);--x-button-border-color: var(--x-button-color-bg-danger-solid-hover)}.x-button-primary.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-danger);--x-button-background-color: var(--x-button-color-bg-danger-solid-active);--x-button-border-color: var(--x-button-color-bg-danger-solid-active)}.x-button-primary.x-button-info{--x-button-text-color: var(--x-button-color-text-solid-info);--x-button-background-color: var(--x-button-color-bg-info-solid);--x-button-border-color: var(--x-button-color-bg-info-solid)}.x-button-primary.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-info);--x-button-background-color: var(--x-button-color-bg-info-solid-hover);--x-button-border-color: var(--x-button-color-bg-info-solid-hover)}.x-button-primary.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-info);--x-button-background-color: var(--x-button-color-bg-info-solid-active);--x-button-border-color: var(--x-button-color-bg-info-solid-active)}.x-button-outline{--x-button-border-style: solid}.x-button-outline{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-default{--x-button-border-style: solid}.x-button-outline.x-button-default{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-success{--x-button-border-style: solid}.x-button-outline.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-success)}.x-button-outline.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-button-color-border-success)}.x-button-outline.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-button-color-border-success)}.x-button-outline.x-button-warning{--x-button-border-style: solid}.x-button-outline.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-outline.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-outline.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-outline.x-button-strong{--x-button-border-style: solid}.x-button-outline.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-outline.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-outline.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-outline.x-button-danger{--x-button-border-style: solid}.x-button-outline.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-outline.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-outline.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-outline.x-button-info{--x-button-border-style: solid}.x-button-outline.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-info)}.x-button-outline.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-button-color-border-info)}.x-button-outline.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-button-color-border-info)}.x-button-dashed{--x-button-border-style: dashed}.x-button-dashed{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-default{--x-button-border-style: dashed}.x-button-dashed.x-button-default{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-success{--x-button-border-style: dashed}.x-button-dashed.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-success)}.x-button-dashed.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-button-color-border-success)}.x-button-dashed.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-button-color-border-success)}.x-button-dashed.x-button-warning{--x-button-border-style: dashed}.x-button-dashed.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-dashed.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-dashed.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-dashed.x-button-strong{--x-button-border-style: dashed}.x-button-dashed.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-dashed.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-dashed.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-dashed.x-button-danger{--x-button-border-style: dashed}.x-button-dashed.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-dashed.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-dashed.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-dashed.x-button-info{--x-button-border-style: dashed}.x-button-dashed.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-info)}.x-button-dashed.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-button-color-border-info)}.x-button-dashed.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-button-color-border-info)}.x-button-text{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-default{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain{--x-button-font-weight: 500}.x-button-plain{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button-plain.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button-plain.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button-plain.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border{--x-button-font-weight: 500}.x-button-hide-border{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button-hide-border.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button-hide-border.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button-hide-border.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-link{--x-button-height: auto;--x-button-padding: 0;--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent);--x-button-text-color: var(--x-button-color-text-primary);min-height:0}.x-button-link:not(.is-disabled):hover{--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent);--x-button-text-color: var(--x-button-color-text-primary)}.x-button-link:not(.is-disabled):active{--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent);--x-button-text-color: var(--x-button-color-text-primary)}.x-button-is-disabled{--x-button-opacity: 0.4;cursor:not-allowed}.x-button-block{display:flex;width:100%}.x-button-loading{cursor:default}.x-button-loading-fill--loading{position:absolute;inset:0;z-index:1;justify-content:center;align-items:center;color:var(--x-button-text-color);background-color:var(--x-button-background-color)}.x-button-narrow{--x-button-mini-padding: 0 0;--x-button-small-padding: 0 0;--x-button-medium-padding: 0 0;--x-button-large-padding: 0 0;--x-button-huge-padding: 0 0}.x-button-mini{--x-button-height: var(--x-button-mini-height);--x-button-font-size: var(--x-button-mini-font-size);--x-button-padding: var(--x-button-mini-padding);--x-button-border-radius: var(--x-button-mini-border-radius)}.x-button-small{--x-button-height: var(--x-button-small-height);--x-button-font-size: var(--x-button-small-font-size);--x-button-padding: var(--x-button-small-padding);--x-button-border-radius: var(--x-button-small-border-radius)}.x-button-medium{--x-button-height: var(--x-button-medium-height);--x-button-font-size: var(--x-button-medium-font-size);--x-button-padding: var(--x-button-medium-padding);--x-button-border-radius: var(--x-button-medium-border-radius)}.x-button-large{--x-button-height: var(--x-button-large-height);--x-button-font-size: var(--x-button-large-font-size);--x-button-padding: var(--x-button-large-padding);--x-button-border-radius: var(--x-button-large-border-radius)}.x-button-huge{--x-button-height: var(--x-button-huge-height);--x-button-font-size: var(--x-button-huge-font-size);--x-button-font-weight: var(--x-button-huge-font-weight);--x-button-padding: var(--x-button-huge-padding);--x-button-border-radius: var(--x-button-huge-border-radius)}.x-button-round{--x-button-border-radius: var(--x-button-height);height:var(--x-button-height)}.x-button-circle{--x-button-width: var(--x-button-height);--x-button-padding: 0;--x-button-border-radius: 100%;width:var(--x-button-height);height:var(--x-button-height)}.x-button-group{display:flex;width:min-content}.x-button-group>.x-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.x-button-group>.x-button:last-child{margin-left:-1px;border-left-color:var(--x-button-group-color-separator);border-top-left-radius:0;border-bottom-left-radius:0}.x-button-group>.x-button:not(:first-child):not(:last-child){margin-left:-1px;border-left-color:var(--x-button-group-color-separator);border-radius:0}
package/dist/style/color-picker.css ADDED
@@ -0,0 +1 @@
1
+ :root{--x-color-picker-panel-bg: var(--x-color-bg-elevated);--x-color-picker-panel-shadow: var(--x-shadow-popover);--x-color-picker-border: var(--x-color-border-subtle);--x-color-picker-color-text: var(--x-color-text-2);--x-color-picker-color-text_active: var(--x-color-primary-text);--x-color-picker-color-handle-bg: var(--x-color-bg-surface);--x-color-picker-color-handle-border: var(--x-color-neutral-5);--x-color-picker-color-trigger-bg: var(--x-color-bg-surface);--x-color-picker-color-swatch_border: var(--x-color-neutral-4);--x-color-picker-color-swatch_active: var(--x-color-primary-text);--x-color-picker-color-swatch-check: var(--x-color-white);--x-color-picker-checker: var(--x-color-fill-2);--x-color-picker-checker-alt: var(--x-color-bg-surface);--x-color-picker-border-radius: var(--x-border-radius-medium);--x-color-picker-border-radius-swatch: var(--x-border-radius-small);--x-color-picker-size-panel-width: 240px;--x-color-picker-size-sv-height: 140px;--x-color-picker-size-slider-height: 10px;--x-color-picker-size-handle: 12px;--x-color-picker-size-trigger: var(--x-size-8);--x-color-picker-size-trigger-color: var(--x-size-5);--x-color-picker-size-swatch: var(--x-size-6);--x-color-picker-spacing-panel: var(--x-spacing-4);--x-color-picker-spacing-slider: var(--x-spacing-4);--x-color-picker-spacing-inputs: var(--x-spacing-3);--x-color-picker-spacing-swatches: var(--x-spacing-2);--x-color-picker-font-size: var(--x-font-size-body-1)}.x-color-picker{display:inline-block;font-size:var(--x-color-picker-font-size)}.x-color-picker--trigger{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--x-color-picker-size-trigger);height:var(--x-color-picker-size-trigger);padding:0;background-color:var(--x-color-picker-color-trigger-bg);border:1px solid var(--x-color-picker-border);border-radius:var(--x-color-picker-border-radius-swatch);cursor:pointer;transition:border-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-color-picker--trigger:hover{border-color:var(--x-color-picker-color-text_active)}.x-color-picker--trigger:focus-visible{outline:2px solid var(--x-color-primary-text);outline-offset:1px}.x-color-picker--trigger:disabled{cursor:not-allowed;opacity:.5}.x-color-picker--trigger-wrapper{display:inline-flex;gap:var(--x-spacing-2);align-items:center}.x-color-picker--trigger-label{color:var(--x-color-picker-color-text);line-height:var(--x-line-height-base)}.x-color-picker--trigger-color{display:block;width:var(--x-color-picker-size-trigger-color);height:var(--x-color-picker-size-trigger-color);border-radius:var(--x-border-radius-small)}.x-color-picker--panel{box-sizing:border-box;width:var(--x-color-picker-size-panel-width);overflow:hidden;color:var(--x-color-picker-color-text);background-color:var(--x-color-picker-panel-bg);border-radius:var(--x-color-picker-border-radius);box-shadow:var(--x-color-picker-panel-shadow)}.x-color-picker--panel-body{display:flex;flex-direction:column;gap:var(--x-color-picker-spacing-slider);padding:var(--x-color-picker-spacing-panel)}.x-color-picker--sv{position:relative;height:var(--x-color-picker-size-sv-height);border-radius:var(--x-color-picker-border-radius-swatch);cursor:crosshair;touch-action:none}.x-color-picker--sv.x-color-picker-is-dragging{cursor:grabbing}.x-color-picker--sv:focus-visible{outline:2px solid var(--x-color-primary-text);outline-offset:2px}.x-color-picker--sv-white{position:absolute;inset:0;background-image:linear-gradient(to right, var(--x-color-white), var(--x-color-transparent));border-radius:inherit}.x-color-picker--sv-black{position:absolute;inset:0;background-image:linear-gradient(to top, var(--x-color-black), var(--x-color-transparent));border-radius:inherit}.x-color-picker--sv-handler{position:absolute;box-sizing:border-box;width:var(--x-color-picker-size-handle);height:var(--x-color-picker-size-handle);background-color:var(--x-color-picker-color-handle-bg);border:2px solid var(--x-color-picker-color-handle-bg);border-radius:50%;box-shadow:0 0 0 1px var(--x-color-picker-color-handle-border);transform:translate(-50%, -50%);pointer-events:none}.x-color-picker--sliders{display:flex;flex-direction:column;gap:var(--x-color-picker-spacing-inputs)}.x-color-picker--slider{padding:0;cursor:pointer}.x-color-picker--slider:focus-visible{outline:2px solid var(--x-color-primary-text);outline-offset:2px}.x-color-picker--slider-track{position:relative;height:var(--x-color-picker-size-slider-height);border-radius:var(--x-border-radius-small)}.x-color-picker--slider-handler{position:absolute;top:50%;box-sizing:border-box;width:var(--x-color-picker-size-handle);height:var(--x-color-picker-size-handle);background-color:var(--x-color-picker-color-handle-bg);border:2px solid var(--x-color-picker-color-handle-bg);border-radius:50%;box-shadow:0 0 0 1px var(--x-color-picker-color-handle-border);transform:translate(-50%, -50%);pointer-events:none}.x-color-picker--modes{display:flex;gap:var(--x-spacing-1)}.x-color-picker--mode{flex:1;padding:var(--x-spacing-1) var(--x-spacing-2);color:var(--x-color-picker-color-text);font-size:var(--x-color-picker-font-size);line-height:var(--x-line-height-base);background-color:var(--x-color-transparent);border:none;border-radius:var(--x-border-radius-small);cursor:pointer;transition:color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-color-picker--mode:hover:not(:disabled){background-color:var(--x-color-fill-2)}.x-color-picker--mode:disabled{cursor:not-allowed}.x-color-picker--mode.x-color-picker-is-active{color:var(--x-color-picker-color-text_active);background-color:var(--x-color-primary-subtle)}.x-color-picker--inputs{display:flex;gap:var(--x-color-picker-spacing-inputs);align-items:center}.x-color-picker--channel{flex:1;min-width:0}.x-color-picker--swatches{display:flex;flex-wrap:wrap;gap:var(--x-color-picker-spacing-swatches)}.x-color-picker--swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--x-color-picker-size-swatch);height:var(--x-color-picker-size-swatch);padding:0;color:var(--x-color-picker-color-swatch-check);border:1px solid var(--x-color-picker-color-swatch_border);border-radius:var(--x-color-picker-border-radius-swatch);cursor:pointer;transition:transform var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-color-picker--swatch:hover:not(:disabled){transform:scale(1.1)}.x-color-picker--swatch:disabled{cursor:not-allowed;opacity:.5}.x-color-picker--swatch.x-color-picker-is-active{box-shadow:0 0 0 1px var(--x-color-picker-color-swatch_active)}.x-color-picker--swatch .x-icon{width:var(--x-size-3);height:var(--x-size-3);font-size:var(--x-size-3)}.x-color-picker--panel-footer{display:flex;align-items:center;justify-content:space-between;padding:var(--x-color-picker-spacing-panel);padding-top:0}
package/dist/style/color-picker.js ADDED
@@ -0,0 +1,2 @@
1
+ import './base.css';
2
+ import './color-picker.css';
package/dist/style/date-picker.css CHANGED
@@ -1 +1 @@
1
- :root{--x-date-picker-panel-bg: var(--x-color-bg-popup);--x-date-picker-panel-border: var(--x-color-transparent);--x-date-picker-footer-border: var(--x-split-color);--x-date-picker-panel-radius: var(--x-border-radius-medium);--x-date-picker-panel-shadow: var(--x-picker-panel-shadow);--x-date-picker-panel-width: 280px;--x-date-picker-week-panel-width: 320px;--x-date-picker-range-width: calc(var(--x-date-picker-panel-width) * 2);--x-date-picker-cell-size: 32px;--x-date-picker-cell-inner-size: 24px;--x-date-picker-cell-gap: 0;--x-date-picker-cell-color: var(--x-color-text-2);--x-date-picker-cell-color-hover: var(--x-color-text-1);--x-date-picker-cell-bg-hover: var(--x-color-fill-1);--x-date-picker-cell-bg-range: var(--x-color-primary-light-1);--x-date-picker-cell-bg-range-hover: var(--x-color-primary-2);--x-date-picker-cell-bg-selected: var(--x-color-primary-6);--x-date-picker-cell-color-selected: var(--x-color-white);--x-date-picker-cell-color-disabled: var(--x-color-text-4);--x-date-picker-cell-color-out-view: var(--x-color-text-4);--x-date-picker-font-size: var(--x-font-size-body-3);--x-date-picker-action-font-size: var(--x-font-size-body-3);--x-date-picker-confirm-color: var(--x-color-primary-text);--x-date-picker-today-color: var(--x-color-primary-text)}.x-date-picker{width:220px}.x-date-picker-range{width:270px}.x-date-picker-datetime{width:390px}.x-date-picker--popup{line-height:var(--x-line-height-base)}.x-date-picker--panel{width:var(--x-date-picker-panel-width);overflow:hidden;color:var(--x-date-picker-cell-color);font-size:var(--x-date-picker-font-size);background:var(--x-date-picker-panel-bg);border:1px solid var(--x-date-picker-panel-border);border-radius:var(--x-date-picker-panel-radius);box-shadow:var(--x-date-picker-panel-shadow)}.x-date-picker-mode-week{width:var(--x-date-picker-week-panel-width)}.x-date-picker--popup-inner{overflow:hidden;background:var(--x-date-picker-panel-bg);border:1px solid var(--x-date-picker-panel-border);border-radius:var(--x-date-picker-panel-radius);box-shadow:var(--x-date-picker-panel-shadow)}.x-date-picker--panels{display:flex;gap:0}.x-date-picker--datetime-body{display:flex;align-items:stretch}.x-date-picker--datetime-body .x-date-picker--panel{border:0;border-radius:0;box-shadow:none}.x-date-picker--time-side{width:180px;border-left:1px solid var(--x-date-picker-footer-border)}.x-date-picker--time-side .x-time-picker--panel{width:100%;border:0;border-radius:0;box-shadow:none}.x-date-picker--time-side .x-time-picker--columns{width:100%}.x-date-picker--time-side .x-time-picker--column{flex:1 1 0;min-width:0;width:auto;height:234px}.x-date-picker--time-title{height:45px;color:var(--x-color-text-1);font-weight:500;line-height:45px;text-align:center;border-bottom:1px solid var(--x-date-picker-footer-border)}.x-date-picker--range-time-panel{display:grid;grid-template-columns:repeat(2, 1fr)}.x-date-picker--range-time-panel .x-time-picker--panel{width:100%;border:0;border-radius:0;box-shadow:none}.x-date-picker--range-time-panel .x-time-picker--columns{width:100%}.x-date-picker--range-time-panel .x-time-picker--column{flex:1 1 0;min-width:0;width:auto;height:196px}.x-date-picker--range-time-column{min-width:0}.x-date-picker--range-time-column+.x-date-picker--range-time-column{border-left:1px solid var(--x-date-picker-footer-border)}.x-date-picker--range-time-column.x-date-picker-is-active{background:var(--x-color-fill-1)}.x-date-picker--range-time-column.x-date-picker-is-active .x-date-picker--time-title{color:var(--x-color-text-1)}.x-date-picker--range-datetime-footer{display:grid;grid-template-columns:1.15fr 1fr 1.15fr 1fr;border-top:1px solid var(--x-date-picker-footer-border)}.x-date-picker--datetime-footer{display:flex;align-items:center;justify-content:space-between;min-height:36px;padding:4px 8px;border-top:1px solid var(--x-date-picker-footer-border)}.x-date-picker--range-datetime-item{display:flex;gap:8px;align-items:center;justify-content:center;min-width:0;height:40px;padding:0 12px;color:var(--x-color-text-2);font:inherit;font-size:var(--x-font-size-body-1);line-height:1;text-align:center;background:var(--x-color-transparent);border:none;cursor:pointer}.x-date-picker--range-datetime-item+.x-date-picker--range-datetime-item{border-left:1px solid var(--x-date-picker-footer-border)}.x-date-picker--range-datetime-item span,.x-date-picker--range-datetime-item strong{min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-date-picker--range-datetime-item span{font-weight:400}.x-date-picker--range-datetime-item strong{color:var(--x-color-text-1);font-weight:400}.x-date-picker--range-datetime-item:hover,.x-date-picker--range-datetime-item.x-date-picker-is-active{background:var(--x-color-fill-1)}.x-date-picker-popup-range{width:var(--x-date-picker-range-width)}.x-date-picker-popup-range .x-date-picker--panel{border:0;border-radius:0;box-shadow:none}.x-date-picker-popup-datetime{display:block}.x-date-picker--header{display:grid;grid-template-columns:28px 28px 1fr 28px 28px;gap:2px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--x-date-picker-footer-border)}.x-date-picker--header-left{grid-template-columns:28px 28px 1fr}.x-date-picker--header-right{grid-template-columns:1fr 28px 28px}.x-date-picker--header-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;color:var(--x-color-text-2);font:inherit;background:var(--x-color-transparent);border:none;border-radius:3px;cursor:pointer}.x-date-picker--header-btn>.x-icon{width:14px;height:14px;font-size:14px}.x-date-picker--header-btn:hover,.x-date-picker--header-btn:focus-visible{color:var(--x-color-text-1);background:var(--x-color-fill-1);outline:none}.x-date-picker--header-label{min-width:0;height:28px;color:var(--x-color-text-1);font:inherit;font-weight:500;background:var(--x-color-transparent);border:none;border-radius:3px;cursor:pointer;text-align:center}.x-date-picker--header-label:hover,.x-date-picker--header-label:focus-visible{background:var(--x-color-fill-1);outline:none}.x-date-picker--weekdays{display:grid;grid-template-columns:repeat(7, 1fr);padding:8px 12px 0;color:var(--x-color-text-3);font-size:var(--x-font-size-body-1);text-align:center}.x-date-picker--weekdays span{height:24px;line-height:24px}.x-date-picker--weekdays.x-date-picker-is-week-mode{grid-template-columns:54px repeat(7, 1fr)}.x-date-picker--body{display:grid;column-gap:var(--x-date-picker-cell-gap);row-gap:2px;padding:8px 12px 10px}.x-date-picker--row{display:contents}.x-date-picker--body-date{grid-template-columns:repeat(7, 1fr)}.x-date-picker--body-date .x-date-picker--cell:nth-child(7n+1)::before{border-top-left-radius:calc(var(--x-date-picker-cell-inner-size)/2);border-bottom-left-radius:calc(var(--x-date-picker-cell-inner-size)/2)}.x-date-picker--body-date .x-date-picker--cell:nth-child(7n)::before{border-top-right-radius:calc(var(--x-date-picker-cell-inner-size)/2);border-bottom-right-radius:calc(var(--x-date-picker-cell-inner-size)/2)}.x-date-picker--body-week{grid-template-columns:54px repeat(7, 1fr)}.x-date-picker--body-week .x-date-picker--cell::before{content:none}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-selected{color:var(--x-date-picker-cell-color-selected);background:var(--x-date-picker-cell-bg-selected)}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-selected .x-date-picker--cell-inner{color:inherit;background:var(--x-color-transparent)}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-start.x-date-picker-is-week-selected{border-radius:0}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-end.x-date-picker-is-week-selected{border-radius:0 12px 12px 0}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-label.x-date-picker-is-week-selected{color:var(--x-date-picker-cell-color-selected);background:var(--x-date-picker-cell-bg-selected);border-radius:12px 0 0 12px}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-label.x-date-picker-is-week-selected .x-date-picker--cell-inner{color:inherit;background:var(--x-color-transparent)}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-start.x-date-picker-is-week-end.x-date-picker-is-week-selected{border-radius:12px}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-selected::after{opacity:0}.x-date-picker--body-month{grid-template-columns:repeat(3, 1fr)}.x-date-picker--body-month .x-date-picker--cell-inner{min-width:48px;height:24px;border-radius:3px}.x-date-picker--body-year{grid-template-columns:repeat(3, 1fr)}.x-date-picker--body-year .x-date-picker--cell-inner{min-width:48px;height:24px;border-radius:3px}.x-date-picker--body-quarter{grid-template-columns:repeat(2, 1fr)}.x-date-picker--body-quarter .x-date-picker--cell-inner{min-width:48px;height:24px;border-radius:3px}.x-date-picker--cell-inner{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:var(--x-date-picker-cell-inner-size);min-width:var(--x-date-picker-cell-inner-size);height:var(--x-date-picker-cell-inner-size);padding:0;border-radius:50%}.x-date-picker--cell-date{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:100%;min-width:0;height:var(--x-date-picker-cell-size)}.x-date-picker--cell-lunar{display:none;max-width:38px;margin-top:3px;overflow:hidden;color:var(--x-color-text-3);font-size:var(--x-font-size-body-1);line-height:12px;opacity:.86;white-space:nowrap;text-overflow:ellipsis}.x-date-picker--cell{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0;height:var(--x-date-picker-cell-size);padding:0;color:var(--x-date-picker-cell-color);font:inherit;background:var(--x-color-transparent);border:none;border-radius:0;cursor:pointer;transition:color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-date-picker--cell::after{position:absolute;bottom:3px;left:50%;z-index:2;width:4px;height:4px;background:var(--x-date-picker-today-color);border-radius:50%;transform:translateX(-50%);opacity:0;content:"";pointer-events:none}.x-date-picker--cell::before{position:absolute;top:50%;right:0;left:0;z-index:0;height:var(--x-date-picker-cell-inner-size);background:var(--x-color-transparent);transform:translateY(-50%);content:"";transition:background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-date-picker--cell:hover,.x-date-picker--cell:focus-visible{color:var(--x-date-picker-cell-color-hover);outline:none}.x-date-picker--cell:hover .x-date-picker--cell-inner,.x-date-picker--cell:focus-visible .x-date-picker--cell-inner{background:var(--x-date-picker-cell-bg-hover)}.x-date-picker--cell.x-date-picker-is-today::after{opacity:1}.x-date-picker--cell.x-date-picker-is-in-range,.x-date-picker--cell.x-date-picker-is-range-start,.x-date-picker--cell.x-date-picker-is-range-end,.x-date-picker--cell.x-date-picker-is-in-preview-range,.x-date-picker--cell.x-date-picker-is-preview-range-start,.x-date-picker--cell.x-date-picker-is-preview-range-end{color:var(--x-color-text-1)}.x-date-picker--cell.x-date-picker-is-in-range::before,.x-date-picker--cell.x-date-picker-is-range-start::before,.x-date-picker--cell.x-date-picker-is-range-end::before,.x-date-picker--cell.x-date-picker-is-in-preview-range::before,.x-date-picker--cell.x-date-picker-is-preview-range-start::before,.x-date-picker--cell.x-date-picker-is-preview-range-end::before{background:var(--x-date-picker-cell-bg-range)}.x-date-picker--cell.x-date-picker-is-range-start::before,.x-date-picker--cell.x-date-picker-is-preview-range-start::before{left:50%}.x-date-picker--cell.x-date-picker-is-range-end::before,.x-date-picker--cell.x-date-picker-is-preview-range-end::before{right:50%}.x-date-picker--cell.x-date-picker-is-range-start.x-date-picker-is-range-end::before{background:var(--x-color-transparent)}.x-date-picker--cell.x-date-picker-is-in-range:hover .x-date-picker--cell-inner,.x-date-picker--cell.x-date-picker-is-in-range:focus-visible .x-date-picker--cell-inner,.x-date-picker--cell.x-date-picker-is-in-preview-range:hover .x-date-picker--cell-inner,.x-date-picker--cell.x-date-picker-is-in-preview-range:focus-visible .x-date-picker--cell-inner{background:var(--x-color-transparent)}.x-date-picker--cell.x-date-picker-is-in-range:hover::before,.x-date-picker--cell.x-date-picker-is-in-range:focus-visible::before,.x-date-picker--cell.x-date-picker-is-range-start:hover::before,.x-date-picker--cell.x-date-picker-is-range-start:focus-visible::before,.x-date-picker--cell.x-date-picker-is-range-end:hover::before,.x-date-picker--cell.x-date-picker-is-range-end:focus-visible::before{background:var(--x-date-picker-cell-bg-range-hover)}.x-date-picker--cell.x-date-picker-is-selected .x-date-picker--cell-inner,.x-date-picker--cell.x-date-picker-is-range-start .x-date-picker--cell-inner,.x-date-picker--cell.x-date-picker-is-range-end .x-date-picker--cell-inner{color:var(--x-date-picker-cell-color-selected);background:var(--x-date-picker-cell-bg-selected)}.x-date-picker--cell.x-date-picker-is-selected .x-date-picker--cell-inner .x-date-picker--cell-lunar,.x-date-picker--cell.x-date-picker-is-range-start .x-date-picker--cell-inner .x-date-picker--cell-lunar,.x-date-picker--cell.x-date-picker-is-range-end .x-date-picker--cell-inner .x-date-picker--cell-lunar{color:inherit}.x-date-picker--cell.x-date-picker-is-selected::after,.x-date-picker--cell.x-date-picker-is-range-start::after,.x-date-picker--cell.x-date-picker-is-range-end::after{opacity:0}.x-date-picker--cell.x-date-picker-is-out-view{color:var(--x-date-picker-cell-color-out-view)}.x-date-picker--cell.x-date-picker-is-out-view .x-date-picker--cell-inner{background:var(--x-color-transparent)}.x-date-picker--cell.x-date-picker-is-out-view.x-date-picker-is-today::after{opacity:0}.x-date-picker--cell.x-date-picker-is-week-label{color:var(--x-color-text-3);cursor:default}.x-date-picker--cell.x-date-picker-is-week-label .x-date-picker--cell-inner{width:auto;min-width:50px;padding:0;background:var(--x-color-transparent);border-radius:0;white-space:nowrap}.x-date-picker--cell.x-date-picker-is-week-start{justify-content:center}.x-date-picker--cell.x-date-picker-is-week-start.x-date-picker-is-selected .x-date-picker--cell-inner,.x-date-picker--cell.x-date-picker-is-week-start.x-date-picker-is-range-start .x-date-picker--cell-inner,.x-date-picker--cell.x-date-picker-is-week-start.x-date-picker-is-range-end .x-date-picker--cell-inner{margin-left:0}.x-date-picker--cell.x-date-picker-is-disabled,.x-date-picker--cell:disabled{color:var(--x-date-picker-cell-color-disabled);background:var(--x-color-transparent);cursor:not-allowed}.x-date-picker--cell.x-date-picker-is-disabled .x-date-picker--cell-inner,.x-date-picker--cell:disabled .x-date-picker--cell-inner{background:var(--x-color-transparent)}.x-date-picker--cell.x-date-picker-is-week-label:disabled{color:var(--x-color-text-3);cursor:default}.x-date-picker--cell.x-date-picker-is-week-label.x-date-picker-is-week-selected:disabled{color:var(--x-date-picker-cell-color-selected)}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--weekdays{padding-top:6px}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--body-date{column-gap:0;row-gap:4px;padding-top:6px;padding-bottom:12px}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell{flex-direction:column;height:50px}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell::after{opacity:0}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell-date{width:100%;height:32px;border-radius:0}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell-inner{width:24px;min-width:24px;height:24px}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell-lunar{display:block}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-out-view .x-date-picker--cell-lunar{color:var(--x-color-text-4);opacity:.72}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell:hover .x-date-picker--cell-inner,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell:focus-visible .x-date-picker--cell-inner{background:var(--x-date-picker-cell-bg-hover)}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-range:hover .x-date-picker--cell-inner,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-range:focus-visible .x-date-picker--cell-inner,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-preview-range:hover .x-date-picker--cell-inner,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-preview-range:focus-visible .x-date-picker--cell-inner,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-start:hover .x-date-picker--cell-inner,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-end:hover .x-date-picker--cell-inner{background:var(--x-color-transparent)}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-range:hover::before,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-range:focus-visible::before,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-start:hover::before,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-start:focus-visible::before,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-end:hover::before,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-end:focus-visible::before{background:var(--x-date-picker-cell-bg-range-hover)}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-selected .x-date-picker--cell-lunar,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-start .x-date-picker--cell-lunar,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-end .x-date-picker--cell-lunar{color:var(--x-color-text-2);opacity:.86}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell::before{top:16px}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-range,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-start,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-end,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-preview-range,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-preview-range-start,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-preview-range-end{background:var(--x-color-transparent)}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-range .x-date-picker--cell-date,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-start .x-date-picker--cell-date,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-end .x-date-picker--cell-date,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-preview-range .x-date-picker--cell-date,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-preview-range-start .x-date-picker--cell-date,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-preview-range-end .x-date-picker--cell-date{background:var(--x-color-transparent)}.x-date-picker--shortcuts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 10px;border-top:1px solid var(--x-date-picker-footer-border)}.x-date-picker--range-footer{display:flex;align-items:center;justify-content:space-between;min-height:40px;padding:6px 10px;border-top:1px solid var(--x-date-picker-footer-border)}.x-date-picker--range-shortcuts{display:flex;flex:1;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}.x-date-picker--shortcut{height:24px;padding:0 8px;color:var(--x-color-text-2);font:inherit;font-size:var(--x-date-picker-action-font-size);background:var(--x-color-fill-1);border:none;border-radius:3px;cursor:pointer}.x-date-picker--shortcut:hover,.x-date-picker--shortcut:focus-visible{color:var(--x-color-primary-text);background:var(--x-color-primary-light-1);outline:none}.x-date-picker--extra{flex:1 0 100%;min-width:0;color:var(--x-color-text-3);font-size:var(--x-font-size-body-1)}.x-date-picker--footer{display:flex;align-items:center;justify-content:space-between;min-height:36px;padding:4px 8px;border-top:1px solid var(--x-date-picker-footer-border)}.x-date-picker--footer-btn{min-width:36px;height:24px;padding:0 8px;color:var(--x-color-text-2);font:inherit;font-size:var(--x-date-picker-action-font-size);background:var(--x-color-transparent);border:none;border-radius:3px;cursor:pointer}.x-date-picker--footer-btn:hover,.x-date-picker--footer-btn:focus-visible{background:var(--x-color-fill-1);outline:none}.x-date-picker--today{color:var(--x-date-picker-today-color)}.x-date-picker--confirm{color:var(--x-date-picker-confirm-color)}
1
+ :root{--x-date-picker-panel-bg: var(--x-color-bg-popup);--x-date-picker-panel-border: var(--x-color-transparent);--x-date-picker-footer-border: var(--x-split-color);--x-date-picker-panel-radius: var(--x-border-radius-medium);--x-date-picker-panel-shadow: var(--x-picker-panel-shadow);--x-date-picker-panel-width: 280px;--x-date-picker-week-panel-width: 320px;--x-date-picker-range-width: calc(var(--x-date-picker-panel-width) * 2);--x-date-picker-cell-size: 32px;--x-date-picker-cell-inner-size: 24px;--x-date-picker-cell-gap: 0;--x-date-picker-cell-color: var(--x-color-text-2);--x-date-picker-cell-color-hover: var(--x-color-text-1);--x-date-picker-cell-bg-hover: var(--x-color-fill-1);--x-date-picker-cell-bg-range: var(--x-color-primary-light-1);--x-date-picker-cell-bg-range-hover: var(--x-color-primary-2);--x-date-picker-cell-bg-selected: var(--x-color-primary-6);--x-date-picker-cell-color-selected: var(--x-color-white);--x-date-picker-cell-color-disabled: var(--x-color-text-4);--x-date-picker-cell-color-out-view: var(--x-color-text-4);--x-date-picker-font-size: var(--x-font-size-body-3);--x-date-picker-action-font-size: var(--x-font-size-body-3);--x-date-picker-confirm-color: var(--x-color-primary-text);--x-date-picker-today-color: var(--x-color-primary-text)}.x-date-picker{width:220px}.x-date-picker-range{width:270px}.x-date-picker-datetime{width:390px}.x-date-picker--popup{line-height:var(--x-line-height-base)}.x-date-picker--panel{width:var(--x-date-picker-panel-width);overflow:hidden;color:var(--x-date-picker-cell-color);font-size:var(--x-date-picker-font-size);background:var(--x-date-picker-panel-bg);border:1px solid var(--x-date-picker-panel-border);border-radius:var(--x-date-picker-panel-radius);box-shadow:var(--x-date-picker-panel-shadow)}.x-date-picker-mode-week{width:var(--x-date-picker-week-panel-width)}.x-date-picker--popup-inner{overflow:hidden;background:var(--x-date-picker-panel-bg);border:1px solid var(--x-date-picker-panel-border);border-radius:var(--x-date-picker-panel-radius);box-shadow:var(--x-date-picker-panel-shadow)}.x-date-picker--panels{display:flex;gap:0}.x-date-picker--datetime-body{display:flex;align-items:stretch}.x-date-picker--datetime-body .x-date-picker--panel{border:0;border-radius:0;box-shadow:none}.x-date-picker--time-side{width:180px;border-left:1px solid var(--x-date-picker-footer-border)}.x-date-picker--time-side .x-time-picker--panel{width:100%;border:0;border-radius:0;box-shadow:none}.x-date-picker--time-side .x-time-picker--columns{width:100%}.x-date-picker--time-side .x-time-picker--column{flex:1 1 0;min-width:0;width:auto;height:234px}.x-date-picker--time-title{height:45px;color:var(--x-color-text-1);font-weight:500;line-height:45px;text-align:center;border-bottom:1px solid var(--x-date-picker-footer-border)}.x-date-picker--range-time-panel{display:grid;grid-template-columns:repeat(2, 1fr)}.x-date-picker--range-time-panel .x-time-picker--panel{width:100%;border:0;border-radius:0;box-shadow:none}.x-date-picker--range-time-panel .x-time-picker--columns{width:100%}.x-date-picker--range-time-panel .x-time-picker--column{flex:1 1 0;min-width:0;width:auto;height:196px}.x-date-picker--range-time-column{min-width:0}.x-date-picker--range-time-column+.x-date-picker--range-time-column{border-left:1px solid var(--x-date-picker-footer-border)}.x-date-picker--range-time-column.x-date-picker-is-active{background:var(--x-color-fill-1)}.x-date-picker--range-time-column.x-date-picker-is-active .x-date-picker--time-title{color:var(--x-color-text-1)}.x-date-picker--range-datetime-footer{display:grid;grid-template-columns:1.15fr 1fr 1.15fr 1fr;border-top:1px solid var(--x-date-picker-footer-border)}.x-date-picker--datetime-footer{display:flex;align-items:center;justify-content:space-between;min-height:36px;padding:4px 8px;border-top:1px solid var(--x-date-picker-footer-border)}.x-date-picker--range-datetime-item{display:flex;gap:8px;align-items:center;justify-content:center;min-width:0;height:40px;padding:0 12px;color:var(--x-color-text-2);font:inherit;font-size:var(--x-font-size-body-1);line-height:1;text-align:center;background:var(--x-color-transparent);border:none;cursor:pointer}.x-date-picker--range-datetime-item+.x-date-picker--range-datetime-item{border-left:1px solid var(--x-date-picker-footer-border)}.x-date-picker--range-datetime-item span,.x-date-picker--range-datetime-item strong{min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-date-picker--range-datetime-item span{font-weight:400}.x-date-picker--range-datetime-item strong{color:var(--x-color-text-1);font-weight:400}.x-date-picker--range-datetime-item:hover,.x-date-picker--range-datetime-item.x-date-picker-is-active{background:var(--x-color-fill-1)}.x-date-picker-popup-range{width:var(--x-date-picker-range-width)}.x-date-picker-popup-range .x-date-picker--panel{border:0;border-radius:0;box-shadow:none}.x-date-picker-popup-datetime{display:block}.x-date-picker--header{display:grid;grid-template-columns:28px 28px 1fr 28px 28px;gap:2px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--x-date-picker-footer-border)}.x-date-picker--header-left{grid-template-columns:28px 28px 1fr}.x-date-picker--header-right{grid-template-columns:1fr 28px 28px}.x-date-picker--header-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;color:var(--x-color-text-2);font:inherit;background:var(--x-color-transparent);border:none;border-radius:3px;cursor:pointer}.x-date-picker--header-btn>.x-icon{width:14px;height:14px;font-size:14px}.x-date-picker--header-btn:hover,.x-date-picker--header-btn:focus-visible{color:var(--x-color-text-1);background:var(--x-color-fill-1);outline:none}.x-date-picker--header-label{min-width:0;height:28px;color:var(--x-color-text-1);font:inherit;font-weight:500;background:var(--x-color-transparent);border:none;border-radius:3px;cursor:pointer;text-align:center}.x-date-picker--header-label:hover,.x-date-picker--header-label:focus-visible{background:var(--x-color-fill-1);outline:none}.x-date-picker--weekdays{display:grid;grid-template-columns:repeat(7, 1fr);padding:8px 12px 0;color:var(--x-color-text-3);font-size:var(--x-font-size-body-1);text-align:center}.x-date-picker--weekdays span{height:24px;line-height:24px}.x-date-picker--weekdays.x-date-picker-is-week-mode{grid-template-columns:54px repeat(7, 1fr)}.x-date-picker--body{display:grid;column-gap:var(--x-date-picker-cell-gap);row-gap:2px;padding:8px 12px 10px}.x-date-picker--row{display:contents}.x-date-picker--body-date{grid-template-columns:repeat(7, 1fr)}.x-date-picker--body-date .x-date-picker--cell:nth-child(7n+1)::before{border-top-left-radius:calc(var(--x-date-picker-cell-inner-size)/2);border-bottom-left-radius:calc(var(--x-date-picker-cell-inner-size)/2)}.x-date-picker--body-date .x-date-picker--cell:nth-child(7n)::before{border-top-right-radius:calc(var(--x-date-picker-cell-inner-size)/2);border-bottom-right-radius:calc(var(--x-date-picker-cell-inner-size)/2)}.x-date-picker--body-week{grid-template-columns:54px repeat(7, 1fr)}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-selected{color:var(--x-color-text-1);background:var(--x-color-transparent)}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-selected::before{background:var(--x-date-picker-cell-bg-range)}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-selected .x-date-picker--cell-inner{color:inherit;background:var(--x-color-transparent)}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-selected:hover::before,.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-selected:focus-visible::before{background:var(--x-date-picker-cell-bg-range-hover)}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-selected:hover .x-date-picker--cell-inner,.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-selected:focus-visible .x-date-picker--cell-inner{background:var(--x-color-transparent)}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-label.x-date-picker-is-week-selected::before{border-top-left-radius:calc(var(--x-date-picker-cell-inner-size)/2);border-bottom-left-radius:calc(var(--x-date-picker-cell-inner-size)/2)}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-end.x-date-picker-is-week-selected::before{border-top-right-radius:calc(var(--x-date-picker-cell-inner-size)/2);border-bottom-right-radius:calc(var(--x-date-picker-cell-inner-size)/2)}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-label.x-date-picker-is-week-selected{color:var(--x-date-picker-cell-color-selected)}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-label.x-date-picker-is-week-selected::before{background:var(--x-date-picker-cell-bg-selected)}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-label.x-date-picker-is-week-selected .x-date-picker--cell-inner{color:inherit}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-selected::after{opacity:0}.x-date-picker--body-month{grid-template-columns:repeat(3, 1fr)}.x-date-picker--body-month .x-date-picker--cell-inner{min-width:48px;height:24px;border-radius:3px}.x-date-picker--body-year{grid-template-columns:repeat(3, 1fr)}.x-date-picker--body-year .x-date-picker--cell-inner{min-width:48px;height:24px;border-radius:3px}.x-date-picker--body-quarter{grid-template-columns:repeat(2, 1fr)}.x-date-picker--body-quarter .x-date-picker--cell-inner{min-width:48px;height:24px;border-radius:3px}.x-date-picker--cell-inner{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:var(--x-date-picker-cell-inner-size);min-width:var(--x-date-picker-cell-inner-size);height:var(--x-date-picker-cell-inner-size);padding:0;border-radius:50%}.x-date-picker--cell-date{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:100%;min-width:0;height:var(--x-date-picker-cell-size)}.x-date-picker--cell-lunar{display:none;max-width:38px;margin-top:3px;overflow:hidden;color:var(--x-color-text-3);font-size:var(--x-font-size-body-1);line-height:12px;opacity:.86;white-space:nowrap;text-overflow:ellipsis}.x-date-picker--cell{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0;height:var(--x-date-picker-cell-size);padding:0;color:var(--x-date-picker-cell-color);font:inherit;background:var(--x-color-transparent);border:none;border-radius:0;cursor:pointer;transition:color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-date-picker--cell::after{position:absolute;bottom:3px;left:50%;z-index:2;width:4px;height:4px;background:var(--x-date-picker-today-color);border-radius:50%;transform:translateX(-50%);opacity:0;content:"";pointer-events:none}.x-date-picker--cell::before{position:absolute;top:50%;right:0;left:0;z-index:0;height:var(--x-date-picker-cell-inner-size);background:var(--x-color-transparent);transform:translateY(-50%);content:"";transition:background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-date-picker--cell:hover,.x-date-picker--cell:focus-visible{color:var(--x-date-picker-cell-color-hover);outline:none}.x-date-picker--cell:hover .x-date-picker--cell-inner,.x-date-picker--cell:focus-visible .x-date-picker--cell-inner{background:var(--x-date-picker-cell-bg-hover)}.x-date-picker--cell.x-date-picker-is-today::after{opacity:1}.x-date-picker--cell.x-date-picker-is-in-range,.x-date-picker--cell.x-date-picker-is-range-start,.x-date-picker--cell.x-date-picker-is-range-end,.x-date-picker--cell.x-date-picker-is-in-preview-range,.x-date-picker--cell.x-date-picker-is-preview-range-start,.x-date-picker--cell.x-date-picker-is-preview-range-end{color:var(--x-color-text-1)}.x-date-picker--cell.x-date-picker-is-in-range::before,.x-date-picker--cell.x-date-picker-is-range-start::before,.x-date-picker--cell.x-date-picker-is-range-end::before,.x-date-picker--cell.x-date-picker-is-in-preview-range::before,.x-date-picker--cell.x-date-picker-is-preview-range-start::before,.x-date-picker--cell.x-date-picker-is-preview-range-end::before{background:var(--x-date-picker-cell-bg-range)}.x-date-picker--cell.x-date-picker-is-range-start::before,.x-date-picker--cell.x-date-picker-is-preview-range-start::before{left:50%}.x-date-picker--cell.x-date-picker-is-range-end::before,.x-date-picker--cell.x-date-picker-is-preview-range-end::before{right:50%}.x-date-picker--cell.x-date-picker-is-range-start.x-date-picker-is-range-end::before{background:var(--x-color-transparent)}.x-date-picker--cell.x-date-picker-is-in-range:hover .x-date-picker--cell-inner,.x-date-picker--cell.x-date-picker-is-in-range:focus-visible .x-date-picker--cell-inner,.x-date-picker--cell.x-date-picker-is-in-preview-range:hover .x-date-picker--cell-inner,.x-date-picker--cell.x-date-picker-is-in-preview-range:focus-visible .x-date-picker--cell-inner{background:var(--x-color-transparent)}.x-date-picker--cell.x-date-picker-is-in-range:hover::before,.x-date-picker--cell.x-date-picker-is-in-range:focus-visible::before,.x-date-picker--cell.x-date-picker-is-range-start:hover::before,.x-date-picker--cell.x-date-picker-is-range-start:focus-visible::before,.x-date-picker--cell.x-date-picker-is-range-end:hover::before,.x-date-picker--cell.x-date-picker-is-range-end:focus-visible::before{background:var(--x-date-picker-cell-bg-range-hover)}.x-date-picker--cell.x-date-picker-is-selected .x-date-picker--cell-inner,.x-date-picker--cell.x-date-picker-is-range-start .x-date-picker--cell-inner,.x-date-picker--cell.x-date-picker-is-range-end .x-date-picker--cell-inner{color:var(--x-date-picker-cell-color-selected);background:var(--x-date-picker-cell-bg-selected)}.x-date-picker--cell.x-date-picker-is-selected .x-date-picker--cell-inner .x-date-picker--cell-lunar,.x-date-picker--cell.x-date-picker-is-range-start .x-date-picker--cell-inner .x-date-picker--cell-lunar,.x-date-picker--cell.x-date-picker-is-range-end .x-date-picker--cell-inner .x-date-picker--cell-lunar{color:inherit}.x-date-picker--cell.x-date-picker-is-selected::after,.x-date-picker--cell.x-date-picker-is-range-start::after,.x-date-picker--cell.x-date-picker-is-range-end::after{opacity:0}.x-date-picker--cell.x-date-picker-is-out-view{color:var(--x-date-picker-cell-color-out-view)}.x-date-picker--cell.x-date-picker-is-out-view .x-date-picker--cell-inner{background:var(--x-color-transparent)}.x-date-picker--cell.x-date-picker-is-out-view.x-date-picker-is-today::after{opacity:0}.x-date-picker--cell.x-date-picker-is-week-label{color:var(--x-color-text-3);cursor:default}.x-date-picker--cell.x-date-picker-is-week-label .x-date-picker--cell-inner{width:auto;min-width:50px;padding:0;background:var(--x-color-transparent);border-radius:0;white-space:nowrap}.x-date-picker--cell.x-date-picker-is-week-start{justify-content:center}.x-date-picker--cell.x-date-picker-is-week-start.x-date-picker-is-selected .x-date-picker--cell-inner,.x-date-picker--cell.x-date-picker-is-week-start.x-date-picker-is-range-start .x-date-picker--cell-inner,.x-date-picker--cell.x-date-picker-is-week-start.x-date-picker-is-range-end .x-date-picker--cell-inner{margin-left:0}.x-date-picker--cell.x-date-picker-is-disabled,.x-date-picker--cell:disabled{color:var(--x-date-picker-cell-color-disabled);background:var(--x-color-transparent);cursor:not-allowed}.x-date-picker--cell.x-date-picker-is-disabled .x-date-picker--cell-inner,.x-date-picker--cell:disabled .x-date-picker--cell-inner{background:var(--x-color-transparent)}.x-date-picker--cell.x-date-picker-is-week-label:disabled{color:var(--x-color-text-3);cursor:default}.x-date-picker--cell.x-date-picker-is-week-label.x-date-picker-is-week-selected:disabled{color:var(--x-date-picker-cell-color-selected)}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--weekdays{padding-top:6px}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--body-date{column-gap:0;row-gap:4px;padding-top:6px;padding-bottom:12px}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell{flex-direction:column;height:50px}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell::after{opacity:0}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell-date{width:100%;height:32px;border-radius:0}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell-inner{width:24px;min-width:24px;height:24px}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell-lunar{display:block}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-out-view .x-date-picker--cell-lunar{color:var(--x-color-text-4);opacity:.72}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell:hover .x-date-picker--cell-inner,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell:focus-visible .x-date-picker--cell-inner{background:var(--x-date-picker-cell-bg-hover)}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-range:hover .x-date-picker--cell-inner,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-range:focus-visible .x-date-picker--cell-inner,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-preview-range:hover .x-date-picker--cell-inner,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-preview-range:focus-visible .x-date-picker--cell-inner,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-start:hover .x-date-picker--cell-inner,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-end:hover .x-date-picker--cell-inner{background:var(--x-color-transparent)}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-range:hover::before,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-range:focus-visible::before,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-start:hover::before,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-start:focus-visible::before,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-end:hover::before,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-end:focus-visible::before{background:var(--x-date-picker-cell-bg-range-hover)}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-selected .x-date-picker--cell-lunar,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-start .x-date-picker--cell-lunar,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-end .x-date-picker--cell-lunar{color:var(--x-color-text-2);opacity:.86}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell::before{top:16px}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-range,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-start,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-end,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-preview-range,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-preview-range-start,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-preview-range-end{background:var(--x-color-transparent)}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-range .x-date-picker--cell-date,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-start .x-date-picker--cell-date,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-end .x-date-picker--cell-date,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-preview-range .x-date-picker--cell-date,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-preview-range-start .x-date-picker--cell-date,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-preview-range-end .x-date-picker--cell-date{background:var(--x-color-transparent)}.x-date-picker--shortcuts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 10px;border-top:1px solid var(--x-date-picker-footer-border)}.x-date-picker--range-footer{display:flex;align-items:center;justify-content:space-between;min-height:40px;padding:6px 10px;border-top:1px solid var(--x-date-picker-footer-border)}.x-date-picker--range-shortcuts{display:flex;flex:1;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}.x-date-picker--shortcut{height:24px;padding:0 8px;color:var(--x-color-text-2);font:inherit;font-size:var(--x-date-picker-action-font-size);background:var(--x-color-fill-1);border:none;border-radius:3px;cursor:pointer}.x-date-picker--shortcut:hover,.x-date-picker--shortcut:focus-visible{color:var(--x-color-primary-text);background:var(--x-color-primary-light-1);outline:none}.x-date-picker--extra{flex:1 0 100%;min-width:0;color:var(--x-color-text-3);font-size:var(--x-font-size-body-1)}.x-date-picker--footer{display:flex;align-items:center;justify-content:space-between;min-height:36px;padding:4px 8px;border-top:1px solid var(--x-date-picker-footer-border)}.x-date-picker--footer-btn{min-width:36px;height:24px;padding:0 8px;color:var(--x-color-text-2);font:inherit;font-size:var(--x-date-picker-action-font-size);background:var(--x-color-transparent);border:none;border-radius:3px;cursor:pointer}.x-date-picker--footer-btn:hover,.x-date-picker--footer-btn:focus-visible{background:var(--x-color-fill-1);outline:none}.x-date-picker--today{color:var(--x-date-picker-today-color)}.x-date-picker--confirm{color:var(--x-date-picker-confirm-color)}
package/dist/style/empty.css CHANGED
@@ -1 +1 @@
1
- .x-empty{box-sizing:border-box;width:100%;padding:var(--x-spacing-5) 0;text-align:center}.x-empty--image{display:flex;align-items:center;justify-content:center;height:var(--x-size-20);margin-bottom:var(--x-spacing-2);color:var(--x-empty-image-color);font-size:var(--x-size-20);line-height:1}.x-empty--image .x-icon{display:inline-flex;font-size:var(--x-size-20)}.x-empty--image img{max-width:100%;max-height:100%;object-fit:contain;vertical-align:middle}.x-empty--description{color:var(--x-color-text-3);font-size:var(--x-font-size-body-3);line-height:1.5715}
1
+ .x-empty{box-sizing:border-box;width:100%;padding:var(--x-spacing-5) 0;text-align:center}.x-empty--image{display:flex;align-items:center;justify-content:center;height:var(--x-size-20);margin-bottom:var(--x-spacing-2);color:var(--x-empty-image-color);font-size:var(--x-size-20);line-height:1}.x-empty--image .x-icon{display:inline-flex;font-size:var(--x-size-20)}.x-empty--image img{max-width:100%;max-height:100%;object-fit:contain;vertical-align:middle}.x-empty--description{color:var(--x-color-text-3);font-size:var(--x-font-size-body-3);line-height:var(--x-line-height-base)}
package/dist/style/form-checkbox.css CHANGED
@@ -1 +1 @@
1
- :root{--x-checkbox-mask-border-width: var(--x-border-2);--x-checkbox-mask-border-style: var(--x-border-solid);--x-checkbox-mask-border-radius: var(--x-border-radius-small);--x-checkbox-mask-bg-color-bg: var(--x-icon-hover-color-bg);--x-checkbox-mask-color-bg: var(--x-color-bg-white);--x-checkbox-mask-color-bg_checked: var(--x-color-primary-6);--x-checkbox-mask-color-bg_disabled: var(--x-color-fill-2);--x-checkbox-mask-color-bg_checked_disabled: var(--x-color-primary-light-3);--x-checkbox-mask-color-border: var(--x-color-fill-3);--x-checkbox-mask-color-border_hover: var(--x-color-fill-4);--x-checkbox-mask-color-border_checked: var(--x-color-transparent);--x-checkbox-mask-color-border_checked_disabled: var(--x-color-transparent);--x-checkbox-mask-color-border_disabled: var(--x-color-fill-3);--x-checkbox-color-text: var(--x-color-text-1);--x-checkbox-color-text_disabled: var(--x-color-text-4);--x-checkbox-group-spacing: var(--x-spacing-7);--x-checkbox-text-mask-spacing: var(--x-spacing-4);--x-checkbox-text-font-size: var(--x-font-size-body-3);--x-checkbox-group-size-line-height_vertical: var(--x-size-8);--x-checkbox-size-check-icon: var(--x-size-2);--x-checkbox-color-check-icon: var(--x-color-white);--x-checkbox-color-check-icon_disabled: var(--x-color-fill-3);--x-checkbox-color-indeterminate-icon-width: 6px;--x-checkbox-color-indeterminate-icon-height: 2px;--x-checkbox-color-indeterminate-icon: var(--x-color-white)}.x-icon-hover.x-checkbox-icon-hover::before{width:24px;height:24px}.x-checkbox{position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding-left:5px;font-size:var(--x-checkbox-text-font-size);line-height:unset;cursor:pointer}.x-checkbox>input[type=checkbox]{position:absolute;top:0;left:0;width:0;height:0;opacity:0}.x-checkbox>input[type=checkbox]:focus-visible+.x-checkbox-icon-hover::before{background-color:var(--x-icon-hover-color-bg)}.x-checkbox:hover .x-checkbox-icon-hover::before{background-color:var(--x-checkbox-mask-bg-color-bg)}.x-checkbox--label{margin-left:var(--x-checkbox-text-mask-spacing);color:var(--x-checkbox-color-text)}.x-checkbox-icon{position:relative;box-sizing:border-box;width:14px;height:14px;background-color:var(--x-checkbox-mask-color-bg);border:var(--x-checkbox-mask-border-width) var(--x-checkbox-mask-border-style) var(--x-checkbox-mask-color-border);border-radius:var(--x-checkbox-mask-border-radius);user-select:none}.x-checkbox-icon::after{position:absolute;top:50%;left:50%;display:block;width:var(--x-checkbox-color-indeterminate-icon-width);height:var(--x-checkbox-color-indeterminate-icon-height);background:var(--x-checkbox-color-indeterminate-icon);border-radius:.5px;transform:translateX(-50%) translateY(-50%) scale(0);content:""}.x-checkbox-icon-check{position:relative;display:block;width:var(--x-checkbox-size-check-icon);height:100%;margin:0 auto;color:var(--x-checkbox-color-check-icon);transform:scale(0);transform-origin:center 75%}.x-checkbox:hover .x-checkbox-icon{border-color:var(--x-checkbox-mask-color-border_hover);transition:border-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),transform var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot)}.x-checkbox-checked:hover .x-checkbox-icon,.x-checkbox-indeterminate:hover .x-checkbox-icon{transition:transform var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot)}.x-checkbox-checked .x-checkbox-icon{background-color:var(--x-checkbox-mask-color-bg_checked);border-color:var(--x-checkbox-mask-color-border_checked)}.x-checkbox-checked .x-checkbox-icon-check{transform:scale(1);transition:transform var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot)}.x-checkbox-indeterminate .x-checkbox-icon{background-color:var(--x-checkbox-mask-color-bg_checked);border-color:var(--x-checkbox-mask-color-border_checked)}.x-checkbox-indeterminate .x-checkbox-icon svg{transform:scale(0)}.x-checkbox-indeterminate .x-checkbox-icon::after{transform:translateX(-50%) translateY(-50%) scale(1);transition:transform var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot)}.x-checkbox.x-checkbox-disabled{cursor:not-allowed}.x-checkbox.x-checkbox-disabled .x-checkbox-icon-hover{cursor:not-allowed}.x-checkbox-checked:hover .x-checkbox-icon,.x-checkbox-indeterminate:hover .x-checkbox-icon{border-color:var(--x-checkbox-mask-color-border_checked)}.x-checkbox-disabled .x-checkbox-icon{background-color:var(--x-checkbox-mask-color-bg_disabled);border-color:var(--x-checkbox-mask-color-border_disabled)}.x-checkbox-disabled.x-checkbox-checked .x-checkbox-icon,.x-checkbox-disabled.x-checkbox-checked:hover .x-checkbox-icon,.x-checkbox-disabled.x-checkbox-indeterminate .x-checkbox-icon,.x-checkbox-disabled.x-checkbox-indeterminate:hover .x-checkbox-icon{background-color:var(--x-checkbox-mask-color-bg_checked_disabled);border-color:var(--x-checkbox-mask-color-border_checked_disabled)}.x-checkbox-disabled:hover .x-checkbox-icon-hover::before,.x-checkbox-checked:hover .x-checkbox-icon-hover::before,.x-checkbox-indeterminate:hover .x-checkbox-icon-hover::before{background-color:var(--x-color-transparent)}.x-checkbox-disabled:hover .x-checkbox-icon{border-color:var(--x-checkbox-mask-color-border_disabled)}.x-checkbox-disabled .x-checkbox--label{color:var(--x-checkbox-color-text_disabled)}.x-checkbox-disabled .x-checkbox-icon-check{color:var(--x-checkbox-color-check-icon_disabled)}.x-checkbox-size-mini{padding-left:4px;font-size:var(--x-font-size-body-1)}.x-checkbox-size-mini .x-checkbox-icon-hover::before{width:20px;height:20px}.x-checkbox-size-mini .x-checkbox-icon{width:12px;height:12px}.x-checkbox-size-mini .x-checkbox-icon-check{width:8px}.x-checkbox-size-small{padding-left:3px;font-size:var(--x-font-size-body-3)}.x-checkbox-size-small .x-checkbox-icon-hover::before{width:20px;height:20px}.x-checkbox-size-small .x-checkbox-icon{width:14px;height:14px}.x-checkbox-size-small .x-checkbox-icon-check{width:10px}.x-checkbox-size-medium{padding-left:5px;font-size:var(--x-font-size-body-3)}.x-checkbox-size-medium .x-checkbox-icon-hover::before{width:24px;height:24px}.x-checkbox-size-medium .x-checkbox-icon{width:14px;height:14px}.x-checkbox-size-medium .x-checkbox-icon-check{width:10px}.x-checkbox-size-large{padding-left:6px;font-size:var(--x-font-size-body-3)}.x-checkbox-size-large .x-checkbox-icon-hover::before{width:28px;height:28px}.x-checkbox-size-large .x-checkbox-icon{width:16px;height:16px}.x-checkbox-size-large .x-checkbox-icon-check{width:12px}.x-checkbox--group{display:inline-block}.x-checkbox--group .x-checkbox{margin-right:var(--x-checkbox-group-spacing)}.x-checkbox--group-direction-vertical .x-checkbox{display:flex;margin-right:0;line-height:var(--x-checkbox-group-size-line-height_vertical)}
1
+ :root{--x-checkbox-mask-border-width: var(--x-border-2);--x-checkbox-mask-border-style: var(--x-border-solid);--x-checkbox-mask-border-radius: var(--x-border-radius-small);--x-checkbox-mask-bg-color-bg: var(--x-icon-hover-color-bg);--x-checkbox-mask-color-bg: var(--x-color-bg-white);--x-checkbox-mask-color-bg_checked: var(--x-color-primary-6);--x-checkbox-mask-color-bg_disabled: var(--x-color-fill-2);--x-checkbox-mask-color-bg_checked_disabled: var(--x-color-primary-light-3);--x-checkbox-mask-color-border: var(--x-color-fill-3);--x-checkbox-mask-color-border_hover: var(--x-color-fill-4);--x-checkbox-mask-color-border_checked: var(--x-color-transparent);--x-checkbox-mask-color-border_checked_disabled: var(--x-color-transparent);--x-checkbox-mask-color-border_disabled: var(--x-color-fill-3);--x-checkbox-color-text: var(--x-color-text-1);--x-checkbox-color-text_disabled: var(--x-color-text-4);--x-checkbox-group-spacing: var(--x-spacing-7);--x-checkbox-text-mask-spacing: var(--x-spacing-4);--x-checkbox-text-font-size: var(--x-font-size-body-3);--x-checkbox-group-size-line-height_vertical: var(--x-size-8);--x-checkbox-size-check-icon: var(--x-size-2);--x-checkbox-color-check-icon: var(--x-color-white);--x-checkbox-color-check-icon_disabled: var(--x-color-fill-3);--x-checkbox-color-indeterminate-icon-width: 6px;--x-checkbox-color-indeterminate-icon-height: 2px;--x-checkbox-color-indeterminate-icon: var(--x-color-white)}.x-icon-hover.x-checkbox-icon-hover::before{width:24px;height:24px}.x-checkbox{position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding-left:5px;font-size:var(--x-checkbox-text-font-size);line-height:var(--x-line-height-base);cursor:pointer}.x-checkbox>input[type=checkbox]{position:absolute;top:0;left:0;width:0;height:0;opacity:0}.x-checkbox>input[type=checkbox]:focus-visible+.x-checkbox-icon-hover::before{background-color:var(--x-icon-hover-color-bg)}.x-checkbox:hover .x-checkbox-icon-hover::before{background-color:var(--x-checkbox-mask-bg-color-bg)}.x-checkbox--label{margin-left:var(--x-checkbox-text-mask-spacing);color:var(--x-checkbox-color-text)}.x-checkbox-icon{position:relative;box-sizing:border-box;width:14px;height:14px;background-color:var(--x-checkbox-mask-color-bg);border:var(--x-checkbox-mask-border-width) var(--x-checkbox-mask-border-style) var(--x-checkbox-mask-color-border);border-radius:var(--x-checkbox-mask-border-radius);user-select:none}.x-checkbox-icon::after{position:absolute;top:50%;left:50%;display:block;width:var(--x-checkbox-color-indeterminate-icon-width);height:var(--x-checkbox-color-indeterminate-icon-height);background:var(--x-checkbox-color-indeterminate-icon);border-radius:.5px;transform:translateX(-50%) translateY(-50%) scale(0);content:""}.x-checkbox-icon-check{position:relative;display:block;width:var(--x-checkbox-size-check-icon);height:100%;margin:0 auto;color:var(--x-checkbox-color-check-icon);transform:scale(0);transform-origin:center 75%}.x-checkbox:hover .x-checkbox-icon{border-color:var(--x-checkbox-mask-color-border_hover);transition:border-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),transform var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot)}.x-checkbox-checked:hover .x-checkbox-icon,.x-checkbox-indeterminate:hover .x-checkbox-icon{transition:transform var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot)}.x-checkbox-checked .x-checkbox-icon{background-color:var(--x-checkbox-mask-color-bg_checked);border-color:var(--x-checkbox-mask-color-border_checked)}.x-checkbox-checked .x-checkbox-icon-check{transform:scale(1);transition:transform var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot)}.x-checkbox-indeterminate .x-checkbox-icon{background-color:var(--x-checkbox-mask-color-bg_checked);border-color:var(--x-checkbox-mask-color-border_checked)}.x-checkbox-indeterminate .x-checkbox-icon svg{transform:scale(0)}.x-checkbox-indeterminate .x-checkbox-icon::after{transform:translateX(-50%) translateY(-50%) scale(1);transition:transform var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot)}.x-checkbox.x-checkbox-disabled{cursor:not-allowed}.x-checkbox.x-checkbox-disabled .x-checkbox-icon-hover{cursor:not-allowed}.x-checkbox-checked:hover .x-checkbox-icon,.x-checkbox-indeterminate:hover .x-checkbox-icon{border-color:var(--x-checkbox-mask-color-border_checked)}.x-checkbox-disabled .x-checkbox-icon{background-color:var(--x-checkbox-mask-color-bg_disabled);border-color:var(--x-checkbox-mask-color-border_disabled)}.x-checkbox-disabled.x-checkbox-checked .x-checkbox-icon,.x-checkbox-disabled.x-checkbox-checked:hover .x-checkbox-icon,.x-checkbox-disabled.x-checkbox-indeterminate .x-checkbox-icon,.x-checkbox-disabled.x-checkbox-indeterminate:hover .x-checkbox-icon{background-color:var(--x-checkbox-mask-color-bg_checked_disabled);border-color:var(--x-checkbox-mask-color-border_checked_disabled)}.x-checkbox-disabled:hover .x-checkbox-icon-hover::before,.x-checkbox-checked:hover .x-checkbox-icon-hover::before,.x-checkbox-indeterminate:hover .x-checkbox-icon-hover::before{background-color:var(--x-color-transparent)}.x-checkbox-disabled:hover .x-checkbox-icon{border-color:var(--x-checkbox-mask-color-border_disabled)}.x-checkbox-disabled .x-checkbox--label{color:var(--x-checkbox-color-text_disabled)}.x-checkbox-disabled .x-checkbox-icon-check{color:var(--x-checkbox-color-check-icon_disabled)}.x-checkbox-size-mini{padding-left:4px;font-size:var(--x-font-size-body-1)}.x-checkbox-size-mini .x-checkbox-icon-hover::before{width:20px;height:20px}.x-checkbox-size-mini .x-checkbox-icon{width:12px;height:12px}.x-checkbox-size-mini .x-checkbox-icon-check{width:8px}.x-checkbox-size-small{padding-left:3px;font-size:var(--x-font-size-body-3)}.x-checkbox-size-small .x-checkbox-icon-hover::before{width:20px;height:20px}.x-checkbox-size-small .x-checkbox-icon{width:14px;height:14px}.x-checkbox-size-small .x-checkbox-icon-check{width:10px}.x-checkbox-size-medium{padding-left:5px;font-size:var(--x-font-size-body-3)}.x-checkbox-size-medium .x-checkbox-icon-hover::before{width:24px;height:24px}.x-checkbox-size-medium .x-checkbox-icon{width:14px;height:14px}.x-checkbox-size-medium .x-checkbox-icon-check{width:10px}.x-checkbox-size-large{padding-left:6px;font-size:var(--x-font-size-body-3)}.x-checkbox-size-large .x-checkbox-icon-hover::before{width:28px;height:28px}.x-checkbox-size-large .x-checkbox-icon{width:16px;height:16px}.x-checkbox-size-large .x-checkbox-icon-check{width:12px}.x-checkbox--group{display:inline-block}.x-checkbox--group .x-checkbox{margin-right:var(--x-checkbox-group-spacing)}.x-checkbox--group-direction-vertical .x-checkbox{display:flex;margin-right:0;line-height:var(--x-checkbox-group-size-line-height_vertical)}
package/dist/style/form-input-tag.css CHANGED
@@ -1 +1 @@
1
- :root{--x-input-color-bg: var(--x-field-color-bg);--x-input-color-bg_hover: var(--x-field-color-bg-hover);--x-input-color-bg_focus: var(--x-field-color-bg-focus);--x-input-color-bg_disabled: var(--x-field-color-bg-disabled);--x-input-color-addon-bg: var(--x-input-color-bg);--x-input-color-addon-border: var(--x-color-border-subtle);--x-input-border-addon-separator-width: var(--x-border-1);--x-input-color-border_focus: var(--x-field-color-border-focus);--x-input-color-shadow_focus: var(--x-field-color-shadow-focus);--x-input-size-shadow_focus: var(--x-field-size-shadow-focus);--x-input-color-addon-border_default: var(--x-color-transparent);--x-input-color-text: var(--x-field-color-text);--x-input-color-placeholder-text: var(--x-field-color-placeholder);--x-input-color-text_disabled: var(--x-field-color-text-disabled);--x-textarea-color-tip-text: var(--x-color-text-tertiary);--x-input-color-bg_error: var(--x-field-color-bg-error);--x-input-color-bg_error_hover: var(--x-field-color-bg-error-hover);--x-input-color-bg_error_focus: var(--x-field-color-bg-error-focus);--x-input-color-border_error_focus: var(--x-field-color-border-error);--x-input-color-shadow_error_focus: var(--x-field-status-error-shadow-color-focus);--x-input-size-shadow_error_focus: var(--x-field-status-error-shadow-size-focus);--x-input-size-default-height: var(--x-size-default);--x-input-size-mini-height: var(--x-size-mini);--x-input-size-small-height: var(--x-size-small);--x-input-size-large-height: var(--x-size-large);--x-input-border-width: var(--x-border-1);--x-input-border-color: var(--x-field-color-border);--x-input-color-border_disabled: var(--x-field-color-border-disabled);--x-input-color-border_hover: var(--x-field-color-border-hover);--x-input-color-border_error: var(--x-field-color-border-error);--x-input-color-border_error_hover: var(--x-color-transparent);--x-input-size-default-font-size: var(--x-font-size-body-3);--x-input-size-small-font-size: var(--x-font-size-body-3);--x-input-size-large-font-size: var(--x-font-size-body-3);--x-input-size-mini-font-size: var(--x-font-size-body-1);--x-input-font-tip-size: var(--x-font-size-body-1);--x-input-size-mini-icon-suffix-size: var(--x-size-3);--x-input-size-small-icon-suffix-size: 14px;--x-input-size-default-icon-suffix-size: 14px;--x-input-size-large-icon-suffix-size: 14px;--x-input-size-mini-icon-addon-size: var(--x-size-3);--x-input-size-small-icon-addon-size: 14px;--x-input-size-default-icon-addon-size: 14px;--x-input-size-large-icon-addon-size: 14px;--x-input-size-icon-clear: var(--x-size-3);--x-input-color-prefix-text: var(--x-field-color-affix);--x-input-color-suffix-text: var(--x-field-color-affix);--x-input-color-tip-text: var(--x-color-text-tertiary);--x-input-color-icon-clear: var(--x-field-color-icon);--x-input-color-icon-clear-bg_hover: var(--x-color-fill-4);--x-search-color-icon: var(--x-field-color-icon);--x-search-size-icon: 14px;--x-input-padding-horizontal: var(--x-spacing-6);--x-input-margin-left-clear-btn: var(--x-spacing-6);--x-input-spacing-clear-icon-right: var(--x-spacing-4);--x-input-padding-word-limit-left: var(--x-spacing-4);--x-textarea-padding-horizontal: var(--x-spacing-6);--x-textarea-padding-vertical: var(--x-spacing-2);--x-textarea-font-size: var(--x-font-size-body-3);--x-textarea-font-tip-size: var(--x-font-size-body-1);--x-textarea-layout-tip-right: var(--x-spacing-5);--x-textarea-layout-tip-bottom: var(--x-spacing-3);--x-textarea-size-min-height: var(--x-size-default);--x-textarea-size-icon-clear: var(--x-font-size-body-1);--x-textarea-layout-top-icon-clear: var(--x-spacing-5);--x-password-color-eye-icon: var(--x-color-text-2);--x-password-size-eye-icon: var(--x-size-3);--x-input-group-border-radius_compact: var(--x-border-radius-small);--x-input-group-border-separator-width: var(--x-border-1);--x-input-group-color-separator-border: var(--x-color-border-subtle);--x-input-size-medium-height: var(--x-input-size-default-height);--x-input-size-medium-font-size: var(--x-input-size-default-font-size);--x-input-size-mini-line-height: 1.667;--x-input-size-small-line-height: var(--x-line-height-base);--x-input-size-medium-line-height: var(--x-line-height-base);--x-input-size-large-line-height: var(--x-line-height-base);--x-input-size-mini-padding-up-down: 1px;--x-input-size-small-padding-up-down: 2px;--x-input-size-medium-padding-up-down: 4px;--x-input-size-large-padding-up-down: 6px;--x-input-feedback-icon-color_success: var(--x-field-status-success-icon);--x-input-feedback-icon-color_error: var(--x-field-status-error-icon);--x-input-feedback-icon-color_warning: var(--x-field-status-warning-icon);--x-input-feedback-icon-color_validating: var(--x-field-status-validating-icon)}.x-tag{display:inline-flex;align-items:center;box-sizing:border-box;height:24px;padding:4px 8px;color:var(--x-tag-color-text-default);font-weight:500;font-size:12px;line-height:14px;vertical-align:middle;border:1px solid var(--x-color-transparent);border-radius:2px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.x-tag .x-icon-hover.x-icon-hover::before{width:14px;height:14px}.x-tag .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-bg-default-hover)}.x-tag-selectable{cursor:pointer;transition:all .3s linear}.x-tag-selectable:hover{background-color:var(--x-tag-color-bg-default-hover);border-color:var(--x-tag-color-border-default-hover)}.x-tag-checked{background-color:var(--x-tag-color-bg-default)}.x-tag-bordered{border-color:var(--x-tag-color-border-default-bordered)}.x-tag-size-small{height:20px;font-size:12px;line-height:18px}.x-tag-size-medium{height:24px;font-size:12px;line-height:22px}.x-tag-size-large{height:28px;font-size:14px;line-height:26px}.x-tag-hide{display:none}.x-tag-loading{cursor:default}.x-tag-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-tag-color-red.x-tag-checked{color:var(--x-tag-color-red-text);background-color:var(--x-tag-color-red-bg);border:1px solid var(--x-tag-color-red-border)}.x-tag-color-red.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-red-icon-bg_hover)}.x-tag-color-red.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-red-text)}.x-tag-color-red.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-red-border-hover);border-color:var(--x-tag-color-red-text)}.x-tag-color-red.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-red-text)}.x-tag-color-orangered.x-tag-checked{color:var(--x-tag-color-orangered-text);background-color:var(--x-tag-color-orangered-bg);border:1px solid var(--x-tag-color-orangered-border)}.x-tag-color-orangered.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-orangered-icon-bg_hover)}.x-tag-color-orangered.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-orangered-text)}.x-tag-color-orangered.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-orangered-border-hover);border-color:var(--x-tag-color-orangered-text)}.x-tag-color-orangered.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-orangered-text)}.x-tag-color-orange.x-tag-checked{color:var(--x-tag-color-orange-text);background-color:var(--x-tag-color-orange-bg);border:1px solid var(--x-tag-color-orange-border)}.x-tag-color-orange.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-orange-icon-bg_hover)}.x-tag-color-orange.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-orange-text)}.x-tag-color-orange.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-orange-border-hover);border-color:var(--x-tag-color-orange-text)}.x-tag-color-orange.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-orange-text)}.x-tag-color-gold.x-tag-checked{color:var(--x-tag-color-gold-text);background-color:var(--x-tag-color-gold-bg);border:1px solid var(--x-tag-color-gold-border)}.x-tag-color-gold.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-gold-icon-bg_hover)}.x-tag-color-gold.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-gold-text)}.x-tag-color-gold.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-gold-border-hover);border-color:var(--x-tag-color-gold-text)}.x-tag-color-gold.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-gold-text)}.x-tag-color-lime.x-tag-checked{color:var(--x-tag-color-lime-text);background-color:var(--x-tag-color-lime-bg);border:1px solid var(--x-tag-color-lime-border)}.x-tag-color-lime.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-lime-icon-bg_hover)}.x-tag-color-lime.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-lime-text)}.x-tag-color-lime.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-lime-border-hover);border-color:var(--x-tag-color-lime-text)}.x-tag-color-lime.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-lime-text)}.x-tag-color-green.x-tag-checked{color:var(--x-tag-color-green-text);background-color:var(--x-tag-color-green-bg);border:1px solid var(--x-tag-color-green-border)}.x-tag-color-green.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-green-icon-bg_hover)}.x-tag-color-green.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-green-text)}.x-tag-color-green.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-green-border-hover);border-color:var(--x-tag-color-green-text)}.x-tag-color-green.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-green-text)}.x-tag-color-cyan.x-tag-checked{color:var(--x-tag-color-cyan-text);background-color:var(--x-tag-color-cyan-bg);border:1px solid var(--x-tag-color-cyan-border)}.x-tag-color-cyan.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-cyan-icon-bg_hover)}.x-tag-color-cyan.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-cyan-text)}.x-tag-color-cyan.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-cyan-border-hover);border-color:var(--x-tag-color-cyan-text)}.x-tag-color-cyan.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-cyan-text)}.x-tag-color-better-blue.x-tag-checked{color:var(--x-tag-color-better-blue-text);background-color:var(--x-tag-color-better-blue-bg);border:1px solid var(--x-tag-color-better-blue-border)}.x-tag-color-better-blue.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-better-blue-icon-bg_hover)}.x-tag-color-better-blue.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-better-blue-text)}.x-tag-color-better-blue.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-better-blue-border-hover);border-color:var(--x-tag-color-better-blue-text)}.x-tag-color-better-blue.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-better-blue-text)}.x-tag-color-blue.x-tag-checked{color:var(--x-tag-color-blue-text);background-color:var(--x-tag-color-blue-bg);border:1px solid var(--x-tag-color-blue-border)}.x-tag-color-blue.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-blue-icon-bg_hover)}.x-tag-color-blue.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-blue-text)}.x-tag-color-blue.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-blue-border-hover);border-color:var(--x-tag-color-blue-text)}.x-tag-color-blue.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-blue-text)}.x-tag-color-purple.x-tag-checked{color:var(--x-tag-color-purple-text);background-color:var(--x-tag-color-purple-bg);border:1px solid var(--x-tag-color-purple-border)}.x-tag-color-purple.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-purple-icon-bg_hover)}.x-tag-color-purple.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-purple-text)}.x-tag-color-purple.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-purple-border-hover);border-color:var(--x-tag-color-purple-text)}.x-tag-color-purple.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-purple-text)}.x-tag-color-pink-purple.x-tag-checked{color:var(--x-tag-color-pink-purple-text);background-color:var(--x-tag-color-pink-purple-bg);border:1px solid var(--x-tag-color-pink-purple-border)}.x-tag-color-pink-purple.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-pink-purple-icon-bg_hover)}.x-tag-color-pink-purple.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-pink-purple-text)}.x-tag-color-pink-purple.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-pink-purple-border-hover);border-color:var(--x-tag-color-pink-purple-text)}.x-tag-color-pink-purple.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-pink-purple-text)}.x-tag-color-magenta.x-tag-checked{color:var(--x-tag-color-magenta-text);background-color:var(--x-tag-color-magenta-bg);border:1px solid var(--x-tag-color-magenta-border)}.x-tag-color-magenta.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-magenta-icon-bg_hover)}.x-tag-color-magenta.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-magenta-text)}.x-tag-color-magenta.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-magenta-border-hover);border-color:var(--x-tag-color-magenta-text)}.x-tag-color-magenta.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-magenta-text)}.x-tag-color-gray.x-tag-checked{color:var(--x-tag-color-gray-text);background-color:var(--x-tag-color-gray-bg);border:1px solid var(--x-tag-color-gray-border)}.x-tag-color-gray.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-gray-icon-bg_hover)}.x-tag-color-gray.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-gray-text)}.x-tag-color-gray.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-gray-border-hover);border-color:var(--x-tag-color-gray-text)}.x-tag-color-gray.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-gray-text)}.x-tag-custom-color.x-tag-checked{color:var(--x-tag-custom-color-text)}.x-tag-custom-color.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-custom-color-icon-bg_hover)}.x-tag-custom-color.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-custom-color-text)}.x-tag--close-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:14px;height:14px;margin-left:4px;font-size:12px;line-height:1;border-radius:50%;cursor:pointer;transition:all .2s ease-in-out}.x-tag--close-icon>.x-icon,.x-tag--close-icon>svg{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;line-height:1}.x-tag--close-icon>svg{position:relative}.x-tag--icon{margin-right:6px;color:currentcolor}.x-tag--loading-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:14px;height:14px;margin-left:4px;font-size:12px;line-height:1}.x-tag--loading-icon>.x-icon,.x-tag--loading-icon>svg{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;line-height:1}:root{--x-input-tag-size-mini-height: var(--x-size-mini);--x-input-tag-size-small-height: var(--x-size-small);--x-input-tag-size-default-height: var(--x-size-default);--x-input-tag-size-large-height: var(--x-size-large);--x-input-tag-size-mini-tag-height: var(--x-size-5);--x-input-tag-size-small-tag-height: var(--x-size-5);--x-input-tag-size-default-tag-height: var(--x-size-6);--x-input-tag-size-large-tag-height: var(--x-size-7);--x-input-tag-size-mini-tag-height-2px: 18px;--x-input-tag-size-small-tag-height-2px: 18px;--x-input-tag-size-default-tag-height-2px: 22px;--x-input-tag-size-large-tag-height-2px: 26px;--x-input-tag-size-mini-padding-top-bottom: 0;--x-input-tag-size-small-padding-top-bottom: 2px;--x-input-tag-size-default-padding-top-bottom: 2px;--x-input-tag-size-large-padding-top-bottom: 2px;--x-input-tag-size-mini-font-size: var(--x-font-size-body-1);--x-input-tag-size-small-font-size: var(--x-font-size-body-3);--x-input-tag-size-default-font-size: var(--x-font-size-body-3);--x-input-tag-size-large-font-size: var(--x-font-size-body-3);--x-input-tag-color-text_default: var(--x-field-color-text);--x-input-tag-color-text_error: var(--x-field-color-text);--x-input-tag-color-text_disabled: var(--x-field-color-text-disabled);--x-input-tag-color-placeholder: var(--x-field-color-placeholder);--x-input-tag-color-icon-clear: var(--x-field-color-icon);--x-input-tag-color-icon-clear-bg_hover: var(--x-color-fill-4);--x-input-tag-color-border_default: var(--x-field-color-border);--x-input-tag-color-border_default_hover: var(--x-field-color-border-hover);--x-input-tag-color-border_default_focus: var(--x-field-color-border-focus);--x-input-tag-color-border_error: var(--x-color-transparent);--x-input-tag-color-border_error_hover: var(--x-color-transparent);--x-input-tag-color-border_error_focus: var(--x-field-color-border-error);--x-input-tag-color-border_disabled: var(--x-field-color-border-disabled);--x-input-tag-color-border_disabled_hover: var(--x-input-tag-color-border_disabled);--x-input-tag-color-border_disabled_focus: var(--x-input-tag-color-border_disabled);--x-input-tag-color-bg_default: var(--x-field-color-bg);--x-input-tag-color-bg_default_hover: var(--x-field-color-bg-hover);--x-input-tag-color-bg_default_focus: var(--x-field-color-bg-focus);--x-input-tag-color-bg_error: var(--x-field-color-bg-error);--x-input-tag-color-bg_error_hover: var(--x-field-color-bg-error-hover);--x-input-tag-color-bg_error_focus: var(--x-field-color-bg-error-focus);--x-input-tag-color-bg_disabled: var(--x-field-color-bg-disabled);--x-input-tag-color-bg_disabled_hover: var(--x-input-tag-color-bg_disabled);--x-input-tag-color-shadow_default_focus: var(--x-field-color-shadow-focus);--x-input-tag-color-shadow_error_focus: var(--x-field-status-error-shadow-color-focus);--x-input-tag-size-shadow_error_focus: var(--x-field-status-error-shadow-size-focus);--x-input-tag-size-shadow_default_focus: var(--x-field-size-shadow-focus);--x-input-tag-tag-margin-right: var(--x-spacing-2);--x-input-tag-tag-margin-vertical: var(--x-spacing-1);--x-input-tag-tag-margin-vertical-division-2: 1px;--x-input-tag-padding-horizontal: var(--x-spacing-2);--x-input-tag-border-radius: var(--x-border-radius-small);--x-input-tag-border-width: var(--x-border-1);--x-input-tag-size-icon-clear: var(--x-size-3);--x-input-tag-size-icon-clear_hover: var(--x-size-5);--x-input-tag-tag-font-size: var(--x-font-size-body-1);--x-input-tag-tag-color-bg: var(--x-color-bg-2);--x-input-tag-tag-color-bg_focus: var(--x-color-fill-2);--x-input-tag-tag-color-bg_disabled: var(--x-color-fill-2);--x-input-tag-tag-color-border: var(--x-color-fill-3);--x-input-tag-tag-color-border_disabled: var(--x-color-fill-3);--x-input-tag-tag-color-border_focus: var(--x-color-fill-2);--x-input-tag-tag-remove-icon-color-bg: var(--x-color-fill-2);--x-input-tag-tag-remove-icon-color-bg_focus: var(--x-color-fill-3);--x-input-tag-size-medium-height: var(--x-input-tag-size-default-height);--x-input-tag-size-medium-tag-height: var(--x-input-tag-size-default-tag-height);--x-input-tag-size-medium-tag-height-2px: var(--x-input-tag-size-default-tag-height-2px);--x-input-tag-size-medium-padding-top-bottom: var( --x-input-tag-size-default-padding-top-bottom );--x-input-tag-size-medium-font-size: var(--x-input-tag-size-default-font-size)}.x-input-tag{display:inline-flex;align-items:center;box-sizing:border-box;width:100%;min-width:0;padding-right:var(--x-input-padding-horizontal);padding-left:var(--x-input-padding-horizontal);color:var(--x-input-color-text);font-size:var(--x-input-size-default-font-size);background-color:var(--x-input-color-bg);border:var(--x-input-border-width) solid var(--x-input-border-color);border-radius:var(--x-input-border-radius);cursor:text;transition:color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),border-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-input-tag:hover{background-color:var(--x-input-color-bg_hover);border-color:var(--x-input-color-border_hover)}.x-input-tag:focus-within,.x-input-tag.x-input-tag-focus{z-index:1;background-color:var(--x-input-color-bg_focus);border-color:var(--x-input-color-border_focus);box-shadow:0 0 0 var(--x-input-size-shadow_focus) var(--x-input-color-shadow_focus)}.x-input-tag.x-input-tag-disabled{color:var(--x-input-color-text_disabled);background-color:var(--x-input-color-bg_disabled);border-color:var(--x-input-color-border_disabled);cursor:not-allowed}.x-input-tag.x-input-tag-disabled:hover{color:var(--x-input-color-text_disabled);background-color:var(--x-input-color-bg_disabled);border-color:var(--x-input-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--prefix,.x-input-tag.x-input-tag-disabled .x-input-tag--suffix{color:inherit}.x-input-tag.x-input-tag-error{background-color:var(--x-input-color-bg_error);border-color:var(--x-input-color-border_error)}.x-input-tag.x-input-tag-error:hover{background-color:var(--x-input-color-bg_error_hover);border-color:var(--x-input-color-border_error_hover)}.x-input-tag.x-input-tag-error:focus-within,.x-input-tag.x-input-tag-error.x-input-tag-focus{z-index:1;background-color:var(--x-input-color-bg_error_focus);border-color:var(--x-input-color-border_error_focus);box-shadow:0 0 0 var(--x-input-size-shadow_error_focus) var(--x-input-color-shadow_error_focus)}.x-input-tag .x-input-tag--prefix,.x-input-tag .x-input-tag--suffix{display:inline-flex;flex-shrink:0;align-items:center;white-space:nowrap;user-select:none}.x-input-tag .x-input-tag--prefix>.x-icon,.x-input-tag .x-input-tag--suffix>.x-icon{width:var(--x-input-size-default-icon-suffix-size);height:var(--x-input-size-default-icon-suffix-size);font-size:var(--x-input-size-default-icon-suffix-size)}.x-input-tag .x-input-tag--prefix>.x-icon>svg,.x-input-tag .x-input-tag--suffix>.x-icon>svg{width:1em;height:1em}.x-input-tag .x-input-tag--prefix{padding-right:var(--x-input-padding-horizontal);color:var(--x-input-color-prefix-text)}.x-input-tag .x-input-tag--suffix{padding-left:var(--x-input-padding-horizontal);color:var(--x-input-color-suffix-text)}.x-input-tag .x-input-tag--suffix .x-feedback-icon{display:inline-flex}.x-input-tag .x-input-tag--suffix .x-feedback-icon-status-validating{color:var(--x-input-feedback-icon-color_validating)}.x-input-tag .x-input-tag--suffix .x-feedback-icon-status-success{color:var(--x-input-feedback-icon-color_success)}.x-input-tag .x-input-tag--suffix .x-feedback-icon-status-warning{color:var(--x-input-feedback-icon-color_warning)}.x-input-tag .x-input-tag--suffix .x-feedback-icon-status-error{color:var(--x-input-feedback-icon-color_error)}.x-input-tag .x-input-tag--clear-btn{flex-shrink:0;align-self:center;margin-left:var(--x-input-margin-left-clear-btn);color:var(--x-input-color-icon-clear);font-size:var(--x-input-size-icon-clear);visibility:hidden;cursor:pointer;opacity:0;transition:opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear),visibility var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-input-tag .x-input-tag--clear-btn>svg{position:relative;transition:color var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-input-tag:hover .x-input-tag--clear-btn,.x-input-tag:focus-within .x-input-tag--clear-btn{visibility:visible;opacity:1}.x-input-tag:not(.x-input-tag-focus) .x-input-tag-icon-hover:hover::before{background-color:var(--x-input-color-icon-clear-bg_hover)}.x-input-tag.x-input-tag-has-tag{padding-right:var(--x-input-tag-padding-horizontal);padding-left:var(--x-input-tag-padding-horizontal)}.x-input-tag.x-input-tag-has-prefix{padding-left:var(--x-input-padding-horizontal)}.x-input-tag.x-input-tag-has-suffix{padding-right:var(--x-input-padding-horizontal)}.x-input-tag .x-input-tag--inner{flex:1;overflow:hidden;line-height:0}.x-input-tag .x-input-tag--inner.x-input-tag-nowrap{display:flex;flex-wrap:wrap}.x-input-tag .x-input-tag--inner .x-input-tag--tag{display:inline-flex;align-items:center;padding-top:0;padding-bottom:0;margin-right:var(--x-input-tag-tag-margin-right);color:var(--x-input-tag-color-text_default);font-size:var(--x-input-tag-tag-font-size);white-space:pre-wrap;word-break:break-word;background-color:var(--x-input-tag-tag-color-bg);border-color:var(--x-input-tag-tag-color-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-red{color:var(--x-tag-color-red-text);background-color:var(--x-tag-color-red-bg);border-color:var(--x-tag-color-red-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-red.x-tag-bordered{border-color:var(--x-tag-color-red-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-orangered{color:var(--x-tag-color-orangered-text);background-color:var(--x-tag-color-orangered-bg);border-color:var(--x-tag-color-orangered-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-orangered.x-tag-bordered{border-color:var(--x-tag-color-orangered-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-orange{color:var(--x-tag-color-orange-text);background-color:var(--x-tag-color-orange-bg);border-color:var(--x-tag-color-orange-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-orange.x-tag-bordered{border-color:var(--x-tag-color-orange-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-gold{color:var(--x-tag-color-gold-text);background-color:var(--x-tag-color-gold-bg);border-color:var(--x-tag-color-gold-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-gold.x-tag-bordered{border-color:var(--x-tag-color-gold-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-lime{color:var(--x-tag-color-lime-text);background-color:var(--x-tag-color-lime-bg);border-color:var(--x-tag-color-lime-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-lime.x-tag-bordered{border-color:var(--x-tag-color-lime-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-green{color:var(--x-tag-color-green-text);background-color:var(--x-tag-color-green-bg);border-color:var(--x-tag-color-green-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-green.x-tag-bordered{border-color:var(--x-tag-color-green-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-cyan{color:var(--x-tag-color-cyan-text);background-color:var(--x-tag-color-cyan-bg);border-color:var(--x-tag-color-cyan-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-cyan.x-tag-bordered{border-color:var(--x-tag-color-cyan-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-better-blue{color:var(--x-tag-color-better-blue-text);background-color:var(--x-tag-color-better-blue-bg);border-color:var(--x-tag-color-better-blue-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-better-blue.x-tag-bordered{border-color:var(--x-tag-color-better-blue-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-blue{color:var(--x-tag-color-blue-text);background-color:var(--x-tag-color-blue-bg);border-color:var(--x-tag-color-blue-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-blue.x-tag-bordered{border-color:var(--x-tag-color-blue-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-purple{color:var(--x-tag-color-purple-text);background-color:var(--x-tag-color-purple-bg);border-color:var(--x-tag-color-purple-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-purple.x-tag-bordered{border-color:var(--x-tag-color-purple-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-pink-purple{color:var(--x-tag-color-pink-purple-text);background-color:var(--x-tag-color-pink-purple-bg);border-color:var(--x-tag-color-pink-purple-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-pink-purple.x-tag-bordered{border-color:var(--x-tag-color-pink-purple-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-magenta{color:var(--x-tag-color-magenta-text);background-color:var(--x-tag-color-magenta-bg);border-color:var(--x-tag-color-magenta-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-magenta.x-tag-bordered{border-color:var(--x-tag-color-magenta-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-gray{color:var(--x-tag-color-gray-text);background-color:var(--x-tag-color-gray-bg);border-color:var(--x-tag-color-gray-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-gray.x-tag-bordered{border-color:var(--x-tag-color-gray-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag .x-icon-hover:hover::before{background-color:var(--x-input-tag-tag-remove-icon-color-bg)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-custom-color{color:var(--x-tag-custom-color-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-custom-color .x-icon-hover.x-tag-icon-hover:hover::before{background-color:var(--x-tag-custom-color-icon-bg_hover)}.x-input-tag .x-input-tag--inner.x-input-tag-nowrap .x-input-tag--tag{white-space:nowrap;word-break:normal}.x-input-tag .x-input-tag--inner .x-input-tag--input{width:100%;min-width:0;padding-right:0;padding-left:0;color:inherit;line-height:var(--x-line-height-base);background:none;border:none;border-radius:0;outline:none;cursor:inherit;-webkit-appearance:none;-webkit-tap-highlight-color:var(--x-color-transparent)}.x-input-tag .x-input-tag--inner .x-input-tag--input::placeholder{color:var(--x-input-color-placeholder-text)}.x-input-tag .x-input-tag--inner .x-input-tag--input[disabled]::placeholder{color:var(--x-input-color-text_disabled)}.x-input-tag .x-input-tag--inner .x-input-tag--input[disabled]{-webkit-text-fill-color:var(--x-input-color-text_disabled)}.x-input-tag .x-input-tag--inner .x-input-tag--input{box-sizing:border-box}.x-input-tag .x-input-tag--mirror{position:absolute;top:0;left:0;white-space:pre;visibility:hidden;pointer-events:none}.x-input-tag.x-input-tag-focus .x-input-tag--tag{background-color:var(--x-input-tag-tag-color-bg_focus);border-color:var(--x-input-tag-tag-color-border_focus)}.x-input-tag.x-input-tag-focus .x-input-tag--tag .x-icon-hover:hover::before{background-color:var(--x-input-tag-tag-remove-icon-color-bg_focus)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-red{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-orangered{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-orange{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-gold{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-lime{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-green{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-cyan{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-better-blue{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-blue{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-purple{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-pink-purple{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-magenta{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-gray{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-readonly,.x-input-tag.x-input-tag-disabled-input{cursor:default}.x-input-tag.x-input-tag-size-mini{font-size:var(--x-input-tag-size-mini-font-size)}.x-input-tag.x-input-tag-size-mini .x-input-tag--inner{padding-top:var(--x-input-tag-size-mini-padding-top-bottom);padding-bottom:var(--x-input-tag-size-mini-padding-top-bottom)}.x-input-tag.x-input-tag-size-mini .x-input-tag--tag,.x-input-tag.x-input-tag-size-mini .x-input-tag--input{margin-top:var(--x-input-tag-tag-margin-vertical-division-2);margin-bottom:var(--x-input-tag-tag-margin-vertical-division-2);line-height:var(--x-input-tag-size-mini-tag-height-2px);vertical-align:middle}.x-input-tag.x-input-tag-size-mini .x-input-tag--tag{height:auto;min-height:var(--x-input-tag-size-mini-tag-height)}.x-input-tag.x-input-tag-size-mini .x-input-tag--input{height:var(--x-input-tag-size-mini-tag-height)}.x-input-tag.x-input-tag-size-medium{font-size:var(--x-input-tag-size-medium-font-size)}.x-input-tag.x-input-tag-size-medium .x-input-tag--inner{padding-top:var(--x-input-tag-size-medium-padding-top-bottom);padding-bottom:var(--x-input-tag-size-medium-padding-top-bottom)}.x-input-tag.x-input-tag-size-medium .x-input-tag--tag,.x-input-tag.x-input-tag-size-medium .x-input-tag--input{margin-top:var(--x-input-tag-tag-margin-vertical-division-2);margin-bottom:var(--x-input-tag-tag-margin-vertical-division-2);line-height:var(--x-input-tag-size-medium-tag-height-2px);vertical-align:middle}.x-input-tag.x-input-tag-size-medium .x-input-tag--tag{height:auto;min-height:var(--x-input-tag-size-medium-tag-height)}.x-input-tag.x-input-tag-size-medium .x-input-tag--input{height:var(--x-input-tag-size-medium-tag-height)}.x-input-tag.x-input-tag-size-small{font-size:var(--x-input-tag-size-small-font-size)}.x-input-tag.x-input-tag-size-small .x-input-tag--inner{padding-top:var(--x-input-tag-size-small-padding-top-bottom);padding-bottom:var(--x-input-tag-size-small-padding-top-bottom)}.x-input-tag.x-input-tag-size-small .x-input-tag--tag,.x-input-tag.x-input-tag-size-small .x-input-tag--input{margin-top:var(--x-input-tag-tag-margin-vertical-division-2);margin-bottom:var(--x-input-tag-tag-margin-vertical-division-2);line-height:var(--x-input-tag-size-small-tag-height-2px);vertical-align:middle}.x-input-tag.x-input-tag-size-small .x-input-tag--tag{height:auto;min-height:var(--x-input-tag-size-small-tag-height)}.x-input-tag.x-input-tag-size-small .x-input-tag--input{height:var(--x-input-tag-size-small-tag-height)}.x-input-tag.x-input-tag-size-large{font-size:var(--x-input-tag-size-large-font-size)}.x-input-tag.x-input-tag-size-large .x-input-tag--inner{padding-top:var(--x-input-tag-size-large-padding-top-bottom);padding-bottom:var(--x-input-tag-size-large-padding-top-bottom)}.x-input-tag.x-input-tag-size-large .x-input-tag--tag,.x-input-tag.x-input-tag-size-large .x-input-tag--input{margin-top:var(--x-input-tag-tag-margin-vertical-division-2);margin-bottom:var(--x-input-tag-tag-margin-vertical-division-2);line-height:var(--x-input-tag-size-large-tag-height-2px);vertical-align:middle}.x-input-tag.x-input-tag-size-large .x-input-tag--tag{height:auto;min-height:var(--x-input-tag-size-large-tag-height)}.x-input-tag.x-input-tag-size-large .x-input-tag--input{height:var(--x-input-tag-size-large-tag-height)}.x-input-tag:focus-within .x-input-tag--clear-btn{visibility:visible;opacity:1}.input-tag-zoom-enter-from{transform:scale(0.5, 0.5);opacity:0}.input-tag-zoom-enter-to{transform:scale(1, 1);opacity:1}.input-tag-zoom-enter-active{transition:all var(--x-transition-duration-3) var(--x-transition-timing-function-standard)}.input-tag-zoom-leave-from{transform:scale(1, 1);opacity:1}.input-tag-zoom-leave-to{transform:scale(0.5, 0.5);opacity:0}.input-tag-zoom-leave-active{position:absolute;transition:all var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot)}.input-tag-zoom-move{transition:all var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot)}
1
+ :root{--x-input-color-bg: var(--x-field-color-bg);--x-input-color-bg_hover: var(--x-field-color-bg-hover);--x-input-color-bg_focus: var(--x-field-color-bg-focus);--x-input-color-bg_disabled: var(--x-field-color-bg-disabled);--x-input-color-addon-bg: var(--x-input-color-bg);--x-input-color-addon-border: var(--x-color-border-subtle);--x-input-border-addon-separator-width: var(--x-border-1);--x-input-color-border_focus: var(--x-field-color-border-focus);--x-input-color-shadow_focus: var(--x-field-color-shadow-focus);--x-input-size-shadow_focus: var(--x-field-size-shadow-focus);--x-input-color-addon-border_default: var(--x-color-transparent);--x-input-color-text: var(--x-field-color-text);--x-input-color-placeholder-text: var(--x-field-color-placeholder);--x-input-color-text_disabled: var(--x-field-color-text-disabled);--x-textarea-color-tip-text: var(--x-color-text-tertiary);--x-input-color-bg_error: var(--x-field-color-bg-error);--x-input-color-bg_error_hover: var(--x-field-color-bg-error-hover);--x-input-color-bg_error_focus: var(--x-field-color-bg-error-focus);--x-input-color-border_error_focus: var(--x-field-color-border-error);--x-input-color-shadow_error_focus: var(--x-field-status-error-shadow-color-focus);--x-input-size-shadow_error_focus: var(--x-field-status-error-shadow-size-focus);--x-input-size-default-height: var(--x-size-default);--x-input-size-mini-height: var(--x-size-mini);--x-input-size-small-height: var(--x-size-small);--x-input-size-large-height: var(--x-size-large);--x-input-border-width: var(--x-border-1);--x-input-border-color: var(--x-field-color-border);--x-input-color-border_disabled: var(--x-field-color-border-disabled);--x-input-color-border_hover: var(--x-field-color-border-hover);--x-input-color-border_error: var(--x-field-color-border-error);--x-input-color-border_error_hover: var(--x-color-transparent);--x-input-size-default-font-size: var(--x-font-size-body-3);--x-input-size-small-font-size: var(--x-font-size-body-3);--x-input-size-large-font-size: var(--x-font-size-body-3);--x-input-size-mini-font-size: var(--x-font-size-body-1);--x-input-font-tip-size: var(--x-font-size-body-1);--x-input-size-mini-icon-suffix-size: var(--x-size-3);--x-input-size-small-icon-suffix-size: 14px;--x-input-size-default-icon-suffix-size: 14px;--x-input-size-large-icon-suffix-size: 14px;--x-input-size-mini-icon-addon-size: var(--x-size-3);--x-input-size-small-icon-addon-size: 14px;--x-input-size-default-icon-addon-size: 14px;--x-input-size-large-icon-addon-size: 14px;--x-input-size-icon-clear: var(--x-size-3);--x-input-color-prefix-text: var(--x-field-color-affix);--x-input-color-suffix-text: var(--x-field-color-affix);--x-input-color-tip-text: var(--x-color-text-tertiary);--x-input-color-icon-clear: var(--x-field-color-icon);--x-input-color-icon-clear-bg_hover: var(--x-color-fill-4);--x-search-color-icon: var(--x-field-color-icon);--x-search-size-icon: 14px;--x-input-padding-horizontal: var(--x-spacing-6);--x-input-margin-left-clear-btn: var(--x-spacing-6);--x-input-spacing-clear-icon-right: var(--x-spacing-4);--x-input-padding-word-limit-left: var(--x-spacing-4);--x-textarea-padding-horizontal: var(--x-spacing-6);--x-textarea-padding-vertical: var(--x-spacing-2);--x-textarea-font-size: var(--x-font-size-body-3);--x-textarea-font-tip-size: var(--x-font-size-body-1);--x-textarea-layout-tip-right: var(--x-spacing-5);--x-textarea-layout-tip-bottom: var(--x-spacing-3);--x-textarea-size-min-height: var(--x-size-default);--x-textarea-size-icon-clear: var(--x-font-size-body-1);--x-textarea-layout-top-icon-clear: var(--x-spacing-5);--x-password-color-eye-icon: var(--x-color-text-2);--x-password-size-eye-icon: var(--x-size-3);--x-input-group-border-radius_compact: var(--x-border-radius-small);--x-input-group-border-separator-width: var(--x-border-1);--x-input-group-color-separator-border: var(--x-color-border-subtle);--x-input-size-medium-height: var(--x-input-size-default-height);--x-input-size-medium-font-size: var(--x-input-size-default-font-size);--x-input-size-mini-line-height: 1.667;--x-input-size-small-line-height: var(--x-line-height-base);--x-input-size-medium-line-height: var(--x-line-height-base);--x-input-size-large-line-height: var(--x-line-height-base);--x-input-size-mini-padding-up-down: 1px;--x-input-size-small-padding-up-down: 2px;--x-input-size-medium-padding-up-down: 4px;--x-input-size-large-padding-up-down: 6px;--x-input-feedback-icon-color_success: var(--x-field-status-success-icon);--x-input-feedback-icon-color_error: var(--x-field-status-error-icon);--x-input-feedback-icon-color_warning: var(--x-field-status-warning-icon);--x-input-feedback-icon-color_validating: var(--x-field-status-validating-icon)}.x-tag{display:inline-flex;align-items:center;box-sizing:border-box;height:24px;padding:4px 8px;color:var(--x-tag-color-text-default);font-weight:500;font-size:12px;line-height:14px;vertical-align:middle;border:1px solid var(--x-color-transparent);border-radius:2px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.x-tag .x-icon-hover.x-icon-hover::before{width:14px;height:14px}.x-tag .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-bg-default-hover)}.x-tag-selectable{cursor:pointer;transition:all .3s linear}.x-tag-selectable:hover{background-color:var(--x-tag-color-bg-default-hover);border-color:var(--x-tag-color-border-default-hover)}.x-tag-checked{background-color:var(--x-tag-color-bg-default)}.x-tag-bordered{border-color:var(--x-tag-color-border-default-bordered)}.x-tag-size-small{height:20px;font-size:12px;line-height:18px}.x-tag-size-medium{height:24px;font-size:12px;line-height:22px}.x-tag-size-large{height:28px;font-size:14px;line-height:26px}.x-tag-hide{display:none}.x-tag-loading{cursor:default}.x-tag-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-tag-color-red.x-tag-checked{color:var(--x-tag-color-red-text);background-color:var(--x-tag-color-red-bg);border:1px solid var(--x-tag-color-red-border)}.x-tag-color-red.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-red-icon-bg_hover)}.x-tag-color-red.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-red-text)}.x-tag-color-red.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-red-border-hover);border-color:var(--x-tag-color-red-text)}.x-tag-color-red.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-red-text)}.x-tag-color-orangered.x-tag-checked{color:var(--x-tag-color-orangered-text);background-color:var(--x-tag-color-orangered-bg);border:1px solid var(--x-tag-color-orangered-border)}.x-tag-color-orangered.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-orangered-icon-bg_hover)}.x-tag-color-orangered.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-orangered-text)}.x-tag-color-orangered.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-orangered-border-hover);border-color:var(--x-tag-color-orangered-text)}.x-tag-color-orangered.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-orangered-text)}.x-tag-color-orange.x-tag-checked{color:var(--x-tag-color-orange-text);background-color:var(--x-tag-color-orange-bg);border:1px solid var(--x-tag-color-orange-border)}.x-tag-color-orange.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-orange-icon-bg_hover)}.x-tag-color-orange.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-orange-text)}.x-tag-color-orange.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-orange-border-hover);border-color:var(--x-tag-color-orange-text)}.x-tag-color-orange.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-orange-text)}.x-tag-color-gold.x-tag-checked{color:var(--x-tag-color-gold-text);background-color:var(--x-tag-color-gold-bg);border:1px solid var(--x-tag-color-gold-border)}.x-tag-color-gold.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-gold-icon-bg_hover)}.x-tag-color-gold.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-gold-text)}.x-tag-color-gold.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-gold-border-hover);border-color:var(--x-tag-color-gold-text)}.x-tag-color-gold.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-gold-text)}.x-tag-color-lime.x-tag-checked{color:var(--x-tag-color-lime-text);background-color:var(--x-tag-color-lime-bg);border:1px solid var(--x-tag-color-lime-border)}.x-tag-color-lime.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-lime-icon-bg_hover)}.x-tag-color-lime.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-lime-text)}.x-tag-color-lime.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-lime-border-hover);border-color:var(--x-tag-color-lime-text)}.x-tag-color-lime.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-lime-text)}.x-tag-color-green.x-tag-checked{color:var(--x-tag-color-green-text);background-color:var(--x-tag-color-green-bg);border:1px solid var(--x-tag-color-green-border)}.x-tag-color-green.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-green-icon-bg_hover)}.x-tag-color-green.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-green-text)}.x-tag-color-green.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-green-border-hover);border-color:var(--x-tag-color-green-text)}.x-tag-color-green.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-green-text)}.x-tag-color-cyan.x-tag-checked{color:var(--x-tag-color-cyan-text);background-color:var(--x-tag-color-cyan-bg);border:1px solid var(--x-tag-color-cyan-border)}.x-tag-color-cyan.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-cyan-icon-bg_hover)}.x-tag-color-cyan.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-cyan-text)}.x-tag-color-cyan.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-cyan-border-hover);border-color:var(--x-tag-color-cyan-text)}.x-tag-color-cyan.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-cyan-text)}.x-tag-color-better-blue.x-tag-checked{color:var(--x-tag-color-better-blue-text);background-color:var(--x-tag-color-better-blue-bg);border:1px solid var(--x-tag-color-better-blue-border)}.x-tag-color-better-blue.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-better-blue-icon-bg_hover)}.x-tag-color-better-blue.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-better-blue-text)}.x-tag-color-better-blue.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-better-blue-border-hover);border-color:var(--x-tag-color-better-blue-text)}.x-tag-color-better-blue.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-better-blue-text)}.x-tag-color-blue.x-tag-checked{color:var(--x-tag-color-blue-text);background-color:var(--x-tag-color-blue-bg);border:1px solid var(--x-tag-color-blue-border)}.x-tag-color-blue.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-blue-icon-bg_hover)}.x-tag-color-blue.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-blue-text)}.x-tag-color-blue.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-blue-border-hover);border-color:var(--x-tag-color-blue-text)}.x-tag-color-blue.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-blue-text)}.x-tag-color-purple.x-tag-checked{color:var(--x-tag-color-purple-text);background-color:var(--x-tag-color-purple-bg);border:1px solid var(--x-tag-color-purple-border)}.x-tag-color-purple.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-purple-icon-bg_hover)}.x-tag-color-purple.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-purple-text)}.x-tag-color-purple.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-purple-border-hover);border-color:var(--x-tag-color-purple-text)}.x-tag-color-purple.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-purple-text)}.x-tag-color-pink-purple.x-tag-checked{color:var(--x-tag-color-pink-purple-text);background-color:var(--x-tag-color-pink-purple-bg);border:1px solid var(--x-tag-color-pink-purple-border)}.x-tag-color-pink-purple.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-pink-purple-icon-bg_hover)}.x-tag-color-pink-purple.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-pink-purple-text)}.x-tag-color-pink-purple.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-pink-purple-border-hover);border-color:var(--x-tag-color-pink-purple-text)}.x-tag-color-pink-purple.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-pink-purple-text)}.x-tag-color-magenta.x-tag-checked{color:var(--x-tag-color-magenta-text);background-color:var(--x-tag-color-magenta-bg);border:1px solid var(--x-tag-color-magenta-border)}.x-tag-color-magenta.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-magenta-icon-bg_hover)}.x-tag-color-magenta.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-magenta-text)}.x-tag-color-magenta.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-magenta-border-hover);border-color:var(--x-tag-color-magenta-text)}.x-tag-color-magenta.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-magenta-text)}.x-tag-color-gray.x-tag-checked{color:var(--x-tag-color-gray-text);background-color:var(--x-tag-color-gray-bg);border:1px solid var(--x-tag-color-gray-border)}.x-tag-color-gray.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-gray-icon-bg_hover)}.x-tag-color-gray.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-gray-text)}.x-tag-color-gray.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-gray-border-hover);border-color:var(--x-tag-color-gray-text)}.x-tag-color-gray.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-gray-text)}.x-tag-custom-color.x-tag-checked{color:var(--x-tag-custom-color-text)}.x-tag-custom-color.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-custom-color-icon-bg_hover)}.x-tag-custom-color.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-custom-color-text)}.x-tag--close-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:14px;height:14px;margin-left:4px;font-size:12px;line-height:1;border-radius:50%;cursor:pointer;transition:all .2s ease-in-out}.x-tag--close-icon>.x-icon,.x-tag--close-icon>svg{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;line-height:1}.x-tag--close-icon>svg{position:relative}.x-tag--icon{margin-right:6px;color:currentcolor}.x-tag--loading-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:14px;height:14px;margin-left:4px;font-size:12px;line-height:1}.x-tag--loading-icon>.x-icon,.x-tag--loading-icon>svg{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;line-height:1}:root{--x-input-tag-size-mini-height: var(--x-size-mini);--x-input-tag-size-small-height: var(--x-size-small);--x-input-tag-size-default-height: var(--x-size-default);--x-input-tag-size-large-height: var(--x-size-large);--x-input-tag-size-mini-tag-height: var(--x-size-5);--x-input-tag-size-small-tag-height: var(--x-size-5);--x-input-tag-size-default-tag-height: var(--x-size-6);--x-input-tag-size-large-tag-height: var(--x-size-7);--x-input-tag-size-mini-tag-height-2px: 18px;--x-input-tag-size-small-tag-height-2px: 18px;--x-input-tag-size-default-tag-height-2px: 22px;--x-input-tag-size-large-tag-height-2px: 26px;--x-input-tag-size-mini-padding-top-bottom: 0;--x-input-tag-size-small-padding-top-bottom: 2px;--x-input-tag-size-default-padding-top-bottom: 2px;--x-input-tag-size-large-padding-top-bottom: 2px;--x-input-tag-size-mini-font-size: var(--x-font-size-body-1);--x-input-tag-size-small-font-size: var(--x-font-size-body-3);--x-input-tag-size-default-font-size: var(--x-font-size-body-3);--x-input-tag-size-large-font-size: var(--x-font-size-body-3);--x-input-tag-color-text_default: var(--x-field-color-text);--x-input-tag-color-text_error: var(--x-field-color-text);--x-input-tag-color-text_disabled: var(--x-field-color-text-disabled);--x-input-tag-color-placeholder: var(--x-field-color-placeholder);--x-input-tag-color-icon-clear: var(--x-field-color-icon);--x-input-tag-color-icon-clear-bg_hover: var(--x-color-fill-4);--x-input-tag-color-border_default: var(--x-field-color-border);--x-input-tag-color-border_default_hover: var(--x-field-color-border-hover);--x-input-tag-color-border_default_focus: var(--x-field-color-border-focus);--x-input-tag-color-border_error: var(--x-color-transparent);--x-input-tag-color-border_error_hover: var(--x-color-transparent);--x-input-tag-color-border_error_focus: var(--x-field-color-border-error);--x-input-tag-color-border_disabled: var(--x-field-color-border-disabled);--x-input-tag-color-border_disabled_hover: var(--x-input-tag-color-border_disabled);--x-input-tag-color-border_disabled_focus: var(--x-input-tag-color-border_disabled);--x-input-tag-color-bg_default: var(--x-field-color-bg);--x-input-tag-color-bg_default_hover: var(--x-field-color-bg-hover);--x-input-tag-color-bg_default_focus: var(--x-field-color-bg-focus);--x-input-tag-color-bg_error: var(--x-field-color-bg-error);--x-input-tag-color-bg_error_hover: var(--x-field-color-bg-error-hover);--x-input-tag-color-bg_error_focus: var(--x-field-color-bg-error-focus);--x-input-tag-color-bg_disabled: var(--x-field-color-bg-disabled);--x-input-tag-color-bg_disabled_hover: var(--x-input-tag-color-bg_disabled);--x-input-tag-color-shadow_default_focus: var(--x-field-color-shadow-focus);--x-input-tag-color-shadow_error_focus: var(--x-field-status-error-shadow-color-focus);--x-input-tag-size-shadow_error_focus: var(--x-field-status-error-shadow-size-focus);--x-input-tag-size-shadow_default_focus: var(--x-field-size-shadow-focus);--x-input-tag-tag-margin-right: var(--x-spacing-2);--x-input-tag-tag-margin-vertical: var(--x-spacing-1);--x-input-tag-tag-margin-vertical-division-2: 1px;--x-input-tag-padding-horizontal: var(--x-spacing-2);--x-input-tag-border-radius: var(--x-border-radius-small);--x-input-tag-border-width: var(--x-border-1);--x-input-tag-size-icon-clear: var(--x-size-3);--x-input-tag-size-icon-clear_hover: var(--x-size-5);--x-input-tag-tag-font-size: var(--x-font-size-body-1);--x-input-tag-tag-color-bg: var(--x-color-bg-2);--x-input-tag-tag-color-bg_focus: var(--x-color-fill-2);--x-input-tag-tag-color-bg_disabled: var(--x-color-fill-2);--x-input-tag-tag-color-border: var(--x-color-fill-3);--x-input-tag-tag-color-border_disabled: var(--x-color-fill-3);--x-input-tag-tag-color-border_focus: var(--x-color-fill-2);--x-input-tag-tag-remove-icon-color-bg: var(--x-color-fill-2);--x-input-tag-tag-remove-icon-color-bg_focus: var(--x-color-fill-3);--x-input-tag-size-medium-height: var(--x-input-tag-size-default-height);--x-input-tag-size-medium-tag-height: var(--x-input-tag-size-default-tag-height);--x-input-tag-size-medium-tag-height-2px: var(--x-input-tag-size-default-tag-height-2px);--x-input-tag-size-medium-padding-top-bottom: var( --x-input-tag-size-default-padding-top-bottom );--x-input-tag-size-medium-font-size: var(--x-input-tag-size-default-font-size)}.x-input-tag{display:inline-flex;align-items:center;box-sizing:border-box;width:100%;min-width:0;padding-right:var(--x-input-padding-horizontal);padding-left:var(--x-input-padding-horizontal);color:var(--x-input-color-text);font-size:var(--x-input-size-default-font-size);background-color:var(--x-input-color-bg);border:var(--x-input-border-width) solid var(--x-input-border-color);border-radius:var(--x-input-border-radius);cursor:text;transition:color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),border-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-input-tag:hover{background-color:var(--x-input-color-bg_hover);border-color:var(--x-input-color-border_hover)}.x-input-tag:focus-within,.x-input-tag.x-input-tag-focus{z-index:1;background-color:var(--x-input-color-bg_focus);border-color:var(--x-input-color-border_focus);box-shadow:0 0 0 var(--x-input-size-shadow_focus) var(--x-input-color-shadow_focus)}.x-input-tag.x-input-tag-disabled{color:var(--x-input-color-text_disabled);background-color:var(--x-input-color-bg_disabled);border-color:var(--x-input-color-border_disabled);cursor:not-allowed}.x-input-tag.x-input-tag-disabled:hover{color:var(--x-input-color-text_disabled);background-color:var(--x-input-color-bg_disabled);border-color:var(--x-input-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--prefix,.x-input-tag.x-input-tag-disabled .x-input-tag--suffix{color:inherit}.x-input-tag.x-input-tag-error{background-color:var(--x-input-color-bg_error);border-color:var(--x-input-color-border_error)}.x-input-tag.x-input-tag-error:hover{background-color:var(--x-input-color-bg_error_hover);border-color:var(--x-input-color-border_error_hover)}.x-input-tag.x-input-tag-error:focus-within,.x-input-tag.x-input-tag-error.x-input-tag-focus{z-index:1;background-color:var(--x-input-color-bg_error_focus);border-color:var(--x-input-color-border_error_focus);box-shadow:0 0 0 var(--x-input-size-shadow_error_focus) var(--x-input-color-shadow_error_focus)}.x-input-tag .x-input-tag--prefix,.x-input-tag .x-input-tag--suffix{display:inline-flex;flex-shrink:0;align-items:center;line-height:var(--x-line-height-base);white-space:nowrap;user-select:none}.x-input-tag .x-input-tag--prefix>.x-icon,.x-input-tag .x-input-tag--suffix>.x-icon{width:var(--x-input-size-default-icon-suffix-size);height:var(--x-input-size-default-icon-suffix-size);font-size:var(--x-input-size-default-icon-suffix-size)}.x-input-tag .x-input-tag--prefix>.x-icon>svg,.x-input-tag .x-input-tag--suffix>.x-icon>svg{width:1em;height:1em}.x-input-tag .x-input-tag--prefix{padding-right:var(--x-input-padding-horizontal);color:var(--x-input-color-prefix-text)}.x-input-tag .x-input-tag--suffix{padding-left:var(--x-input-padding-horizontal);color:var(--x-input-color-suffix-text)}.x-input-tag .x-input-tag--suffix .x-feedback-icon{display:inline-flex}.x-input-tag .x-input-tag--suffix .x-feedback-icon-status-validating{color:var(--x-input-feedback-icon-color_validating)}.x-input-tag .x-input-tag--suffix .x-feedback-icon-status-success{color:var(--x-input-feedback-icon-color_success)}.x-input-tag .x-input-tag--suffix .x-feedback-icon-status-warning{color:var(--x-input-feedback-icon-color_warning)}.x-input-tag .x-input-tag--suffix .x-feedback-icon-status-error{color:var(--x-input-feedback-icon-color_error)}.x-input-tag .x-input-tag--clear-btn{flex-shrink:0;align-self:center;margin-left:var(--x-input-margin-left-clear-btn);color:var(--x-input-color-icon-clear);font-size:var(--x-input-size-icon-clear);visibility:hidden;cursor:pointer;opacity:0;transition:opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear),visibility var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-input-tag .x-input-tag--clear-btn>svg{position:relative;transition:color var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-input-tag:hover .x-input-tag--clear-btn,.x-input-tag:focus-within .x-input-tag--clear-btn{visibility:visible;opacity:1}.x-input-tag:not(.x-input-tag-focus) .x-input-tag-icon-hover:hover::before{background-color:var(--x-input-color-icon-clear-bg_hover)}.x-input-tag.x-input-tag-has-tag{padding-right:var(--x-input-tag-padding-horizontal);padding-left:var(--x-input-tag-padding-horizontal)}.x-input-tag.x-input-tag-has-prefix{padding-left:var(--x-input-padding-horizontal)}.x-input-tag .x-input-tag--prefix{line-height:var(--x-line-height-base)}.x-input-tag.x-input-tag-has-suffix{padding-right:var(--x-input-padding-horizontal)}.x-input-tag .x-input-tag--inner{flex:1;overflow:hidden;line-height:0}.x-input-tag .x-input-tag--inner.x-input-tag-nowrap{display:flex;flex-wrap:wrap}.x-input-tag .x-input-tag--inner .x-input-tag--tag{display:inline-flex;align-items:center;padding-top:0;padding-bottom:0;margin-right:var(--x-input-tag-tag-margin-right);color:var(--x-input-tag-color-text_default);font-size:var(--x-input-tag-tag-font-size);white-space:pre-wrap;word-break:break-word;background-color:var(--x-input-tag-tag-color-bg);border-color:var(--x-input-tag-tag-color-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-red{color:var(--x-tag-color-red-text);background-color:var(--x-tag-color-red-bg);border-color:var(--x-tag-color-red-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-red.x-tag-bordered{border-color:var(--x-tag-color-red-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-orangered{color:var(--x-tag-color-orangered-text);background-color:var(--x-tag-color-orangered-bg);border-color:var(--x-tag-color-orangered-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-orangered.x-tag-bordered{border-color:var(--x-tag-color-orangered-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-orange{color:var(--x-tag-color-orange-text);background-color:var(--x-tag-color-orange-bg);border-color:var(--x-tag-color-orange-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-orange.x-tag-bordered{border-color:var(--x-tag-color-orange-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-gold{color:var(--x-tag-color-gold-text);background-color:var(--x-tag-color-gold-bg);border-color:var(--x-tag-color-gold-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-gold.x-tag-bordered{border-color:var(--x-tag-color-gold-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-lime{color:var(--x-tag-color-lime-text);background-color:var(--x-tag-color-lime-bg);border-color:var(--x-tag-color-lime-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-lime.x-tag-bordered{border-color:var(--x-tag-color-lime-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-green{color:var(--x-tag-color-green-text);background-color:var(--x-tag-color-green-bg);border-color:var(--x-tag-color-green-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-green.x-tag-bordered{border-color:var(--x-tag-color-green-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-cyan{color:var(--x-tag-color-cyan-text);background-color:var(--x-tag-color-cyan-bg);border-color:var(--x-tag-color-cyan-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-cyan.x-tag-bordered{border-color:var(--x-tag-color-cyan-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-better-blue{color:var(--x-tag-color-better-blue-text);background-color:var(--x-tag-color-better-blue-bg);border-color:var(--x-tag-color-better-blue-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-better-blue.x-tag-bordered{border-color:var(--x-tag-color-better-blue-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-blue{color:var(--x-tag-color-blue-text);background-color:var(--x-tag-color-blue-bg);border-color:var(--x-tag-color-blue-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-blue.x-tag-bordered{border-color:var(--x-tag-color-blue-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-purple{color:var(--x-tag-color-purple-text);background-color:var(--x-tag-color-purple-bg);border-color:var(--x-tag-color-purple-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-purple.x-tag-bordered{border-color:var(--x-tag-color-purple-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-pink-purple{color:var(--x-tag-color-pink-purple-text);background-color:var(--x-tag-color-pink-purple-bg);border-color:var(--x-tag-color-pink-purple-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-pink-purple.x-tag-bordered{border-color:var(--x-tag-color-pink-purple-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-magenta{color:var(--x-tag-color-magenta-text);background-color:var(--x-tag-color-magenta-bg);border-color:var(--x-tag-color-magenta-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-magenta.x-tag-bordered{border-color:var(--x-tag-color-magenta-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-gray{color:var(--x-tag-color-gray-text);background-color:var(--x-tag-color-gray-bg);border-color:var(--x-tag-color-gray-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-gray.x-tag-bordered{border-color:var(--x-tag-color-gray-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag .x-icon-hover:hover::before{background-color:var(--x-input-tag-tag-remove-icon-color-bg)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-custom-color{color:var(--x-tag-custom-color-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-custom-color .x-icon-hover.x-tag-icon-hover:hover::before{background-color:var(--x-tag-custom-color-icon-bg_hover)}.x-input-tag .x-input-tag--inner.x-input-tag-nowrap .x-input-tag--tag{white-space:nowrap;word-break:normal}.x-input-tag .x-input-tag--inner .x-input-tag--input{width:100%;min-width:0;padding-right:0;padding-left:0;color:inherit;line-height:var(--x-line-height-base);background:none;border:none;border-radius:0;outline:none;cursor:inherit;-webkit-appearance:none;-webkit-tap-highlight-color:var(--x-color-transparent)}.x-input-tag .x-input-tag--inner .x-input-tag--input::placeholder{color:var(--x-input-color-placeholder-text)}.x-input-tag .x-input-tag--inner .x-input-tag--input[disabled]::placeholder{color:var(--x-input-color-text_disabled)}.x-input-tag .x-input-tag--inner .x-input-tag--input[disabled]{-webkit-text-fill-color:var(--x-input-color-text_disabled)}.x-input-tag .x-input-tag--inner .x-input-tag--input{box-sizing:border-box;font-size:inherit}.x-input-tag .x-input-tag--mirror{position:absolute;top:0;left:0;white-space:pre;visibility:hidden;pointer-events:none}.x-input-tag.x-input-tag-focus .x-input-tag--tag{background-color:var(--x-input-tag-tag-color-bg_focus);border-color:var(--x-input-tag-tag-color-border_focus)}.x-input-tag.x-input-tag-focus .x-input-tag--tag .x-icon-hover:hover::before{background-color:var(--x-input-tag-tag-remove-icon-color-bg_focus)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-red{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-orangered{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-orange{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-gold{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-lime{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-green{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-cyan{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-better-blue{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-blue{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-purple{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-pink-purple{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-magenta{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-gray{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-readonly,.x-input-tag.x-input-tag-disabled-input{cursor:default}.x-input-tag.x-input-tag-size-mini{font-size:var(--x-input-tag-size-mini-font-size)}.x-input-tag.x-input-tag-size-mini .x-input-tag--inner{padding-top:var(--x-input-tag-size-mini-padding-top-bottom);padding-bottom:var(--x-input-tag-size-mini-padding-top-bottom)}.x-input-tag.x-input-tag-size-mini .x-input-tag--tag,.x-input-tag.x-input-tag-size-mini .x-input-tag--input{margin-top:var(--x-input-tag-tag-margin-vertical-division-2);margin-bottom:var(--x-input-tag-tag-margin-vertical-division-2);line-height:var(--x-input-tag-size-mini-tag-height-2px);vertical-align:middle}.x-input-tag.x-input-tag-size-mini .x-input-tag--tag{height:auto;min-height:var(--x-input-tag-size-mini-tag-height)}.x-input-tag.x-input-tag-size-mini .x-input-tag--input{height:var(--x-input-tag-size-mini-tag-height)}.x-input-tag.x-input-tag-size-medium{font-size:var(--x-input-tag-size-medium-font-size)}.x-input-tag.x-input-tag-size-medium .x-input-tag--inner{padding-top:var(--x-input-tag-size-medium-padding-top-bottom);padding-bottom:var(--x-input-tag-size-medium-padding-top-bottom)}.x-input-tag.x-input-tag-size-medium .x-input-tag--tag,.x-input-tag.x-input-tag-size-medium .x-input-tag--input{margin-top:var(--x-input-tag-tag-margin-vertical-division-2);margin-bottom:var(--x-input-tag-tag-margin-vertical-division-2);line-height:var(--x-input-tag-size-medium-tag-height-2px);vertical-align:middle}.x-input-tag.x-input-tag-size-medium .x-input-tag--tag{height:auto;min-height:var(--x-input-tag-size-medium-tag-height)}.x-input-tag.x-input-tag-size-medium .x-input-tag--input{height:var(--x-input-tag-size-medium-tag-height)}.x-input-tag.x-input-tag-size-small{font-size:var(--x-input-tag-size-small-font-size)}.x-input-tag.x-input-tag-size-small .x-input-tag--inner{padding-top:var(--x-input-tag-size-small-padding-top-bottom);padding-bottom:var(--x-input-tag-size-small-padding-top-bottom)}.x-input-tag.x-input-tag-size-small .x-input-tag--tag,.x-input-tag.x-input-tag-size-small .x-input-tag--input{margin-top:var(--x-input-tag-tag-margin-vertical-division-2);margin-bottom:var(--x-input-tag-tag-margin-vertical-division-2);line-height:var(--x-input-tag-size-small-tag-height-2px);vertical-align:middle}.x-input-tag.x-input-tag-size-small .x-input-tag--tag{height:auto;min-height:var(--x-input-tag-size-small-tag-height)}.x-input-tag.x-input-tag-size-small .x-input-tag--input{height:var(--x-input-tag-size-small-tag-height)}.x-input-tag.x-input-tag-size-large{font-size:var(--x-input-tag-size-large-font-size)}.x-input-tag.x-input-tag-size-large .x-input-tag--inner{padding-top:var(--x-input-tag-size-large-padding-top-bottom);padding-bottom:var(--x-input-tag-size-large-padding-top-bottom)}.x-input-tag.x-input-tag-size-large .x-input-tag--tag,.x-input-tag.x-input-tag-size-large .x-input-tag--input{margin-top:var(--x-input-tag-tag-margin-vertical-division-2);margin-bottom:var(--x-input-tag-tag-margin-vertical-division-2);line-height:var(--x-input-tag-size-large-tag-height-2px);vertical-align:middle}.x-input-tag.x-input-tag-size-large .x-input-tag--tag{height:auto;min-height:var(--x-input-tag-size-large-tag-height)}.x-input-tag.x-input-tag-size-large .x-input-tag--input{height:var(--x-input-tag-size-large-tag-height)}.x-input-tag:focus-within .x-input-tag--clear-btn{visibility:visible;opacity:1}.input-tag-zoom-enter-from{transform:scale(0.5, 0.5);opacity:0}.input-tag-zoom-enter-to{transform:scale(1, 1);opacity:1}.input-tag-zoom-enter-active{transition:all var(--x-transition-duration-3) var(--x-transition-timing-function-standard)}.input-tag-zoom-leave-from{transform:scale(1, 1);opacity:1}.input-tag-zoom-leave-to{transform:scale(0.5, 0.5);opacity:0}.input-tag-zoom-leave-active{position:absolute;transition:all var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot)}.input-tag-zoom-move{transition:all var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot)}