x-next 1.17.0 → 1.18.1

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 (189) hide show
  1. package/AI_USAGE/catalog.md +1 -1
  2. package/AI_USAGE/components/alert-api.md +1 -1
  3. package/AI_USAGE/components/alert.md +33 -1
  4. package/AI_USAGE/components/bar-chart-api.md +1 -1
  5. package/AI_USAGE/components/bar-chart.md +1 -1
  6. package/AI_USAGE/components/boxicons.md +1 -1
  7. package/AI_USAGE/components/button-api.md +13 -16
  8. package/AI_USAGE/components/button.md +245 -34
  9. package/AI_USAGE/components/charts.md +1 -1
  10. package/AI_USAGE/components/checkbox-api.md +1 -1
  11. package/AI_USAGE/components/checkbox.md +1 -1
  12. package/AI_USAGE/components/color-picker-api.md +1 -1
  13. package/AI_USAGE/components/color-picker.md +1 -1
  14. package/AI_USAGE/components/config-provider-api.md +1 -1
  15. package/AI_USAGE/components/config-provider.md +1 -1
  16. package/AI_USAGE/components/date-picker-api.md +44 -26
  17. package/AI_USAGE/components/date-picker.md +78 -3
  18. package/AI_USAGE/components/dialog-api.md +2 -2
  19. package/AI_USAGE/components/dialog.md +5 -1
  20. package/AI_USAGE/components/draggable-api.md +1 -1
  21. package/AI_USAGE/components/draggable.md +1 -1
  22. package/AI_USAGE/components/drawer-api.md +3 -3
  23. package/AI_USAGE/components/drawer.md +1 -1
  24. package/AI_USAGE/components/dropdown-api.md +8 -3
  25. package/AI_USAGE/components/dropdown.md +2 -2
  26. package/AI_USAGE/components/empty-api.md +1 -1
  27. package/AI_USAGE/components/empty.md +1 -1
  28. package/AI_USAGE/components/finicon.md +1 -1
  29. package/AI_USAGE/components/form-api.md +1 -1
  30. package/AI_USAGE/components/form.md +1 -1
  31. package/AI_USAGE/components/grid-api.md +1 -1
  32. package/AI_USAGE/components/grid.md +1 -1
  33. package/AI_USAGE/components/heatmap-api.md +1 -1
  34. package/AI_USAGE/components/heatmap.md +1 -1
  35. package/AI_USAGE/components/icon-api.md +1 -1
  36. package/AI_USAGE/components/icon.md +1 -1
  37. package/AI_USAGE/components/image-api.md +1 -1
  38. package/AI_USAGE/components/image.md +1 -1
  39. package/AI_USAGE/components/input-api.md +2 -2
  40. package/AI_USAGE/components/input-number-api.md +1 -1
  41. package/AI_USAGE/components/input-number.md +1 -1
  42. package/AI_USAGE/components/input-tag-api.md +1 -1
  43. package/AI_USAGE/components/input-tag.md +1 -1
  44. package/AI_USAGE/components/input.md +1 -1
  45. package/AI_USAGE/components/layout-api.md +1 -1
  46. package/AI_USAGE/components/layout.md +1 -1
  47. package/AI_USAGE/components/line-chart-api.md +1 -1
  48. package/AI_USAGE/components/line-chart.md +1 -1
  49. package/AI_USAGE/components/link-api.md +1 -1
  50. package/AI_USAGE/components/link.md +1 -1
  51. package/AI_USAGE/components/menu-api.md +1 -1
  52. package/AI_USAGE/components/menu.md +1 -1
  53. package/AI_USAGE/components/message-api.md +1 -1
  54. package/AI_USAGE/components/message-box-api.md +1 -1
  55. package/AI_USAGE/components/message-box.md +1 -1
  56. package/AI_USAGE/components/message.md +1 -1
  57. package/AI_USAGE/components/network-api.md +1 -1
  58. package/AI_USAGE/components/network.md +1 -1
  59. package/AI_USAGE/components/notification-api.md +1 -1
  60. package/AI_USAGE/components/notification.md +1 -1
  61. package/AI_USAGE/components/pagination-api.md +1 -1
  62. package/AI_USAGE/components/pagination.md +1 -1
  63. package/AI_USAGE/components/pie-chart-api.md +1 -1
  64. package/AI_USAGE/components/pie-chart.md +1 -1
  65. package/AI_USAGE/components/popconfirm-api.md +3 -3
  66. package/AI_USAGE/components/popconfirm.md +1 -1
  67. package/AI_USAGE/components/popover-api.md +1 -1
  68. package/AI_USAGE/components/popover.md +3 -1
  69. package/AI_USAGE/components/popup-api.md +1 -1
  70. package/AI_USAGE/components/popup.md +1 -1
  71. package/AI_USAGE/components/progress-api.md +1 -1
  72. package/AI_USAGE/components/progress.md +1 -1
  73. package/AI_USAGE/components/radio-api.md +1 -1
  74. package/AI_USAGE/components/radio.md +1 -1
  75. package/AI_USAGE/components/rate-api.md +1 -1
  76. package/AI_USAGE/components/rate.md +1 -1
  77. package/AI_USAGE/components/resize-box-api.md +1 -1
  78. package/AI_USAGE/components/resize-box.md +1 -1
  79. package/AI_USAGE/components/scrollbar-api.md +1 -1
  80. package/AI_USAGE/components/scrollbar.md +1 -1
  81. package/AI_USAGE/components/select-api.md +1 -1
  82. package/AI_USAGE/components/select.md +1 -1
  83. package/AI_USAGE/components/skeleton-api.md +1 -1
  84. package/AI_USAGE/components/skeleton.md +1 -1
  85. package/AI_USAGE/components/slider-api.md +1 -1
  86. package/AI_USAGE/components/slider.md +1 -1
  87. package/AI_USAGE/components/space-api.md +1 -1
  88. package/AI_USAGE/components/space.md +1 -1
  89. package/AI_USAGE/components/spin-api.md +1 -1
  90. package/AI_USAGE/components/spin.md +1 -1
  91. package/AI_USAGE/components/steps-api.md +1 -1
  92. package/AI_USAGE/components/steps.md +1 -1
  93. package/AI_USAGE/components/switch-api.md +1 -1
  94. package/AI_USAGE/components/switch.md +1 -1
  95. package/AI_USAGE/components/table-api.md +1 -1
  96. package/AI_USAGE/components/table.md +1 -1
  97. package/AI_USAGE/components/tabs-api.md +1 -1
  98. package/AI_USAGE/components/tabs.md +1 -1
  99. package/AI_USAGE/components/tag-api.md +1 -1
  100. package/AI_USAGE/components/tag.md +1 -1
  101. package/AI_USAGE/components/textarea-api.md +1 -1
  102. package/AI_USAGE/components/textarea.md +1 -1
  103. package/AI_USAGE/components/time-picker-api.md +1 -1
  104. package/AI_USAGE/components/time-picker.md +1 -1
  105. package/AI_USAGE/components/time-range-selector-api.md +1 -1
  106. package/AI_USAGE/components/time-range-selector.md +1 -1
  107. package/AI_USAGE/components/timeline-api.md +3 -3
  108. package/AI_USAGE/components/timeline.md +1 -1
  109. package/AI_USAGE/components/tooltip-api.md +1 -1
  110. package/AI_USAGE/components/tooltip.md +1 -1
  111. package/AI_USAGE/components/transfer-api.md +1 -1
  112. package/AI_USAGE/components/transfer.md +1 -1
  113. package/AI_USAGE/components/tree-select-api.md +1 -1
  114. package/AI_USAGE/components/tree-select.md +1 -1
  115. package/AI_USAGE/components/trend-chart-api.md +1 -1
  116. package/AI_USAGE/components/trend-chart.md +1 -1
  117. package/AI_USAGE/components/trigger-api.md +1 -1
  118. package/AI_USAGE/components/trigger.md +1 -1
  119. package/AI_USAGE/components/upload-api.md +1 -1
  120. package/AI_USAGE/components/upload.md +1 -1
  121. package/AI_USAGE/components/watermark-api.md +1 -1
  122. package/AI_USAGE/components/watermark.md +1 -1
  123. package/AI_USAGE/core.md +1 -1
  124. package/AI_USAGE/index.md +1 -1
  125. package/AI_USAGE/recipes/form-on-demand.md +1 -1
  126. package/AI_USAGE.md +432 -88
  127. package/CHANGELOG.md +36 -0
  128. package/dist/_container/render-function.d.ts +2 -2
  129. package/dist/_styles/palette-aliases.d.ts +1 -0
  130. package/dist/components/_components/picker/input-range.vue.d.ts +1 -1
  131. package/dist/components/button/Button.d.ts +0 -9
  132. package/dist/components/button/appearance.d.ts +7 -0
  133. package/dist/components/button/index.d.ts +0 -16
  134. package/dist/components/button/props.d.ts +2 -6
  135. package/dist/components/color-picker/panel.d.ts +0 -9
  136. package/dist/components/date-picker/DatePanel.vue.d.ts +10 -1
  137. package/dist/components/date-picker/DatePicker.vue.d.ts +22 -25
  138. package/dist/components/date-picker/index.d.ts +156 -84
  139. package/dist/components/date-picker/utils.d.ts +4 -4
  140. package/dist/components/drawer/index.d.ts +0 -30
  141. package/dist/components/drawer/src/Drawer.vue.d.ts +0 -15
  142. package/dist/components/dropdown/Dropdown.vue.d.ts +1 -0
  143. package/dist/components/dropdown/DropdownButton.vue.d.ts +1 -15
  144. package/dist/components/dropdown/DropdownSubmenu.vue.d.ts +1 -0
  145. package/dist/components/dropdown/context.d.ts +1 -0
  146. package/dist/components/dropdown/index.d.ts +8 -30
  147. package/dist/components/dropdown/use-keyboard.d.ts +1 -0
  148. package/dist/components/menu/MenuItem.d.ts +2 -2
  149. package/dist/components/menu/context.d.ts +3 -3
  150. package/dist/components/menu/index.d.ts +6 -6
  151. package/dist/components/menu/sub-menu-pop.vue.d.ts +2 -2
  152. package/dist/components/popconfirm/src/popup.vue.d.ts +0 -15
  153. package/dist/components/time-picker/TimePanel.vue.d.ts +0 -15
  154. package/dist/components/time-picker/TimePicker.vue.d.ts +1 -16
  155. package/dist/components/time-picker/index.d.ts +2 -32
  156. package/dist/es/_styles/palette-aliases.js +102 -17
  157. package/dist/es/_utils/palette.js +54 -54
  158. package/dist/es/components/_components/picker/input-range.vue.js +12 -12
  159. package/dist/es/components/_components/picker/input-range.vue2.js +45 -45
  160. package/dist/es/components/_components/picker/input.vue2.js +24 -24
  161. package/dist/es/components/button/Button.js +77 -49
  162. package/dist/es/components/button/appearance.js +7 -0
  163. package/dist/es/components/button/props.js +0 -4
  164. package/dist/es/components/date-picker/DatePanel.vue.js +47 -47
  165. package/dist/es/components/date-picker/DatePanel.vue2.js +68 -59
  166. package/dist/es/components/date-picker/DatePicker.vue.js +65 -59
  167. package/dist/es/components/date-picker/DatePicker.vue2.js +387 -284
  168. package/dist/es/components/date-picker/index.js +57 -36
  169. package/dist/es/components/date-picker/utils.js +132 -122
  170. package/dist/es/components/dialog/Dialog.js +43 -40
  171. package/dist/es/components/dialog/props.js +1 -1
  172. package/dist/es/components/dropdown/Dropdown.vue2.js +66 -50
  173. package/dist/es/components/dropdown/dropdown-panel.vue2.js +48 -43
  174. package/dist/es/components/dropdown/use-keyboard.js +36 -28
  175. package/dist/es/components/popover/Popover.js +72 -32
  176. package/dist/es/directives/wave.js +14 -8
  177. package/dist/es/style.css +1 -1
  178. package/dist/index.cjs +3 -3
  179. package/dist/index.umd.js +3 -3
  180. package/dist/style/alert.css +1 -1
  181. package/dist/style/base.css +1 -1
  182. package/dist/style/button.css +1 -1
  183. package/dist/style/color-picker.css +1 -1
  184. package/dist/style/date-picker.css +1 -1
  185. package/dist/style/dialog.css +1 -1
  186. package/dist/style/link.css +1 -1
  187. package/dist/style/message-box.css +1 -1
  188. package/dist/style.css +1 -1
  189. package/package.json +2 -1
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: var(--x-border-radius);--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: var(--x-border-radius);--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: var(--x-border-radius);--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: calc(var(--x-border-radius) + 2px);--x-button-huge-height: calc(var(--x-size-huge) - 2px);--x-button-huge-font-size: 16px;--x-button-huge-font-weight: 500;--x-button-huge-padding: 0 28px;--x-button-huge-border-radius: calc(var(--x-border-radius) + 2px)}.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(: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(: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;flex-shrink:0;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-family:inherit;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:focus-visible{outline:2px solid var(--x-color-border-focus);outline-offset:2px}.x-button.x-button-mini:not(.x-button-link),.x-button.x-button-small:not(.x-button-link){line-height:1}.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)}@media(prefers-reduced-motion: reduce){.x-button{transition:none}.x-button>.x-wave{display:none}}.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;flex-shrink:0;transition:width .2s ease,opacity .2s ease,margin-right .2s ease}@media(prefers-reduced-motion: reduce){.x-button--loading{transition:none}}.x-button--content{position:relative;z-index:1;display:flex;align-items:center}.x-button.x-button-empty-content>.x-button--content{display:none}.x-button.x-button-empty-content>.x-button--prefix{margin-right:0}.x-button.x-button-empty-content>.x-button--suffix{margin-left:0}.x-button.x-button-empty-content>.x-button--prefix~.x-button--prefix,.x-button.x-button-empty-content>.x-button--prefix~.x-button--suffix{margin-left:4px}.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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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(: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,.x-button-hide-border.x-button:not(:disabled):hover,.x-button-hide-border.x-button:not(:disabled):active{--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-link{min-height:0}.x-button.x-button-link:not(.x-button-circle){--x-button-height: auto;--x-button-padding: 0}.x-button.x-button-link,.x-button.x-button-link:not(:disabled):hover,.x-button.x-button-link:not(: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.x-button-link.x-button-success,.x-button.x-button-link:not(:disabled):hover.x-button-success,.x-button.x-button-link:not(:disabled):active.x-button-success{--x-button-text-color: var(--x-button-color-text-success)}.x-button.x-button-link.x-button-warning,.x-button.x-button-link:not(:disabled):hover.x-button-warning,.x-button.x-button-link:not(:disabled):active.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning)}.x-button.x-button-link.x-button-strong,.x-button.x-button-link:not(:disabled):hover.x-button-strong,.x-button.x-button-link:not(:disabled):active.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong)}.x-button.x-button-link.x-button-danger,.x-button.x-button-link:not(:disabled):hover.x-button-danger,.x-button.x-button-link:not(:disabled):active.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger)}.x-button.x-button-link.x-button-info,.x-button.x-button-link:not(:disabled):hover.x-button-info,.x-button.x-button-link:not(:disabled):active.x-button-info{--x-button-text-color: var(--x-button-color-text-info)}.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>.x-button--loading{position:absolute;inset:0;z-index:2;justify-content:center;align-items:center;border-radius:inherit;color:var(--x-button-text-color);background-color:var(--x-button-background-color);pointer-events:none;transition:opacity .2s ease}@media(prefers-reduced-motion: reduce){.x-button-loading-fill>.x-button--loading{transition:none}}.x-button-loading-fill.x-button-loading>.x-button--prefix,.x-button-loading-fill.x-button-loading>.x-button--content,.x-button-loading-fill.x-button-loading>.x-button--suffix{opacity:0}.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: 999px}.x-button-square{--x-button-border-radius: var(--x-border-radius-none)}.x-button.x-button-only-icon:not(.x-button-link){--x-button-width: var(--x-button-height);--x-button-padding: 0}.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:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.x-button-group>.x-button:not(:first-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(:disabled):hover{z-index:1}.x-button-group>.x-button:focus-visible{z-index:2}
1
+ :root{--x-button-color-text-default: var(--x-color-text-primary);--x-button-color-border-default: var(--x-color-border-default);--x-button-color-bg-default-subtle: var(--x-button-color-bg-default);--x-button-color-bg-default-subtle-hover: var(--x-button-color-bg-default-hover);--x-button-color-bg-default-subtle-active: var(--x-button-color-bg-default-active);--x-button-color-text-solid-default: var(--x-color-white);--x-button-color-wave-default: var(--x-button-color-border-default);--x-button-color-wave-primary: var(--x-button-color-bg-primary-solid);--x-button-color-wave-success: var(--x-button-color-bg-success-solid);--x-button-color-wave-warning: var(--x-button-color-bg-warning-solid);--x-button-color-wave-strong: var(--x-button-color-bg-strong-solid);--x-button-color-wave-danger: var(--x-button-color-bg-danger-solid);--x-button-color-wave-info: var(--x-button-color-text-info);--x-button-wave-opacity-weak: 0.12;--x-button-wave-opacity-strong: 0.18;--x-button-wave-spread: 6px;--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-button-color-bg-default);--x-button-color-bg-info-subtle-hover: var(--x-button-color-bg-default-hover);--x-button-color-bg-info-subtle-active: var(--x-button-color-bg-default-active);--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-wave-opacity: var(--x-button-wave-opacity-weak);--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: var(--x-border-radius);--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: var(--x-border-radius);--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: var(--x-border-radius);--x-button-large-height: var(--x-size-large);--x-button-large-font-size: 15px;--x-button-large-padding: 0 16px;--x-button-large-border-radius: calc(var(--x-border-radius) + 2px);--x-button-huge-height: calc(var(--x-size-huge) - 2px);--x-button-huge-font-size: 16px;--x-button-huge-font-weight: 500;--x-button-huge-padding: 0 20px;--x-button-huge-border-radius: calc(var(--x-border-radius) + 2px)}.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(: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(: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;flex-shrink:0;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-family:inherit;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:focus-visible{outline:2px solid var(--x-color-border-focus);outline-offset:2px}.x-button.x-button-mini,.x-button.x-button-small{line-height:1}.x-button>.x-wave{position:absolute;inset:-1px;z-index:0;border-radius:inherit;pointer-events:none;opacity:var(--x-button-wave-opacity);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 var(--x-button-wave-spread) var(--x-wave-color, currentColor)}@media(prefers-reduced-motion: reduce){.x-button{transition:none}.x-button>.x-wave{display:none}}.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;flex-shrink:0;transition:width .2s ease,opacity .2s ease,margin-right .2s ease}@media(prefers-reduced-motion: reduce){.x-button--loading{transition:none}}.x-button--content{position:relative;z-index:1;display:flex;align-items:center}.x-button.x-button-empty-content>.x-button--content{display:none}.x-button.x-button-empty-content>.x-button--prefix{margin-right:0}.x-button.x-button-empty-content>.x-button--suffix{margin-left:0}.x-button.x-button-empty-content>.x-button--prefix~.x-button--prefix,.x-button.x-button-empty-content>.x-button--prefix~.x-button--suffix{margin-left:4px}.x-button.x-button-appearance-default.x-button-color-default{--x-button-wave-color: var(--x-button-color-wave-default)}.x-button.x-button-appearance-default.x-button-color-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-appearance-default.x-button-color-default:not(:disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-appearance-default.x-button-color-default:not(:disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-appearance-default.x-button-color-default,.x-button.x-button-appearance-default.x-button-color-default:not(:disabled):hover,.x-button.x-button-appearance-default.x-button-color-default:not(:disabled):active{--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-appearance-default.x-button-color-primary{--x-button-wave-color: var(--x-button-color-wave-primary)}.x-button.x-button-appearance-default.x-button-color-primary{--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.x-button-appearance-default.x-button-color-primary:not(: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.x-button-appearance-default.x-button-color-primary:not(: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.x-button-appearance-default.x-button-color-primary{--x-button-group-separator-color: var(--x-color-transparent)}.x-button.x-button-appearance-default.x-button-color-success{--x-button-wave-color: var(--x-button-color-wave-success)}.x-button.x-button-appearance-default.x-button-color-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-appearance-default.x-button-color-success:not(: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-appearance-default.x-button-color-success:not(: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-appearance-default.x-button-color-success{--x-button-group-separator-color: var(--x-color-transparent)}.x-button.x-button-appearance-default.x-button-color-warning{--x-button-wave-color: var(--x-button-color-wave-warning)}.x-button.x-button-appearance-default.x-button-color-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-appearance-default.x-button-color-warning:not(: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-appearance-default.x-button-color-warning:not(: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-appearance-default.x-button-color-warning{--x-button-group-separator-color: var(--x-color-transparent)}.x-button.x-button-appearance-default.x-button-color-strong{--x-button-wave-color: var(--x-button-color-wave-strong)}.x-button.x-button-appearance-default.x-button-color-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-appearance-default.x-button-color-strong:not(: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-appearance-default.x-button-color-strong:not(: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-appearance-default.x-button-color-strong{--x-button-group-separator-color: var(--x-color-transparent)}.x-button.x-button-appearance-default.x-button-color-danger{--x-button-wave-color: var(--x-button-color-wave-danger)}.x-button.x-button-appearance-default.x-button-color-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-appearance-default.x-button-color-danger:not(: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-appearance-default.x-button-color-danger:not(: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-appearance-default.x-button-color-danger{--x-button-group-separator-color: var(--x-color-transparent)}.x-button.x-button-appearance-default.x-button-color-info{--x-button-wave-color: var(--x-button-color-wave-info)}.x-button.x-button-appearance-default.x-button-color-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-appearance-default.x-button-color-info:not(: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-appearance-default.x-button-color-info:not(: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.x-button-appearance-default.x-button-color-info{--x-button-group-separator-color: var(--x-color-transparent)}.x-button.x-button-appearance-solid{--x-button-wave-opacity: var(--x-button-wave-opacity-strong)}.x-button.x-button-appearance-solid.x-button-color-default{--x-button-wave-color: var(--x-button-color-wave-default);--x-button-wave-color: var(--x-button-color-bg-default-solid)}.x-button.x-button-appearance-solid.x-button-color-default{--x-button-text-color: var(--x-button-color-text-solid-default);--x-button-background-color: var(--x-button-color-bg-default-solid);--x-button-border-color: var(--x-button-color-bg-default-solid)}.x-button.x-button-appearance-solid.x-button-color-default:not(:disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-default);--x-button-background-color: var(--x-button-color-bg-default-solid-hover);--x-button-border-color: var(--x-button-color-bg-default-solid-hover)}.x-button.x-button-appearance-solid.x-button-color-default:not(:disabled):active{--x-button-text-color: var(--x-button-color-text-solid-default);--x-button-background-color: var(--x-button-color-bg-default-solid-active);--x-button-border-color: var(--x-button-color-bg-default-solid-active)}.x-button.x-button-appearance-solid.x-button-color-primary{--x-button-wave-color: var(--x-button-color-wave-primary);--x-button-wave-color: var(--x-button-color-bg-primary-solid)}.x-button.x-button-appearance-solid.x-button-color-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.x-button-appearance-solid.x-button-color-primary:not(: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.x-button-appearance-solid.x-button-color-primary:not(: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.x-button-appearance-solid.x-button-color-success{--x-button-wave-color: var(--x-button-color-wave-success);--x-button-wave-color: var(--x-button-color-bg-success-solid)}.x-button.x-button-appearance-solid.x-button-color-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.x-button-appearance-solid.x-button-color-success:not(: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.x-button-appearance-solid.x-button-color-success:not(: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.x-button-appearance-solid.x-button-color-warning{--x-button-wave-color: var(--x-button-color-wave-warning);--x-button-wave-color: var(--x-button-color-bg-warning-solid)}.x-button.x-button-appearance-solid.x-button-color-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.x-button-appearance-solid.x-button-color-warning:not(: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.x-button-appearance-solid.x-button-color-warning:not(: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.x-button-appearance-solid.x-button-color-strong{--x-button-wave-color: var(--x-button-color-wave-strong);--x-button-wave-color: var(--x-button-color-bg-strong-solid)}.x-button.x-button-appearance-solid.x-button-color-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.x-button-appearance-solid.x-button-color-strong:not(: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.x-button-appearance-solid.x-button-color-strong:not(: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.x-button-appearance-solid.x-button-color-danger{--x-button-wave-color: var(--x-button-color-wave-danger);--x-button-wave-color: var(--x-button-color-bg-danger-solid)}.x-button.x-button-appearance-solid.x-button-color-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.x-button-appearance-solid.x-button-color-danger:not(: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.x-button-appearance-solid.x-button-color-danger:not(: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.x-button-appearance-solid.x-button-color-info{--x-button-wave-color: var(--x-button-color-wave-info);--x-button-wave-color: var(--x-button-color-bg-info-solid)}.x-button.x-button-appearance-solid.x-button-color-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.x-button-appearance-solid.x-button-color-info:not(: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.x-button-appearance-solid.x-button-color-info:not(: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.x-button-appearance-subtle.x-button-color-default{--x-button-wave-color: var(--x-button-color-wave-default)}.x-button.x-button-appearance-subtle.x-button-color-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-appearance-subtle.x-button-color-default:not(:disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-appearance-subtle.x-button-color-default:not(:disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-appearance-subtle.x-button-color-default{--x-button-group-separator-color: var(--x-color-transparent)}.x-button.x-button-appearance-subtle.x-button-color-primary{--x-button-wave-color: var(--x-button-color-wave-primary)}.x-button.x-button-appearance-subtle.x-button-color-primary{--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.x-button-appearance-subtle.x-button-color-primary:not(: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.x-button-appearance-subtle.x-button-color-primary:not(: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.x-button-appearance-subtle.x-button-color-primary{--x-button-group-separator-color: var(--x-color-transparent)}.x-button.x-button-appearance-subtle.x-button-color-success{--x-button-wave-color: var(--x-button-color-wave-success)}.x-button.x-button-appearance-subtle.x-button-color-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-appearance-subtle.x-button-color-success:not(: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-appearance-subtle.x-button-color-success:not(: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-appearance-subtle.x-button-color-success{--x-button-group-separator-color: var(--x-color-transparent)}.x-button.x-button-appearance-subtle.x-button-color-warning{--x-button-wave-color: var(--x-button-color-wave-warning)}.x-button.x-button-appearance-subtle.x-button-color-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-appearance-subtle.x-button-color-warning:not(: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-appearance-subtle.x-button-color-warning:not(: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-appearance-subtle.x-button-color-warning{--x-button-group-separator-color: var(--x-color-transparent)}.x-button.x-button-appearance-subtle.x-button-color-strong{--x-button-wave-color: var(--x-button-color-wave-strong)}.x-button.x-button-appearance-subtle.x-button-color-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-appearance-subtle.x-button-color-strong:not(: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-appearance-subtle.x-button-color-strong:not(: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-appearance-subtle.x-button-color-strong{--x-button-group-separator-color: var(--x-color-transparent)}.x-button.x-button-appearance-subtle.x-button-color-danger{--x-button-wave-color: var(--x-button-color-wave-danger)}.x-button.x-button-appearance-subtle.x-button-color-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-appearance-subtle.x-button-color-danger:not(: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-appearance-subtle.x-button-color-danger:not(: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-appearance-subtle.x-button-color-danger{--x-button-group-separator-color: var(--x-color-transparent)}.x-button.x-button-appearance-subtle.x-button-color-info{--x-button-wave-color: var(--x-button-color-wave-info)}.x-button.x-button-appearance-subtle.x-button-color-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-appearance-subtle.x-button-color-info:not(: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-appearance-subtle.x-button-color-info:not(: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.x-button-appearance-subtle.x-button-color-info{--x-button-group-separator-color: var(--x-color-transparent)}.x-button.x-button-appearance-outline{--x-button-wave-opacity: var(--x-button-wave-opacity-strong)}.x-button.x-button-appearance-outline.x-button-color-default{--x-button-wave-color: var(--x-button-color-wave-default);--x-button-border-style: solid}.x-button.x-button-appearance-outline.x-button-color-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-appearance-outline.x-button-color-default:not(:disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-outline-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-appearance-outline.x-button-color-default:not(:disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-outline-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-appearance-outline.x-button-color-primary{--x-button-wave-color: var(--x-button-color-wave-primary);--x-button-border-style: solid}.x-button.x-button-appearance-outline.x-button-color-primary{--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.x-button-appearance-outline.x-button-color-primary:not(:disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-outline-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button.x-button-appearance-outline.x-button-color-primary:not(:disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-outline-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button.x-button-appearance-outline.x-button-color-success{--x-button-wave-color: var(--x-button-color-wave-success);--x-button-border-style: solid}.x-button.x-button-appearance-outline.x-button-color-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.x-button-appearance-outline.x-button-color-success:not(:disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-outline-hover);--x-button-border-color: var(--x-button-color-border-success)}.x-button.x-button-appearance-outline.x-button-color-success:not(:disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-outline-active);--x-button-border-color: var(--x-button-color-border-success)}.x-button.x-button-appearance-outline.x-button-color-warning{--x-button-wave-color: var(--x-button-color-wave-warning);--x-button-border-style: solid}.x-button.x-button-appearance-outline.x-button-color-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.x-button-appearance-outline.x-button-color-warning:not(:disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-outline-hover);--x-button-border-color: var(--x-button-color-border-warning)}.x-button.x-button-appearance-outline.x-button-color-warning:not(:disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-outline-active);--x-button-border-color: var(--x-button-color-border-warning)}.x-button.x-button-appearance-outline.x-button-color-strong{--x-button-wave-color: var(--x-button-color-wave-strong);--x-button-border-style: solid}.x-button.x-button-appearance-outline.x-button-color-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.x-button-appearance-outline.x-button-color-strong:not(:disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-outline-hover);--x-button-border-color: var(--x-button-color-border-strong)}.x-button.x-button-appearance-outline.x-button-color-strong:not(:disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-outline-active);--x-button-border-color: var(--x-button-color-border-strong)}.x-button.x-button-appearance-outline.x-button-color-danger{--x-button-wave-color: var(--x-button-color-wave-danger);--x-button-border-style: solid}.x-button.x-button-appearance-outline.x-button-color-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.x-button-appearance-outline.x-button-color-danger:not(:disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-outline-hover);--x-button-border-color: var(--x-button-color-border-danger)}.x-button.x-button-appearance-outline.x-button-color-danger:not(:disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-outline-active);--x-button-border-color: var(--x-button-color-border-danger)}.x-button.x-button-appearance-outline.x-button-color-info{--x-button-wave-color: var(--x-button-color-wave-info);--x-button-border-style: solid}.x-button.x-button-appearance-outline.x-button-color-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.x-button-appearance-outline.x-button-color-info:not(:disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-outline-hover);--x-button-border-color: var(--x-button-color-border-info)}.x-button.x-button-appearance-outline.x-button-color-info:not(:disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-outline-active);--x-button-border-color: var(--x-button-color-border-info)}.x-button.x-button-appearance-dashed{--x-button-wave-opacity: var(--x-button-wave-opacity-strong)}.x-button.x-button-appearance-dashed.x-button-color-default{--x-button-wave-color: var(--x-button-color-wave-default);--x-button-border-style: dashed}.x-button.x-button-appearance-dashed.x-button-color-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-appearance-dashed.x-button-color-default:not(:disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-outline-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-appearance-dashed.x-button-color-default:not(:disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-outline-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-appearance-dashed.x-button-color-primary{--x-button-wave-color: var(--x-button-color-wave-primary);--x-button-border-style: dashed}.x-button.x-button-appearance-dashed.x-button-color-primary{--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.x-button-appearance-dashed.x-button-color-primary:not(:disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-outline-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button.x-button-appearance-dashed.x-button-color-primary:not(:disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-outline-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button.x-button-appearance-dashed.x-button-color-success{--x-button-wave-color: var(--x-button-color-wave-success);--x-button-border-style: dashed}.x-button.x-button-appearance-dashed.x-button-color-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.x-button-appearance-dashed.x-button-color-success:not(:disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-outline-hover);--x-button-border-color: var(--x-button-color-border-success)}.x-button.x-button-appearance-dashed.x-button-color-success:not(:disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-outline-active);--x-button-border-color: var(--x-button-color-border-success)}.x-button.x-button-appearance-dashed.x-button-color-warning{--x-button-wave-color: var(--x-button-color-wave-warning);--x-button-border-style: dashed}.x-button.x-button-appearance-dashed.x-button-color-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.x-button-appearance-dashed.x-button-color-warning:not(:disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-outline-hover);--x-button-border-color: var(--x-button-color-border-warning)}.x-button.x-button-appearance-dashed.x-button-color-warning:not(:disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-outline-active);--x-button-border-color: var(--x-button-color-border-warning)}.x-button.x-button-appearance-dashed.x-button-color-strong{--x-button-wave-color: var(--x-button-color-wave-strong);--x-button-border-style: dashed}.x-button.x-button-appearance-dashed.x-button-color-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.x-button-appearance-dashed.x-button-color-strong:not(:disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-outline-hover);--x-button-border-color: var(--x-button-color-border-strong)}.x-button.x-button-appearance-dashed.x-button-color-strong:not(:disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-outline-active);--x-button-border-color: var(--x-button-color-border-strong)}.x-button.x-button-appearance-dashed.x-button-color-danger{--x-button-wave-color: var(--x-button-color-wave-danger);--x-button-border-style: dashed}.x-button.x-button-appearance-dashed.x-button-color-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.x-button-appearance-dashed.x-button-color-danger:not(:disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-outline-hover);--x-button-border-color: var(--x-button-color-border-danger)}.x-button.x-button-appearance-dashed.x-button-color-danger:not(:disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-outline-active);--x-button-border-color: var(--x-button-color-border-danger)}.x-button.x-button-appearance-dashed.x-button-color-info{--x-button-wave-color: var(--x-button-color-wave-info);--x-button-border-style: dashed}.x-button.x-button-appearance-dashed.x-button-color-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.x-button-appearance-dashed.x-button-color-info:not(:disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-outline-hover);--x-button-border-color: var(--x-button-color-border-info)}.x-button.x-button-appearance-dashed.x-button-color-info:not(:disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-outline-active);--x-button-border-color: var(--x-button-color-border-info)}.x-button.x-button-appearance-text.x-button-color-default{--x-button-wave-color: var(--x-button-color-wave-default)}.x-button.x-button-appearance-text.x-button-color-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-appearance-text.x-button-color-default:not(:disabled):hover{--x-button-text-color: var(--x-button-color-text-default-hover);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-appearance-text.x-button-color-default:not(:disabled):active{--x-button-text-color: var(--x-button-color-text-default-active);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-appearance-text.x-button-color-primary{--x-button-wave-color: var(--x-button-color-wave-primary)}.x-button.x-button-appearance-text.x-button-color-primary{--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.x-button-appearance-text.x-button-color-primary:not(:disabled):hover{--x-button-text-color: var(--x-button-color-text-primary-hover);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-appearance-text.x-button-color-primary:not(:disabled):active{--x-button-text-color: var(--x-button-color-text-primary-active);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-appearance-text.x-button-color-success{--x-button-wave-color: var(--x-button-color-wave-success)}.x-button.x-button-appearance-text.x-button-color-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.x-button-appearance-text.x-button-color-success:not(:disabled):hover{--x-button-text-color: var(--x-button-color-text-success-hover);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-appearance-text.x-button-color-success:not(:disabled):active{--x-button-text-color: var(--x-button-color-text-success-active);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-appearance-text.x-button-color-warning{--x-button-wave-color: var(--x-button-color-wave-warning)}.x-button.x-button-appearance-text.x-button-color-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.x-button-appearance-text.x-button-color-warning:not(:disabled):hover{--x-button-text-color: var(--x-button-color-text-warning-hover);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-appearance-text.x-button-color-warning:not(:disabled):active{--x-button-text-color: var(--x-button-color-text-warning-active);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-appearance-text.x-button-color-strong{--x-button-wave-color: var(--x-button-color-wave-strong)}.x-button.x-button-appearance-text.x-button-color-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.x-button-appearance-text.x-button-color-strong:not(:disabled):hover{--x-button-text-color: var(--x-button-color-text-strong-hover);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-appearance-text.x-button-color-strong:not(:disabled):active{--x-button-text-color: var(--x-button-color-text-strong-active);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-appearance-text.x-button-color-danger{--x-button-wave-color: var(--x-button-color-wave-danger)}.x-button.x-button-appearance-text.x-button-color-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.x-button-appearance-text.x-button-color-danger:not(:disabled):hover{--x-button-text-color: var(--x-button-color-text-danger-hover);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-appearance-text.x-button-color-danger:not(:disabled):active{--x-button-text-color: var(--x-button-color-text-danger-active);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-appearance-text.x-button-color-info{--x-button-wave-color: var(--x-button-color-wave-info)}.x-button.x-button-appearance-text.x-button-color-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.x-button-appearance-text.x-button-color-info:not(:disabled):hover{--x-button-text-color: var(--x-button-color-text-info-hover);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-appearance-text.x-button-color-info:not(:disabled):active{--x-button-text-color: var(--x-button-color-text-info-active);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-hide-border,.x-button.x-button-hide-border:not(:disabled):hover,.x-button.x-button-hide-border:not(:disabled):active{border-color:var(--x-color-transparent)}.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>.x-button--loading{position:absolute;inset:0;z-index:2;justify-content:center;align-items:center;border-radius:inherit;color:var(--x-button-text-color);background-color:var(--x-button-background-color);pointer-events:none;transition:opacity .2s ease}@media(prefers-reduced-motion: reduce){.x-button-loading-fill>.x-button--loading{transition:none}}.x-button-loading-fill.x-button-loading>.x-button--prefix,.x-button-loading-fill.x-button-loading>.x-button--content,.x-button-loading-fill.x-button-loading>.x-button--suffix{opacity:0}.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);line-height:1.5}.x-button-round{--x-button-border-radius: 999px}.x-button-square{--x-button-border-radius: var(--x-border-radius-none)}.x-button.x-button-only-icon{--x-button-width: var(--x-button-height);--x-button-padding: 0}.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:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.x-button-group>.x-button:not(:first-child){margin-left:-1px}.x-button-group>.x-button:not(:first-child).x-button-has-border{border-left-color:var(--x-button-group-separator-color, var(--x-button-group-color-separator))}.x-button-group>.x-button:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.x-button-group>.x-button:not(:disabled):hover{z-index:1}.x-button-group>.x-button:focus-visible{z-index:2}
package/dist/style/color-picker.css CHANGED
@@ -1 +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.x-color-picker-size-mini{--x-color-picker-size-trigger: var(--x-input-size-mini-height)}.x-color-picker.x-color-picker-size-small{--x-color-picker-size-trigger: var(--x-input-size-small-height)}.x-color-picker.x-color-picker-size-medium{--x-color-picker-size-trigger: var(--x-input-size-medium-height)}.x-color-picker.x-color-picker-size-large{--x-color-picker-size-trigger: var(--x-input-size-large-height)}.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-error .x-color-picker--trigger{border-color:var(--x-color-danger-solid)}.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:min(var(--x-color-picker-size-trigger-color),var(--x-color-picker-size-trigger) - 8px);height:min(var(--x-color-picker-size-trigger-color),var(--x-color-picker-size-trigger) - 8px);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;touch-action:none}.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}
1
+ :root{--x-color-picker-color-mode-bg_active: var(--x-color-primary-subtle);--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.x-color-picker-size-mini{--x-color-picker-size-trigger: var(--x-input-size-mini-height)}.x-color-picker.x-color-picker-size-small{--x-color-picker-size-trigger: var(--x-input-size-small-height)}.x-color-picker.x-color-picker-size-medium{--x-color-picker-size-trigger: var(--x-input-size-medium-height)}.x-color-picker.x-color-picker-size-large{--x-color-picker-size-trigger: var(--x-input-size-large-height)}.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-error .x-color-picker--trigger{border-color:var(--x-color-danger-solid)}.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:min(var(--x-color-picker-size-trigger-color),var(--x-color-picker-size-trigger) - 8px);height:min(var(--x-color-picker-size-trigger-color),var(--x-color-picker-size-trigger) - 8px);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;touch-action:none}.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-picker-color-mode-bg_active)}.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/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.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)}
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{display:flex;align-items:center;justify-content:center;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;text-align:center}.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:2px;overflow:hidden;color:var(--x-color-text-2);font-size:var(--x-font-size-body-1);line-height:14px;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{color:inherit;background:var(--x-color-transparent)}.x-date-picker--cell.x-date-picker-is-disabled .x-date-picker--cell-lunar,.x-date-picker--cell:disabled .x-date-picker--cell-lunar{color:var(--x-date-picker-cell-color-disabled)}.x-date-picker--cell.x-date-picker-is-disabled::after,.x-date-picker--cell:disabled::after{opacity:0}.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;justify-content:flex-start;height:calc(var(--x-date-picker-cell-size) + 18px)}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell::after{top:calc(var(--x-date-picker-cell-size) - 7px);bottom:auto}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell-date{width:100%;flex:0 0 var(--x-date-picker-cell-size);height:var(--x-date-picker-cell-size);border-radius:0}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell-inner{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)}.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.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{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::before{top:calc(var(--x-date-picker-cell-size)/2)}.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--footer-btn:disabled{color:var(--x-color-text-4);background:var(--x-color-transparent);cursor:not-allowed}.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/dialog.css CHANGED
@@ -1 +1 @@
1
- .x-dialog{--x-mask-background-color: var(--x-color-overlay-mask);--x-dialog-radius: var(--x-border-radius-large);--x-dialog-bg-color: var(--x-color-bg-elevated);--x-dialog-text-color: var(--x-color-text-elevated-body);--x-dialog-title-color: var(--x-color-text-elevated-title);--x-dialog-close-icon-color: var(--x-color-icon-elevated);--x-dialog-close-icon-hover-bg: var(--x-color-icon-elevated-hover-bg);--x-dialog-close-icon-hover-color: var(--x-color-icon-elevated-hover);--x-dialog-shadow: var(--x-shadow-modal)}.x-dialog{position:fixed;top:0;right:0;bottom:0;left:0}.x-dialog[style*="display: none"]{pointer-events:none}.x-dialog--mask{position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--x-mask-background-color)}.x-dialog--wrapper{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto;text-align:center}.x-dialog--wrapper.is-center{display:flex;justify-content:center;align-items:center}.x-dialog--container{position:relative;display:inline-block;overflow:hidden;border-radius:var(--x-dialog-radius);background-color:var(--x-dialog-bg-color);box-shadow:var(--x-dialog-shadow);transition:all .15s;outline:none}.x-dialog--container.is-fullscreen{display:inline-flex;border-radius:0;width:100%;height:100%;flex-direction:column;vertical-align:middle}.x-dialog--container.is-fullscreen .x-dialog--footer{margin-top:auto}.x-dialog--header{position:relative;padding:25px 48px 0 25px;text-align:left;box-sizing:border-box}.x-dialog--header-title{overflow:hidden;font-size:18px;font-weight:700;color:var(--x-dialog-title-color);text-overflow:ellipsis;white-space:nowrap;line-height:1}.x-dialog--header.is-bottom-line{border-bottom:1px solid var(--x-split-color);padding-bottom:20px}.x-dialog--body{padding:15px 25px 15px;box-sizing:border-box;text-align:left}.x-dialog--content{line-height:1.6;color:var(--x-dialog-text-color);font-size:14px}.x-dialog--footer{display:flex;justify-content:flex-end;padding:0 18px 18px 25px}.x-dialog--close-icon{position:absolute;top:18px;right:18px;padding:0;width:16px;height:16px;border:0;appearance:none;background:var(--x-color-transparent);cursor:pointer;transition:background-color .5s ease}.x-dialog--close-icon:focus-visible{outline:2px solid var(--x-color-primary-text);outline-offset:2px}.x-dialog--close-icon:hover{background-color:var(--x-dialog-close-icon-hover-bg);transition:background-color .5s ease}.x-dialog--close-icon:hover::before,.x-dialog--close-icon:hover::after{background-color:var(--x-dialog-close-icon-hover-color);transition:background-color .5s ease}.x-dialog--close-icon::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) rotate(45deg);width:1px;height:100%;background-color:var(--x-dialog-close-icon-color);transition:background-color .5s ease}.x-dialog--close-icon::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) rotate(-45deg);width:1px;height:100%;background-color:var(--x-dialog-close-icon-color);transition:background-color .5s ease}
1
+ .x-dialog{--x-mask-background-color: var(--x-color-overlay-mask);--x-dialog-radius: var(--x-border-radius-large);--x-dialog-bg-color: var(--x-color-bg-elevated);--x-dialog-text-color: var(--x-color-text-elevated-body);--x-dialog-title-color: var(--x-color-text-elevated-title);--x-dialog-close-icon-color: var(--x-color-icon-elevated);--x-dialog-close-icon-hover-bg: var(--x-color-icon-elevated-hover-bg);--x-dialog-close-icon-hover-color: var(--x-color-icon-elevated-hover);--x-dialog-shadow: var(--x-shadow-modal)}.x-dialog{position:fixed;top:0;right:0;bottom:0;left:0}.x-dialog[style*="display: none"]{pointer-events:none}.x-dialog--mask{position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--x-mask-background-color)}.x-dialog--wrapper{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto;text-align:center}.x-dialog--wrapper.is-center{display:flex;justify-content:center;align-items:center}.x-dialog--container{position:relative;display:inline-block;overflow:hidden;border-radius:var(--x-dialog-radius);background-color:var(--x-dialog-bg-color);box-shadow:var(--x-dialog-shadow);transition:all .15s;outline:none}.x-dialog--container.is-fullscreen{display:inline-flex;border-radius:0;width:100%;height:100%;flex-direction:column;vertical-align:middle}.x-dialog--container.is-fullscreen .x-dialog--footer{margin-top:auto}.x-dialog--header{position:relative;padding:25px 48px 0 25px;text-align:left;box-sizing:border-box}.x-dialog--header-title{overflow:hidden;font-size:18px;font-weight:700;color:var(--x-dialog-title-color);text-overflow:ellipsis;white-space:nowrap;line-height:1}.x-dialog--header.is-bottom-line{border-bottom:1px solid var(--x-split-color);padding-bottom:20px}.x-dialog--body{padding:15px 25px 15px;box-sizing:border-box;text-align:left}.x-dialog--content{line-height:1.6;color:var(--x-dialog-text-color);font-size:14px}.x-dialog--footer{display:flex;justify-content:flex-end;padding:0 18px 18px 25px}.x-dialog--close-icon{position:absolute;top:22px;right:14px;display:inline-flex;align-items:center;justify-content:center;padding:0;width:24px;height:24px;border:0;border-radius:var(--x-border-radius-small);appearance:none;color:var(--x-dialog-close-icon-color);background:var(--x-color-transparent);cursor:pointer;transition:color .15s ease,background-color .15s ease}.x-dialog--close-icon:focus-visible{outline:2px solid var(--x-color-primary-text);outline-offset:2px}.x-dialog--close-icon:hover{background-color:var(--x-dialog-close-icon-hover-bg);color:var(--x-dialog-close-icon-hover-color)}
package/dist/style/link.css CHANGED
@@ -1 +1 @@
1
- :root{--x-link-color-text: var(--x-color-primary-text);--x-link-color-text-success: var(--x-color-success-text);--x-link-color-text-warning: var(--x-color-warning-text);--x-link-color-text-danger: var(--x-color-danger-text);--x-link-color-text-strong: var(--x-color-strong-text);--x-link-color-text-disabled: var(--x-color-text-disabled);--x-link-color-text-loading: var(--x-color-text-secondary);--x-link-color-bg-active: var(--x-color-fill-3);--x-link-color-focus: var(--x-color-primary-text);--x-link-background-color: var(--x-color-primary-1);--x-link-success-background-color: var(--x-color-success-1);--x-link-danger-background-color: var(--x-color-danger-1);--x-link-warning-background-color: var(--x-color-warning-1);--x-link-strong-background-color: var(--x-color-strong-1)}.x-link{display:inline-flex;align-items:center;justify-content:center;padding:1px var(--x-spacing-2);--x-link-current-color: var(--x-link-color-text);--x-link-current-hover-bg: var(--x-link-background-color);color:var(--x-link-current-color);font-size:var(--x-font-size-body-3);line-height:var(--x-line-height-base);text-decoration:none;background-color:var(--x-color-transparent);border-radius:var(--x-border-radius-small);cursor:pointer;transition:all var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-link:not(.x-link-disabled):not(.x-link-loading):not(.x-link-hoverless):hover{background-color:var(--x-link-current-hover-bg)}.x-link:not(.x-link-disabled):not(.x-link-loading):not(.x-link-hoverless):active{background-color:var(--x-link-color-bg-active);transition:none}.x-link:focus-visible{outline:2px solid var(--x-link-color-focus);outline-offset:2px}.x-link.x-link-hoverless{display:inline;padding:0}.x-link-status-success{--x-link-current-color: var(--x-link-color-text-success);--x-link-current-hover-bg: var(--x-link-success-background-color)}.x-link-status-danger{--x-link-current-color: var(--x-link-color-text-danger);--x-link-current-hover-bg: var(--x-link-danger-background-color)}.x-link-status-warning{--x-link-current-color: var(--x-link-color-text-warning);--x-link-current-hover-bg: var(--x-link-warning-background-color)}.x-link-status-strong{--x-link-current-color: var(--x-link-color-text-strong);--x-link-current-hover-bg: var(--x-link-strong-background-color)}.x-link.x-link-disabled{color:var(--x-link-color-text-disabled);cursor:not-allowed}.x-link.x-link-loading{color:var(--x-link-color-text-loading);cursor:default}.x-link.x-link-strong{font-weight:bolder}.x-link--icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:1em;height:1em;margin-right:var(--x-spacing-4);font-size:var(--x-size-3);line-height:1;vertical-align:-0.125em}
1
+ :root{--x-link-color-text: var(--x-color-primary-text);--x-link-color-text-success: var(--x-color-success-text);--x-link-color-text-warning: var(--x-color-warning-text);--x-link-color-text-danger: var(--x-color-danger-text);--x-link-color-text-strong: var(--x-color-strong-text);--x-link-color-text-disabled: var(--x-color-text-disabled);--x-link-color-text-loading: var(--x-color-text-secondary);--x-link-color-bg-active: var(--x-color-fill-3);--x-link-color-focus: var(--x-color-primary-text);--x-link-background-color: var(--x-color-primary-subtle);--x-link-success-background-color: var(--x-color-success-subtle);--x-link-danger-background-color: var(--x-color-danger-subtle);--x-link-warning-background-color: var(--x-color-warning-subtle);--x-link-strong-background-color: var(--x-color-strong-subtle)}.x-link{display:inline-flex;align-items:center;justify-content:center;padding:1px var(--x-spacing-2);--x-link-current-color: var(--x-link-color-text);--x-link-current-hover-bg: var(--x-link-background-color);color:var(--x-link-current-color);font-size:var(--x-font-size-body-3);line-height:var(--x-line-height-base);text-decoration:none;background-color:var(--x-color-transparent);border-radius:var(--x-border-radius-small);cursor:pointer;transition:all var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-link:not(.x-link-disabled):not(.x-link-loading):not(.x-link-hoverless):hover{background-color:var(--x-link-current-hover-bg)}.x-link:not(.x-link-disabled):not(.x-link-loading):not(.x-link-hoverless):active{background-color:var(--x-link-color-bg-active);transition:none}.x-link:focus-visible{outline:2px solid var(--x-link-color-focus);outline-offset:2px}.x-link.x-link-hoverless{display:inline;padding:0}.x-link-status-success{--x-link-current-color: var(--x-link-color-text-success);--x-link-current-hover-bg: var(--x-link-success-background-color)}.x-link-status-danger{--x-link-current-color: var(--x-link-color-text-danger);--x-link-current-hover-bg: var(--x-link-danger-background-color)}.x-link-status-warning{--x-link-current-color: var(--x-link-color-text-warning);--x-link-current-hover-bg: var(--x-link-warning-background-color)}.x-link-status-strong{--x-link-current-color: var(--x-link-color-text-strong);--x-link-current-hover-bg: var(--x-link-strong-background-color)}.x-link.x-link-disabled{color:var(--x-link-color-text-disabled);cursor:not-allowed}.x-link.x-link-loading{color:var(--x-link-color-text-loading);cursor:default}.x-link.x-link-strong{font-weight:bolder}.x-link--icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:1em;height:1em;margin-right:var(--x-spacing-4);font-size:var(--x-size-3);line-height:1;vertical-align:-0.125em}
package/dist/style/message-box.css CHANGED
@@ -1 +1 @@
1
- .x-message-box{--x-message-box-color-title: var(--x-color-text-elevated-title);--x-message-box-color-content: var(--x-color-text-elevated-body);--x-message-box-color-icon-warning: var(--x-color-warning-text);--x-message-box-color-icon-strong: var(--x-color-strong-text);--x-message-box-color-icon-error: var(--x-color-danger-text);--x-message-box-color-icon-success: var(--x-color-success-text);--x-message-box-color-icon-info: var(--x-color-primary-text)}.x-message-box--header{padding:25px 0 10px;line-height:1;display:flex;justify-content:center;align-items:center}.x-message-box--body{padding:0 25px;box-sizing:border-box;text-align:center}.x-message-box--footer{padding:15px 0 20px;box-sizing:border-box}.x-message-box--icon{margin-right:4px}.x-message-box-icon-warning{color:var(--x-message-box-color-icon-warning)}.x-message-box-icon-strong{color:var(--x-message-box-color-icon-strong)}.x-message-box-icon-error{color:var(--x-message-box-color-icon-error)}.x-message-box-icon-success{color:var(--x-message-box-color-icon-success)}.x-message-box-icon-info{color:var(--x-message-box-color-icon-info)}.x-message-box--title{font-size:18px;font-weight:600;color:var(--x-message-box-color-title);line-height:1}.x-message-box--content{font-size:15px;font-weight:400;color:var(--x-message-box-color-content);line-height:1.5}.x-message-box--close-icon{top:28px;right:20px}
1
+ .x-message-box{--x-message-box-color-title: var(--x-color-text-elevated-title);--x-message-box-color-content: var(--x-color-text-elevated-body);--x-message-box-color-icon-warning: var(--x-color-warning-text);--x-message-box-color-icon-strong: var(--x-color-strong-text);--x-message-box-color-icon-error: var(--x-color-danger-text);--x-message-box-color-icon-success: var(--x-color-success-text);--x-message-box-color-icon-info: var(--x-color-primary-text)}.x-message-box--header{padding:25px 0 10px;line-height:1;display:flex;justify-content:center;align-items:center}.x-message-box--body{padding:0 25px;box-sizing:border-box;text-align:center}.x-message-box--footer{padding:15px 0 20px;box-sizing:border-box}.x-message-box--icon{margin-right:4px}.x-message-box-icon-warning{color:var(--x-message-box-color-icon-warning)}.x-message-box-icon-strong{color:var(--x-message-box-color-icon-strong)}.x-message-box-icon-error{color:var(--x-message-box-color-icon-error)}.x-message-box-icon-success{color:var(--x-message-box-color-icon-success)}.x-message-box-icon-info{color:var(--x-message-box-color-icon-info)}.x-message-box--title{font-size:18px;font-weight:600;color:var(--x-message-box-color-title);line-height:1}.x-message-box--content{font-size:15px;font-weight:400;color:var(--x-message-box-color-content);line-height:1.5}.x-message-box--close-icon{top:24px;right:16px}