x-next 1.3.1 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AI_USAGE.md +2 -2
- package/CHANGELOG.md +36 -0
- package/dist/_utils/constant.d.ts +1 -1
- package/dist/_utils/palette.d.ts +6 -14
- package/dist/components/alert/Alert.vue.d.ts +9 -9
- package/dist/components/alert/index.d.ts +6 -6
- package/dist/components/button/ButtonGroup.vue.d.ts +22 -18
- package/dist/components/date-picker/DatePanel.vue.d.ts +342 -1
- package/dist/components/date-picker/DatePicker.vue.d.ts +343 -2
- package/dist/components/date-picker/index.d.ts +1765 -1083
- package/dist/components/form-input-tag/index.d.ts +26 -25
- package/dist/components/form-input-tag/interface.d.ts +8 -0
- package/dist/components/link/Link.vue.d.ts +4 -4
- package/dist/components/link/index.d.ts +6 -6
- package/dist/components/message/index.d.ts +3 -3
- package/dist/components/message/message.vue.d.ts +1 -1
- package/dist/components/notification/Notification.d.ts +1 -1
- package/dist/components/notification/index.d.ts +3 -3
- package/dist/components/popconfirm/src/types.d.ts +1 -1
- package/dist/components/progress/Progress.vue.d.ts +3 -3
- package/dist/components/progress/index.d.ts +3 -3
- package/dist/components/tag/Tag.vue.d.ts +14 -0
- package/dist/components/tag/index.d.ts +9 -0
- package/dist/components/tag/interface.d.ts +5 -0
- package/dist/components/trend-chart/components/TrendChart.d.ts +127 -17
- package/dist/components/trend-chart/components/trend-chart-curve.d.ts +27 -7
- package/dist/components/trend-chart/components/trend-chart-labels.d.ts +4 -0
- package/dist/components/trend-chart/helpers/getPadding.d.ts +3 -2
- package/dist/components/trend-chart/index.d.ts +223 -28
- package/dist/components/trend-chart/props.d.ts +63 -5
- package/dist/es/_styles/palette-aliases.js +182 -127
- package/dist/es/_utils/palette.js +49 -43
- package/dist/es/components/_components/picker/input-range.vue2.js +10 -10
- package/dist/es/components/_components/picker/input.vue2.js +20 -20
- package/dist/es/components/_components/select-view/select-view.js +2 -2
- package/dist/es/components/alert/Alert.vue.js +2 -2
- package/dist/es/components/alert/Alert.vue2.js +21 -20
- package/dist/es/components/button/Button.js +17 -17
- package/dist/es/components/button/ButtonGroup.vue2.js +11 -9
- package/dist/es/components/date-picker/DatePanel.vue.js +71 -62
- package/dist/es/components/date-picker/DatePanel.vue2.js +50 -40
- package/dist/es/components/date-picker/DatePicker.vue2.js +1 -1
- package/dist/es/components/form/form-item-label.vue.js +25 -22
- package/dist/es/components/form/form-item-label.vue2.js +1 -1
- package/dist/es/components/form-checkbox/icon-check.js +12 -43
- package/dist/es/components/form-input/InputPassword.vue2.js +2 -2
- package/dist/es/components/form-input/InputSearch.js +1 -1
- package/dist/es/components/form-input-number/InputNumber.js +4 -4
- package/dist/es/components/form-input-tag/InputTag.js +168 -147
- package/dist/es/components/form-input-tag/utils.js +21 -19
- package/dist/es/components/form-textarea/Textarea.vue2.js +1 -1
- package/dist/es/components/link/Link.vue2.js +1 -1
- package/dist/es/components/popconfirm/src/popup.vue.js +1 -1
- package/dist/es/components/progress/Progress.vue2.js +1 -1
- package/dist/es/components/table/Table.js +1 -1
- package/dist/es/components/table/table-th.js +2 -2
- package/dist/es/components/tabs/tabs-button.js +2 -2
- package/dist/es/components/tabs/tabs-nav.js +1 -1
- package/dist/es/components/tag/Tag.vue.js +20 -20
- package/dist/es/components/tag/Tag.vue2.js +35 -28
- package/dist/es/components/time-picker/TimePanel.vue.js +30 -29
- package/dist/es/components/time-picker/TimePicker.vue2.js +1 -1
- package/dist/es/components/time-picker/TimeRangePanel.js +26 -23
- package/dist/es/components/trend-chart/components/TrendChart.js +208 -142
- package/dist/es/components/trend-chart/components/trend-chart-curve.js +124 -59
- package/dist/es/components/trend-chart/components/trend-chart-labels.js +43 -41
- package/dist/es/components/trend-chart/helpers/getPadding.js +3 -3
- package/dist/es/components/trend-chart/props.js +101 -33
- package/dist/es/components/trend-chart/themes.js +15 -15
- package/dist/es/components/watermark/controller.js +40 -40
- package/dist/es/icons/default/calendar.js +15 -0
- package/dist/es/icons/default/clock-circle.js +15 -0
- package/dist/es/icons/default/double-left.js +15 -0
- package/dist/es/icons/default/double-right.js +15 -0
- package/dist/es/icons/default/down.js +16 -0
- package/dist/es/icons/default/eye-invisible.js +20 -0
- package/dist/es/icons/default/eye.js +18 -0
- package/dist/es/icons/default/left.js +15 -0
- package/dist/es/icons/default/minus.js +16 -0
- package/dist/es/icons/default/plus.js +16 -0
- package/dist/es/icons/default/question-circle.js +18 -0
- package/dist/es/icons/default/right.js +15 -0
- package/dist/es/icons/default/search.js +16 -0
- package/dist/es/icons/default/up.js +16 -0
- package/dist/es/icons/icon.js +26 -25
- package/dist/es/icons/public/boxicons/basic.js +1893 -0
- package/dist/es/icons/public/boxicons/brands.js +304 -0
- package/dist/es/icons/public/boxicons/filled.js +1893 -0
- package/dist/es/icons/public/boxicons/index.js +24 -0
- package/dist/es/icons/public/boxicons/names.js +4082 -0
- package/dist/es/icons/registry.js +15 -15
- package/dist/es/style.css +1 -1
- package/dist/icons/default/calendar.d.ts +93 -0
- package/dist/icons/default/clock-circle.d.ts +93 -0
- package/dist/icons/{_self/down.d.ts → default/double-left.d.ts} +6 -0
- package/dist/icons/{_self/eye-invisible.d.ts → default/double-right.d.ts} +6 -0
- package/dist/icons/default/down.d.ts +93 -0
- package/dist/icons/default/eye-invisible.d.ts +93 -0
- package/dist/icons/default/eye.d.ts +93 -0
- package/dist/icons/{_self/eye.d.ts → default/left.d.ts} +7 -0
- package/dist/icons/default/minus.d.ts +93 -0
- package/dist/icons/{_self → default}/plus.d.ts +7 -0
- package/dist/icons/default/question-circle.d.ts +93 -0
- package/dist/icons/{_self/minus.d.ts → default/right.d.ts} +7 -0
- package/dist/icons/{_self → default}/search.d.ts +7 -0
- package/dist/icons/{_self → default}/up.d.ts +7 -0
- package/dist/icons/public/boxicons/basic.cjs +1 -0
- package/dist/icons/public/boxicons/basic.d.ts +2 -0
- package/dist/icons/public/boxicons/brands.cjs +1 -0
- package/dist/icons/public/boxicons/brands.d.ts +2 -0
- package/dist/icons/public/boxicons/filled.cjs +1 -0
- package/dist/icons/public/boxicons/filled.d.ts +2 -0
- package/dist/icons/public/boxicons/index.cjs +1 -0
- package/dist/icons/public/boxicons/index.d.ts +10 -0
- package/dist/icons/public/boxicons/names.d.ts +10 -0
- package/dist/icons/registry.d.ts +5 -0
- package/dist/index.cjs +4 -4
- package/dist/index.umd.js +4 -4
- package/dist/style/alert.css +1 -1
- package/dist/style/base.css +1 -1
- package/dist/style/button.css +1 -1
- package/dist/style/date-picker.css +1 -1
- package/dist/style/dialog.css +1 -1
- package/dist/style/drawer.css +1 -1
- package/dist/style/dropdown.css +1 -1
- package/dist/style/form-input-number.css +1 -1
- package/dist/style/form-input-tag.css +1 -1
- package/dist/style/form-input.css +1 -1
- package/dist/style/form-radio.css +1 -1
- package/dist/style/form-select.css +1 -1
- package/dist/style/form-textarea.css +1 -1
- package/dist/style/form.css +1 -1
- package/dist/style/link.css +1 -1
- package/dist/style/menu.css +1 -1
- package/dist/style/message-box.css +1 -1
- package/dist/style/network.css +1 -1
- package/dist/style/popconfirm.css +1 -1
- package/dist/style/popover.css +1 -1
- package/dist/style/popup.css +1 -1
- package/dist/style/progress.css +1 -1
- package/dist/style/rate.css +1 -1
- package/dist/style/spin.css +1 -1
- package/dist/style/steps.css +1 -1
- package/dist/style/table.css +1 -1
- package/dist/style/tag.css +1 -1
- package/dist/style/time-picker.css +1 -1
- package/dist/style/time-range-selector.css +1 -1
- package/dist/style.css +1 -1
- package/package.json +30 -4
- package/dist/es/icons/_self/down.js +0 -16
- package/dist/es/icons/_self/eye-invisible.js +0 -13
- package/dist/es/icons/_self/eye.js +0 -13
- package/dist/es/icons/_self/minus.js +0 -13
- package/dist/es/icons/_self/plus.js +0 -12
- package/dist/es/icons/_self/question-message.js +0 -12
- package/dist/es/icons/_self/search.js +0 -13
- package/dist/es/icons/_self/up.js +0 -16
- package/dist/es/icons/_ui/calendar.js +0 -13
- package/dist/es/icons/_ui/time.js +0 -12
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-fill-3);--x-button-color-bg-default-active: var(--x-color-fill-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-constant-dark);--x-button-color-text-solid-warning: var(--x-color-constant-dark);--x-button-color-text-solid-strong: var(--x-color-constant-dark);--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-2);--x-button-color-bg-primary-subtle-active: var(--x-color-primary-3);--x-button-color-bg-primary-solid: var(--x-color-primary-solid);--x-button-color-bg-primary-solid-hover: var(--x-color-primary-5);--x-button-color-bg-primary-solid-active: var(--x-color-primary-7);--x-button-color-text-primary: var(--x-color-primary-solid);--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-2);--x-button-color-bg-success-subtle-active: var(--x-color-success-3);--x-button-color-bg-success-solid: var(--x-color-success-solid);--x-button-color-bg-success-solid-hover: var(--x-color-success-5);--x-button-color-bg-success-solid-active: var(--x-color-success-7);--x-button-color-text-success: var(--x-color-success-9);--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-2);--x-button-color-bg-warning-subtle-active: var(--x-color-warning-3);--x-button-color-bg-warning-solid: var(--x-color-warning-solid);--x-button-color-bg-warning-solid-hover: var(--x-color-warning-5);--x-button-color-bg-warning-solid-active: var(--x-color-warning-7);--x-button-color-text-warning: var(--x-color-warning-9);--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-2);--x-button-color-bg-danger-subtle-active: var(--x-color-danger-3);--x-button-color-bg-danger-solid: var(--x-color-constant-danger);--x-button-color-bg-danger-solid-hover: var(--x-color-constant-danger-hover);--x-button-color-bg-danger-solid-active: var(--x-color-constant-danger-active);--x-button-color-text-danger: var(--x-color-danger-9);--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-2);--x-button-color-bg-strong-subtle-active: var(--x-color-strong-3);--x-button-color-bg-strong-solid: var(--x-color-strong-solid);--x-button-color-bg-strong-solid-hover: var(--x-color-strong-5);--x-button-color-bg-strong-solid-active: var(--x-color-strong-7);--x-button-color-text-strong: var(--x-color-strong-9);--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-fill-3);--x-button-color-bg-info-subtle-active: var(--x-color-fill-4);--x-button-color-bg-info-solid: var(--x-color-constant-neutral-strong);--x-button-color-bg-info-solid-hover: var(--x-color-constant-neutral-strong-hover);--x-button-color-bg-info-solid-active: var(--x-color-constant-neutral-strong-active);--x-button-color-text-info: var(--x-color-text-secondary);--x-button-color-border-info: var(--x-color-neutral-5)}.x-button{--x-button-width: auto;--x-button-font-weight: 500;--x-button-opacity: 1;--x-button-border-style: solid;--x-button-border-color: var(--x-button-color-border-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-text-color: var(--x-button-color-text-default);--x-button-padding: 0 0;--x-button-mini-height: var(--x-size-mini);--x-button-mini-font-size: 12px;--x-button-mini-padding: 0 8px;--x-button-mini-border-radius: 4px;--x-button-small-height: var(--x-size-small);--x-button-small-font-size: 13px;--x-button-small-padding: 0 10px;--x-button-small-border-radius: 4px;--x-button-medium-height: var(--x-size-medium);--x-button-medium-font-size: 14px;--x-button-medium-padding: 0 14px;--x-button-medium-border-radius: 4px;--x-button-large-height: var(--x-size-large);--x-button-large-font-size: 14px;--x-button-large-padding: 0 20px;--x-button-large-border-radius: 6px;--x-button-huge-height: var(--x-size-huge);--x-button-huge-font-size: 16px;--x-button-huge-font-weight: 400;--x-button-huge-padding: 0 28px;--x-button-huge-border-radius: 4px}.x-button{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button{position:relative;display:inline-flex;justify-content:center;align-items:center;overflow:visible;margin:0;border-style:var(--x-button-border-style);border-width:1px;border-color:var(--x-button-border-color);border-radius:var(--x-button-border-radius);padding:var(--x-button-padding);width:var(--x-button-width);height:var(--x-button-height);color:var(--x-button-text-color);font-size:var(--x-button-font-size);font-weight:var(--x-button-font-weight);white-space:nowrap;background-color:var(--x-button-background-color);opacity:var(--x-button-opacity);outline:none;transition:color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),border-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear);box-sizing:border-box;appearance:none;user-select:none;vertical-align:bottom;cursor:pointer}.x-button>.x-wave{position:absolute;inset:-1px;z-index:0;border-radius:inherit;pointer-events:none;opacity:.45;box-shadow:0 0 0 0 var(--x-wave-color, currentColor);transition:box-shadow var(--x-transition-duration-4, 0.4s) var(--x-transition-timing-function-standard, ease),opacity var(--x-transition-duration-4, 0.4s) var(--x-transition-timing-function-linear, linear)}.x-button>.x-wave-active{opacity:0;box-shadow:0 0 0 6px var(--x-wave-color, currentColor)}.x-button--prefix{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;margin-right:4px}.x-button--suffix{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;margin-left:4px}.x-button--loading{position:relative;z-index:1;display:flex;transition:all .2s ease}.x-button--content{position:relative;z-index:1;display:flex}.x-button.x-button-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-primary{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid);--x-button-border-color: var(--x-button-color-bg-primary-solid)}.x-button-primary:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-hover);--x-button-border-color: var(--x-button-color-bg-primary-solid-hover)}.x-button-primary:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-active);--x-button-border-color: var(--x-button-color-bg-primary-solid-active)}.x-button-primary.x-button-default{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid);--x-button-border-color: var(--x-button-color-bg-primary-solid)}.x-button-primary.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-hover);--x-button-border-color: var(--x-button-color-bg-primary-solid-hover)}.x-button-primary.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-active);--x-button-border-color: var(--x-button-color-bg-primary-solid-active)}.x-button-primary.x-button-success{--x-button-text-color: var(--x-button-color-text-solid-success);--x-button-background-color: var(--x-button-color-bg-success-solid);--x-button-border-color: var(--x-button-color-bg-success-solid)}.x-button-primary.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-success);--x-button-background-color: var(--x-button-color-bg-success-solid-hover);--x-button-border-color: var(--x-button-color-bg-success-solid-hover)}.x-button-primary.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-success);--x-button-background-color: var(--x-button-color-bg-success-solid-active);--x-button-border-color: var(--x-button-color-bg-success-solid-active)}.x-button-primary.x-button-warning{--x-button-text-color: var(--x-button-color-text-solid-warning);--x-button-background-color: var(--x-button-color-bg-warning-solid);--x-button-border-color: var(--x-button-color-bg-warning-solid)}.x-button-primary.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-warning);--x-button-background-color: var(--x-button-color-bg-warning-solid-hover);--x-button-border-color: var(--x-button-color-bg-warning-solid-hover)}.x-button-primary.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-warning);--x-button-background-color: var(--x-button-color-bg-warning-solid-active);--x-button-border-color: var(--x-button-color-bg-warning-solid-active)}.x-button-primary.x-button-strong{--x-button-text-color: var(--x-button-color-text-solid-strong);--x-button-background-color: var(--x-button-color-bg-strong-solid);--x-button-border-color: var(--x-button-color-bg-strong-solid)}.x-button-primary.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-strong);--x-button-background-color: var(--x-button-color-bg-strong-solid-hover);--x-button-border-color: var(--x-button-color-bg-strong-solid-hover)}.x-button-primary.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-strong);--x-button-background-color: var(--x-button-color-bg-strong-solid-active);--x-button-border-color: var(--x-button-color-bg-strong-solid-active)}.x-button-primary.x-button-danger{--x-button-text-color: var(--x-button-color-text-solid-danger);--x-button-background-color: var(--x-button-color-bg-danger-solid);--x-button-border-color: var(--x-button-color-bg-danger-solid)}.x-button-primary.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-danger);--x-button-background-color: var(--x-button-color-bg-danger-solid-hover);--x-button-border-color: var(--x-button-color-bg-danger-solid-hover)}.x-button-primary.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-danger);--x-button-background-color: var(--x-button-color-bg-danger-solid-active);--x-button-border-color: var(--x-button-color-bg-danger-solid-active)}.x-button-primary.x-button-info{--x-button-text-color: var(--x-button-color-text-solid-info);--x-button-background-color: var(--x-button-color-bg-info-solid);--x-button-border-color: var(--x-button-color-bg-info-solid)}.x-button-primary.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-info);--x-button-background-color: var(--x-button-color-bg-info-solid-hover);--x-button-border-color: var(--x-button-color-bg-info-solid-hover)}.x-button-primary.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-info);--x-button-background-color: var(--x-button-color-bg-info-solid-active);--x-button-border-color: var(--x-button-color-bg-info-solid-active)}.x-button-outline{--x-button-border-style: solid}.x-button-outline{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-default{--x-button-border-style: solid}.x-button-outline.x-button-default{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-success{--x-button-border-style: solid}.x-button-outline.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-success)}.x-button-outline.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle);--x-button-border-color: var(--x-button-color-border-success)}.x-button-outline.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-button-color-border-success)}.x-button-outline.x-button-warning{--x-button-border-style: solid}.x-button-outline.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-outline.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-outline.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-outline.x-button-strong{--x-button-border-style: solid}.x-button-outline.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-outline.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-outline.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-outline.x-button-danger{--x-button-border-style: solid}.x-button-outline.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-outline.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-outline.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-outline.x-button-info{--x-button-border-style: solid}.x-button-outline.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-info)}.x-button-outline.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle);--x-button-border-color: var(--x-button-color-border-info)}.x-button-outline.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-button-color-border-info)}.x-button-dashed{--x-button-border-style: dashed}.x-button-dashed{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-default{--x-button-border-style: dashed}.x-button-dashed.x-button-default{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-success{--x-button-border-style: dashed}.x-button-dashed.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-success)}.x-button-dashed.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle);--x-button-border-color: var(--x-button-color-border-success)}.x-button-dashed.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-button-color-border-success)}.x-button-dashed.x-button-warning{--x-button-border-style: dashed}.x-button-dashed.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-dashed.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-dashed.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-dashed.x-button-strong{--x-button-border-style: dashed}.x-button-dashed.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-dashed.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-dashed.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-dashed.x-button-danger{--x-button-border-style: dashed}.x-button-dashed.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-dashed.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-dashed.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-dashed.x-button-info{--x-button-border-style: dashed}.x-button-dashed.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-info)}.x-button-dashed.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle);--x-button-border-color: var(--x-button-color-border-info)}.x-button-dashed.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-button-color-border-info)}.x-button-text{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-text:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-default{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain{--x-button-font-weight: 500}.x-button-plain{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button-plain.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button-plain.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button-plain.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border{--x-button-font-weight: 500}.x-button-hide-border{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button-hide-border.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button-hide-border.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button-hide-border.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-link{--x-button-height: auto;--x-button-padding: 0;--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent);--x-button-text-color: var(--x-color-primary);min-height:0}.x-button-link:not(.is-disabled):hover{--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent);--x-button-text-color: var(--x-color-primary-5)}.x-button-link:not(.is-disabled):active{--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent);--x-button-text-color: var(--x-color-primary-7)}.x-button-is-disabled{--x-button-opacity: 0.4;cursor:not-allowed}.x-button-block{display:flex;width:100%}.x-button-loading{--x-button-opacity: 0.76}.x-button-loading-fill--loading{position:absolute;inset:0;z-index:1;justify-content:center;align-items:center;color:var(--x-button-text-color);background-color:var(--x-button-background-color)}.x-button-narrow{--x-button-mini-padding: 0 0;--x-button-small-padding: 0 0;--x-button-medium-padding: 0 0;--x-button-large-padding: 0 0;--x-button-huge-padding: 0 0}.x-button-mini{--x-button-height: var(--x-button-mini-height);--x-button-font-size: var(--x-button-mini-font-size);--x-button-padding: var(--x-button-mini-padding);--x-button-border-radius: var(--x-button-mini-border-radius)}.x-button-small{--x-button-height: var(--x-button-small-height);--x-button-font-size: var(--x-button-small-font-size);--x-button-padding: var(--x-button-small-padding);--x-button-border-radius: var(--x-button-small-border-radius)}.x-button-medium{--x-button-height: var(--x-button-medium-height);--x-button-font-size: var(--x-button-medium-font-size);--x-button-padding: var(--x-button-medium-padding);--x-button-border-radius: var(--x-button-medium-border-radius)}.x-button-large{--x-button-height: var(--x-button-large-height);--x-button-font-size: var(--x-button-large-font-size);--x-button-padding: var(--x-button-large-padding);--x-button-border-radius: var(--x-button-large-border-radius)}.x-button-huge{--x-button-height: var(--x-button-huge-height);--x-button-font-size: var(--x-button-huge-font-size);--x-button-font-weight: var(--x-button-huge-font-weight);--x-button-padding: var(--x-button-huge-padding);--x-button-border-radius: var(--x-button-huge-border-radius)}.x-button-round{--x-button-border-radius: var(--x-button-height);height:var(--x-button-height)}.x-button-circle{--x-button-width: var(--x-button-height);--x-button-padding: 0;--x-button-border-radius: 100%;width:var(--x-button-height);height:var(--x-button-height)}.x-button-group{display:flex;width:min-content}.x-button-group>.x-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.x-button-group>.x-button:last-child{margin-left:-1px;border-left-color:hsla(0,0%,100%,.5);border-top-left-radius:0;border-bottom-left-radius:0}.x-button-group>.x-button:not(:first-child):not(:last-child){margin-left:-1px;border-left-color:hsla(0,0%,100%,.5);border-radius:0}
|
|
1
|
+
:root{--x-button-color-bg-default: var(--x-color-fill-2);--x-button-color-bg-default-hover: var(--x-color-neutral-3);--x-button-color-bg-default-active: var(--x-color-neutral-4);--x-button-color-text-default: var(--x-color-text-primary);--x-button-color-border-default: var(--x-color-border-default);--x-button-color-text-solid: var(--x-color-white);--x-button-color-text-solid-primary: var(--x-color-white);--x-button-color-text-solid-success: var(--x-color-white);--x-button-color-text-solid-warning: var(--x-color-white);--x-button-color-text-solid-strong: var(--x-color-white);--x-button-color-text-solid-danger: var(--x-color-white);--x-button-color-text-solid-info: var(--x-color-white);--x-button-color-bg-primary-subtle: var(--x-color-primary-subtle);--x-button-color-bg-primary-subtle-hover: var(--x-color-primary-subtle-hover);--x-button-color-bg-primary-subtle-active: var(--x-color-primary-subtle-active);--x-button-color-bg-primary-solid: var(--x-color-primary-solid);--x-button-color-bg-primary-solid-hover: var(--x-color-primary-solid-hover);--x-button-color-bg-primary-solid-active: var(--x-color-primary-solid-active);--x-button-color-text-primary: var(--x-color-primary-button-text);--x-button-color-border-primary: var(--x-color-primary-solid);--x-button-color-bg-success-subtle: var(--x-color-success-subtle);--x-button-color-bg-success-subtle-hover: var(--x-color-success-subtle-hover);--x-button-color-bg-success-subtle-active: var(--x-color-success-subtle-active);--x-button-color-bg-success-solid: var(--x-color-success-solid);--x-button-color-bg-success-solid-hover: var(--x-color-success-solid-hover);--x-button-color-bg-success-solid-active: var(--x-color-success-solid-active);--x-button-color-text-success: var(--x-color-success-button-text);--x-button-color-border-success: var(--x-color-success-solid);--x-button-color-bg-warning-subtle: var(--x-color-warning-subtle);--x-button-color-bg-warning-subtle-hover: var(--x-color-warning-subtle-hover);--x-button-color-bg-warning-subtle-active: var(--x-color-warning-subtle-active);--x-button-color-bg-warning-solid: var(--x-color-warning-solid);--x-button-color-bg-warning-solid-hover: var(--x-color-warning-solid-hover);--x-button-color-bg-warning-solid-active: var(--x-color-warning-solid-active);--x-button-color-text-warning: var(--x-color-warning-button-text);--x-button-color-border-warning: var(--x-color-warning-solid);--x-button-color-bg-danger-subtle: var(--x-color-danger-subtle);--x-button-color-bg-danger-subtle-hover: var(--x-color-danger-subtle-hover);--x-button-color-bg-danger-subtle-active: var(--x-color-danger-subtle-active);--x-button-color-bg-danger-solid: var(--x-color-danger-solid);--x-button-color-bg-danger-solid-hover: var(--x-color-danger-solid-hover);--x-button-color-bg-danger-solid-active: var(--x-color-danger-solid-active);--x-button-color-text-danger: var(--x-color-danger-button-text);--x-button-color-border-danger: var(--x-color-danger-solid);--x-button-color-bg-strong-subtle: var(--x-color-strong-subtle);--x-button-color-bg-strong-subtle-hover: var(--x-color-strong-subtle-hover);--x-button-color-bg-strong-subtle-active: var(--x-color-strong-subtle-active);--x-button-color-bg-strong-solid: var(--x-color-strong-solid);--x-button-color-bg-strong-solid-hover: var(--x-color-strong-solid-hover);--x-button-color-bg-strong-solid-active: var(--x-color-strong-solid-active);--x-button-color-text-strong: var(--x-color-strong-button-text);--x-button-color-border-strong: var(--x-color-strong-solid);--x-button-color-bg-info-subtle: var(--x-color-fill-2);--x-button-color-bg-info-subtle-hover: var(--x-color-neutral-3);--x-button-color-bg-info-subtle-active: var(--x-color-neutral-4);--x-button-color-bg-info-solid: var(--x-color-constant-neutral-strong);--x-button-color-bg-info-solid-hover: var(--x-color-constant-neutral-strong-hover);--x-button-color-bg-info-solid-active: var(--x-color-constant-neutral-strong-active);--x-button-color-text-info: var(--x-color-text-secondary);--x-button-color-border-info: var(--x-color-neutral-5)}.x-button{--x-button-width: auto;--x-button-font-weight: 500;--x-button-opacity: 1;--x-button-border-style: solid;--x-button-border-color: var(--x-button-color-border-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-text-color: var(--x-button-color-text-default);--x-button-padding: 0 0;--x-button-mini-height: var(--x-size-mini);--x-button-mini-font-size: 12px;--x-button-mini-padding: 0 8px;--x-button-mini-border-radius: 4px;--x-button-small-height: var(--x-size-small);--x-button-small-font-size: 13px;--x-button-small-padding: 0 10px;--x-button-small-border-radius: 4px;--x-button-medium-height: var(--x-size-medium);--x-button-medium-font-size: 14px;--x-button-medium-padding: 0 14px;--x-button-medium-border-radius: 4px;--x-button-large-height: var(--x-size-large);--x-button-large-font-size: 14px;--x-button-large-padding: 0 20px;--x-button-large-border-radius: 6px;--x-button-huge-height: var(--x-size-huge);--x-button-huge-font-size: 16px;--x-button-huge-font-weight: 400;--x-button-huge-padding: 0 28px;--x-button-huge-border-radius: 4px}.x-button{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button{position:relative;display:inline-flex;justify-content:center;align-items:center;overflow:visible;margin:0;border-style:var(--x-button-border-style);border-width:1px;border-color:var(--x-button-border-color);border-radius:var(--x-button-border-radius);padding:var(--x-button-padding);width:var(--x-button-width);height:var(--x-button-height);color:var(--x-button-text-color);font-size:var(--x-button-font-size);font-weight:var(--x-button-font-weight);white-space:nowrap;background-color:var(--x-button-background-color);opacity:var(--x-button-opacity);outline:none;transition:color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),border-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear);box-sizing:border-box;appearance:none;user-select:none;vertical-align:bottom;cursor:pointer}.x-button>.x-wave{position:absolute;inset:-1px;z-index:0;border-radius:inherit;pointer-events:none;opacity:.45;box-shadow:0 0 0 0 var(--x-wave-color, currentColor);transition:box-shadow var(--x-transition-duration-4, 0.4s) var(--x-transition-timing-function-standard, ease),opacity var(--x-transition-duration-4, 0.4s) var(--x-transition-timing-function-linear, linear)}.x-button>.x-wave-active{opacity:0;box-shadow:0 0 0 6px var(--x-wave-color, currentColor)}.x-button--prefix{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;margin-right:4px}.x-button--suffix{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;margin-left:4px}.x-button--loading{position:relative;z-index:1;display:flex;transition:all .2s ease}.x-button--content{position:relative;z-index:1;display:flex}.x-button.x-button-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-primary{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid);--x-button-border-color: var(--x-button-color-bg-primary-solid)}.x-button-primary:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-hover);--x-button-border-color: var(--x-button-color-bg-primary-solid-hover)}.x-button-primary:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-active);--x-button-border-color: var(--x-button-color-bg-primary-solid-active)}.x-button-primary.x-button-default{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid);--x-button-border-color: var(--x-button-color-bg-primary-solid)}.x-button-primary.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-hover);--x-button-border-color: var(--x-button-color-bg-primary-solid-hover)}.x-button-primary.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-active);--x-button-border-color: var(--x-button-color-bg-primary-solid-active)}.x-button-primary.x-button-success{--x-button-text-color: var(--x-button-color-text-solid-success);--x-button-background-color: var(--x-button-color-bg-success-solid);--x-button-border-color: var(--x-button-color-bg-success-solid)}.x-button-primary.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-success);--x-button-background-color: var(--x-button-color-bg-success-solid-hover);--x-button-border-color: var(--x-button-color-bg-success-solid-hover)}.x-button-primary.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-success);--x-button-background-color: var(--x-button-color-bg-success-solid-active);--x-button-border-color: var(--x-button-color-bg-success-solid-active)}.x-button-primary.x-button-warning{--x-button-text-color: var(--x-button-color-text-solid-warning);--x-button-background-color: var(--x-button-color-bg-warning-solid);--x-button-border-color: var(--x-button-color-bg-warning-solid)}.x-button-primary.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-warning);--x-button-background-color: var(--x-button-color-bg-warning-solid-hover);--x-button-border-color: var(--x-button-color-bg-warning-solid-hover)}.x-button-primary.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-warning);--x-button-background-color: var(--x-button-color-bg-warning-solid-active);--x-button-border-color: var(--x-button-color-bg-warning-solid-active)}.x-button-primary.x-button-strong{--x-button-text-color: var(--x-button-color-text-solid-strong);--x-button-background-color: var(--x-button-color-bg-strong-solid);--x-button-border-color: var(--x-button-color-bg-strong-solid)}.x-button-primary.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-strong);--x-button-background-color: var(--x-button-color-bg-strong-solid-hover);--x-button-border-color: var(--x-button-color-bg-strong-solid-hover)}.x-button-primary.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-strong);--x-button-background-color: var(--x-button-color-bg-strong-solid-active);--x-button-border-color: var(--x-button-color-bg-strong-solid-active)}.x-button-primary.x-button-danger{--x-button-text-color: var(--x-button-color-text-solid-danger);--x-button-background-color: var(--x-button-color-bg-danger-solid);--x-button-border-color: var(--x-button-color-bg-danger-solid)}.x-button-primary.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-danger);--x-button-background-color: var(--x-button-color-bg-danger-solid-hover);--x-button-border-color: var(--x-button-color-bg-danger-solid-hover)}.x-button-primary.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-danger);--x-button-background-color: var(--x-button-color-bg-danger-solid-active);--x-button-border-color: var(--x-button-color-bg-danger-solid-active)}.x-button-primary.x-button-info{--x-button-text-color: var(--x-button-color-text-solid-info);--x-button-background-color: var(--x-button-color-bg-info-solid);--x-button-border-color: var(--x-button-color-bg-info-solid)}.x-button-primary.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-info);--x-button-background-color: var(--x-button-color-bg-info-solid-hover);--x-button-border-color: var(--x-button-color-bg-info-solid-hover)}.x-button-primary.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-info);--x-button-background-color: var(--x-button-color-bg-info-solid-active);--x-button-border-color: var(--x-button-color-bg-info-solid-active)}.x-button-outline{--x-button-border-style: solid}.x-button-outline{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-default{--x-button-border-style: solid}.x-button-outline.x-button-default{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-success{--x-button-border-style: solid}.x-button-outline.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-success)}.x-button-outline.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-button-color-border-success)}.x-button-outline.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-button-color-border-success)}.x-button-outline.x-button-warning{--x-button-border-style: solid}.x-button-outline.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-outline.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-outline.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-outline.x-button-strong{--x-button-border-style: solid}.x-button-outline.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-outline.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-outline.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-outline.x-button-danger{--x-button-border-style: solid}.x-button-outline.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-outline.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-outline.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-outline.x-button-info{--x-button-border-style: solid}.x-button-outline.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-info)}.x-button-outline.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-button-color-border-info)}.x-button-outline.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-button-color-border-info)}.x-button-dashed{--x-button-border-style: dashed}.x-button-dashed{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-default{--x-button-border-style: dashed}.x-button-dashed.x-button-default{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-success{--x-button-border-style: dashed}.x-button-dashed.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-success)}.x-button-dashed.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-button-color-border-success)}.x-button-dashed.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-button-color-border-success)}.x-button-dashed.x-button-warning{--x-button-border-style: dashed}.x-button-dashed.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-dashed.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-dashed.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-dashed.x-button-strong{--x-button-border-style: dashed}.x-button-dashed.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-dashed.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-dashed.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-dashed.x-button-danger{--x-button-border-style: dashed}.x-button-dashed.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-dashed.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-dashed.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-dashed.x-button-info{--x-button-border-style: dashed}.x-button-dashed.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-info)}.x-button-dashed.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-button-color-border-info)}.x-button-dashed.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-button-color-border-info)}.x-button-text{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-default{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain{--x-button-font-weight: 500}.x-button-plain{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button-plain.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button-plain.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button-plain.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border{--x-button-font-weight: 500}.x-button-hide-border{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button-hide-border.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button-hide-border.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button-hide-border.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-link{--x-button-height: auto;--x-button-padding: 0;--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent);--x-button-text-color: var(--x-button-color-text-primary);min-height:0}.x-button-link:not(.is-disabled):hover{--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent);--x-button-text-color: var(--x-button-color-text-primary)}.x-button-link:not(.is-disabled):active{--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent);--x-button-text-color: var(--x-button-color-text-primary)}.x-button-is-disabled{--x-button-opacity: 0.4;cursor:not-allowed}.x-button-block{display:flex;width:100%}.x-button-loading{cursor:default}.x-button-loading-fill--loading{position:absolute;inset:0;z-index:1;justify-content:center;align-items:center;color:var(--x-button-text-color);background-color:var(--x-button-background-color)}.x-button-narrow{--x-button-mini-padding: 0 0;--x-button-small-padding: 0 0;--x-button-medium-padding: 0 0;--x-button-large-padding: 0 0;--x-button-huge-padding: 0 0}.x-button-mini{--x-button-height: var(--x-button-mini-height);--x-button-font-size: var(--x-button-mini-font-size);--x-button-padding: var(--x-button-mini-padding);--x-button-border-radius: var(--x-button-mini-border-radius)}.x-button-small{--x-button-height: var(--x-button-small-height);--x-button-font-size: var(--x-button-small-font-size);--x-button-padding: var(--x-button-small-padding);--x-button-border-radius: var(--x-button-small-border-radius)}.x-button-medium{--x-button-height: var(--x-button-medium-height);--x-button-font-size: var(--x-button-medium-font-size);--x-button-padding: var(--x-button-medium-padding);--x-button-border-radius: var(--x-button-medium-border-radius)}.x-button-large{--x-button-height: var(--x-button-large-height);--x-button-font-size: var(--x-button-large-font-size);--x-button-padding: var(--x-button-large-padding);--x-button-border-radius: var(--x-button-large-border-radius)}.x-button-huge{--x-button-height: var(--x-button-huge-height);--x-button-font-size: var(--x-button-huge-font-size);--x-button-font-weight: var(--x-button-huge-font-weight);--x-button-padding: var(--x-button-huge-padding);--x-button-border-radius: var(--x-button-huge-border-radius)}.x-button-round{--x-button-border-radius: var(--x-button-height);height:var(--x-button-height)}.x-button-circle{--x-button-width: var(--x-button-height);--x-button-padding: 0;--x-button-border-radius: 100%;width:var(--x-button-height);height:var(--x-button-height)}.x-button-group{display:flex;width:min-content}.x-button-group>.x-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.x-button-group>.x-button:last-child{margin-left:-1px;border-left-color:var(--x-button-group-color-separator);border-top-left-radius:0;border-bottom-left-radius:0}.x-button-group>.x-button:not(:first-child):not(:last-child){margin-left:-1px;border-left-color:var(--x-button-group-color-separator);border-radius:0}
|
|
@@ -1 +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-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-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-2);--x-date-picker-action-font-size: var(--x-font-size-body-1);--x-date-picker-confirm-color: var(--x-color-primary-6);--x-date-picker-today-color: var(--x-color-primary-6)}.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-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: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.x-date-picker-is-range-start,.x-date-picker--body-date .x-date-picker--cell.x-date-picker-is-preview-range-start{border-radius:16px 0 0 16px}.x-date-picker--body-date .x-date-picker--cell.x-date-picker-is-range-end,.x-date-picker--body-date .x-date-picker--cell.x-date-picker-is-preview-range-end{border-radius:0 16px 16px 0}.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-date-picker-cell-color-selected);background:var(--x-date-picker-cell-bg-selected)}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-selected .x-date-picker--cell-inner{color:inherit;background:var(--x-color-transparent)}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-start.x-date-picker-is-week-selected{border-radius:0}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-end.x-date-picker-is-week-selected{border-radius:0 12px 12px 0}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-label.x-date-picker-is-week-selected{color:var(--x-date-picker-cell-color-selected);background:var(--x-date-picker-cell-bg-selected);border-radius:12px 0 0 12px}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-label.x-date-picker-is-week-selected .x-date-picker--cell-inner{color:inherit;background:var(--x-color-transparent)}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-start.x-date-picker-is-week-end.x-date-picker-is-week-selected{border-radius:12px}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-selected::after{opacity:0}.x-date-picker--body-month{grid-template-columns:repeat(3, 1fr)}.x-date-picker--body-month .x-date-picker--cell-inner{min-width:48px;height:24px;border-radius:3px}.x-date-picker--body-year{grid-template-columns:repeat(3, 1fr)}.x-date-picker--body-year .x-date-picker--cell-inner{min-width:48px;height:24px;border-radius:3px}.x-date-picker--body-quarter{grid-template-columns:repeat(2, 1fr)}.x-date-picker--body-quarter .x-date-picker--cell-inner{min-width:48px;height:24px;border-radius:3px}.x-date-picker--cell-inner{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:24px;min-width:24px;height:24px;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:10px;line-height:10px;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: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);background:var(--x-date-picker-cell-bg-range)}.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-selected{background:var(--x-color-transparent)}.x-date-picker--cell.x-date-picker-is-range-start{border-radius:14px 0 0 14px}.x-date-picker--cell.x-date-picker-is-range-end{border-radius:0 14px 14px 0}.x-date-picker--cell.x-date-picker-is-preview-range-start{border-radius:14px 0 0 14px}.x-date-picker--cell.x-date-picker-is-preview-range-end{border-radius:0 14px 14px 0}.x-date-picker--cell.x-date-picker-is-range-start.x-date-picker-is-range-end{background:var(--x-color-transparent);border-radius: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-week-start.x-date-picker-is-selected,.x-date-picker--cell.x-date-picker-is-week-start.x-date-picker-is-range-start,.x-date-picker--cell.x-date-picker-is-week-start.x-date-picker-is-range-end,.x-date-picker--cell.x-date-picker-is-week-start.x-date-picker-is-preview-range-start,.x-date-picker--cell.x-date-picker-is-week-start.x-date-picker-is-preview-range-end{border-radius:4px 0 0 4px}.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-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.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-date-picker-cell-bg-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-preview-range-start{border-radius:0}.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-preview-range-start .x-date-picker--cell-date{border-radius:16px 0 0 16px}.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-preview-range-end{border-radius:0}.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-preview-range-end .x-date-picker--cell-date{border-radius:0 16px 16px 0}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-start.x-date-picker-is-range-end .x-date-picker--cell-date{background:var(--x-color-transparent);border-radius:0}.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-6);background:var(--x-color-primary-light-1);outline:none}.x-date-picker--extra{flex:1 0 100%;min-width:0;color:var(--x-color-text-3);font-size:var(--x-font-size-body-1)}.x-date-picker--footer{display:flex;align-items:center;justify-content:space-between;min-height:36px;padding:4px 8px;border-top:1px solid var(--x-date-picker-footer-border)}.x-date-picker--footer-btn{min-width:36px;height:24px;padding:0 8px;color:var(--x-color-text-2);font:inherit;font-size:var(--x-date-picker-action-font-size);background:var(--x-color-transparent);border:none;border-radius:3px;cursor:pointer}.x-date-picker--footer-btn:hover,.x-date-picker--footer-btn:focus-visible{background:var(--x-color-fill-1);outline:none}.x-date-picker--today{color:var(--x-date-picker-today-color)}.x-date-picker--confirm{color:var(--x-date-picker-confirm-color)}
|
|
1
|
+
:root{--x-date-picker-panel-bg: var(--x-color-bg-popup);--x-date-picker-panel-border: var(--x-color-transparent);--x-date-picker-footer-border: var(--x-split-color);--x-date-picker-panel-radius: var(--x-border-radius-medium);--x-date-picker-panel-shadow: var(--x-picker-panel-shadow);--x-date-picker-panel-width: 280px;--x-date-picker-week-panel-width: 320px;--x-date-picker-range-width: calc(var(--x-date-picker-panel-width) * 2);--x-date-picker-cell-size: 32px;--x-date-picker-cell-inner-size: 24px;--x-date-picker-cell-gap: 0;--x-date-picker-cell-color: var(--x-color-text-2);--x-date-picker-cell-color-hover: var(--x-color-text-1);--x-date-picker-cell-bg-hover: var(--x-color-fill-1);--x-date-picker-cell-bg-range: var(--x-color-primary-light-1);--x-date-picker-cell-bg-range-hover: var(--x-color-primary-2);--x-date-picker-cell-bg-selected: var(--x-color-primary-6);--x-date-picker-cell-color-selected: var(--x-color-white);--x-date-picker-cell-color-disabled: var(--x-color-text-4);--x-date-picker-cell-color-out-view: var(--x-color-text-4);--x-date-picker-font-size: var(--x-font-size-body-3);--x-date-picker-action-font-size: var(--x-font-size-body-3);--x-date-picker-confirm-color: var(--x-color-primary-text);--x-date-picker-today-color: var(--x-color-primary-text)}.x-date-picker{width:220px}.x-date-picker-range{width:270px}.x-date-picker-datetime{width:390px}.x-date-picker--popup{line-height:var(--x-line-height-base)}.x-date-picker--panel{width:var(--x-date-picker-panel-width);overflow:hidden;color:var(--x-date-picker-cell-color);font-size:var(--x-date-picker-font-size);background:var(--x-date-picker-panel-bg);border:1px solid var(--x-date-picker-panel-border);border-radius:var(--x-date-picker-panel-radius);box-shadow:var(--x-date-picker-panel-shadow)}.x-date-picker-mode-week{width:var(--x-date-picker-week-panel-width)}.x-date-picker--popup-inner{overflow:hidden;background:var(--x-date-picker-panel-bg);border:1px solid var(--x-date-picker-panel-border);border-radius:var(--x-date-picker-panel-radius);box-shadow:var(--x-date-picker-panel-shadow)}.x-date-picker--panels{display:flex;gap:0}.x-date-picker--datetime-body{display:flex;align-items:stretch}.x-date-picker--datetime-body .x-date-picker--panel{border:0;border-radius:0;box-shadow:none}.x-date-picker--time-side{width:180px;border-left:1px solid var(--x-date-picker-footer-border)}.x-date-picker--time-side .x-time-picker--panel{width:100%;border:0;border-radius:0;box-shadow:none}.x-date-picker--time-side .x-time-picker--columns{width:100%}.x-date-picker--time-side .x-time-picker--column{flex:1 1 0;min-width:0;width:auto;height:234px}.x-date-picker--time-title{height:45px;color:var(--x-color-text-1);font-weight:500;line-height:45px;text-align:center;border-bottom:1px solid var(--x-date-picker-footer-border)}.x-date-picker--range-time-panel{display:grid;grid-template-columns:repeat(2, 1fr)}.x-date-picker--range-time-panel .x-time-picker--panel{width:100%;border:0;border-radius:0;box-shadow:none}.x-date-picker--range-time-panel .x-time-picker--columns{width:100%}.x-date-picker--range-time-panel .x-time-picker--column{flex:1 1 0;min-width:0;width:auto;height:196px}.x-date-picker--range-time-column{min-width:0}.x-date-picker--range-time-column+.x-date-picker--range-time-column{border-left:1px solid var(--x-date-picker-footer-border)}.x-date-picker--range-time-column.x-date-picker-is-active{background:var(--x-color-fill-1)}.x-date-picker--range-time-column.x-date-picker-is-active .x-date-picker--time-title{color:var(--x-color-text-1)}.x-date-picker--range-datetime-footer{display:grid;grid-template-columns:1.15fr 1fr 1.15fr 1fr;border-top:1px solid var(--x-date-picker-footer-border)}.x-date-picker--datetime-footer{display:flex;align-items:center;justify-content:space-between;min-height:36px;padding:4px 8px;border-top:1px solid var(--x-date-picker-footer-border)}.x-date-picker--range-datetime-item{display:flex;gap:8px;align-items:center;justify-content:center;min-width:0;height:40px;padding:0 12px;color:var(--x-color-text-2);font:inherit;font-size:var(--x-font-size-body-1);line-height:1;text-align:center;background:var(--x-color-transparent);border:none;cursor:pointer}.x-date-picker--range-datetime-item+.x-date-picker--range-datetime-item{border-left:1px solid var(--x-date-picker-footer-border)}.x-date-picker--range-datetime-item span,.x-date-picker--range-datetime-item strong{min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-date-picker--range-datetime-item span{font-weight:400}.x-date-picker--range-datetime-item strong{color:var(--x-color-text-1);font-weight:400}.x-date-picker--range-datetime-item:hover,.x-date-picker--range-datetime-item.x-date-picker-is-active{background:var(--x-color-fill-1)}.x-date-picker-popup-range{width:var(--x-date-picker-range-width)}.x-date-picker-popup-range .x-date-picker--panel{border:0;border-radius:0;box-shadow:none}.x-date-picker-popup-datetime{display:block}.x-date-picker--header{display:grid;grid-template-columns:28px 28px 1fr 28px 28px;gap:2px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--x-date-picker-footer-border)}.x-date-picker--header-left{grid-template-columns:28px 28px 1fr}.x-date-picker--header-right{grid-template-columns:1fr 28px 28px}.x-date-picker--header-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;color:var(--x-color-text-2);font:inherit;background:var(--x-color-transparent);border:none;border-radius:3px;cursor:pointer}.x-date-picker--header-btn>.x-icon{width:14px;height:14px;font-size:14px}.x-date-picker--header-btn:hover,.x-date-picker--header-btn:focus-visible{color:var(--x-color-text-1);background:var(--x-color-fill-1);outline:none}.x-date-picker--header-label{min-width:0;height:28px;color:var(--x-color-text-1);font:inherit;font-weight:500;background:var(--x-color-transparent);border:none;border-radius:3px;cursor:pointer;text-align:center}.x-date-picker--header-label:hover,.x-date-picker--header-label:focus-visible{background:var(--x-color-fill-1);outline:none}.x-date-picker--weekdays{display:grid;grid-template-columns:repeat(7, 1fr);padding:8px 12px 0;color:var(--x-color-text-3);font-size:var(--x-font-size-body-1);text-align:center}.x-date-picker--weekdays span{height:24px;line-height:24px}.x-date-picker--weekdays.x-date-picker-is-week-mode{grid-template-columns:54px repeat(7, 1fr)}.x-date-picker--body{display:grid;column-gap:var(--x-date-picker-cell-gap);row-gap:2px;padding:8px 12px 10px}.x-date-picker--row{display:contents}.x-date-picker--body-date{grid-template-columns:repeat(7, 1fr)}.x-date-picker--body-date .x-date-picker--cell:nth-child(7n+1)::before{border-top-left-radius:calc(var(--x-date-picker-cell-inner-size)/2);border-bottom-left-radius:calc(var(--x-date-picker-cell-inner-size)/2)}.x-date-picker--body-date .x-date-picker--cell:nth-child(7n)::before{border-top-right-radius:calc(var(--x-date-picker-cell-inner-size)/2);border-bottom-right-radius:calc(var(--x-date-picker-cell-inner-size)/2)}.x-date-picker--body-week{grid-template-columns:54px repeat(7, 1fr)}.x-date-picker--body-week .x-date-picker--cell::before{content:none}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-selected{color:var(--x-date-picker-cell-color-selected);background:var(--x-date-picker-cell-bg-selected)}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-selected .x-date-picker--cell-inner{color:inherit;background:var(--x-color-transparent)}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-start.x-date-picker-is-week-selected{border-radius:0}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-end.x-date-picker-is-week-selected{border-radius:0 12px 12px 0}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-label.x-date-picker-is-week-selected{color:var(--x-date-picker-cell-color-selected);background:var(--x-date-picker-cell-bg-selected);border-radius:12px 0 0 12px}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-label.x-date-picker-is-week-selected .x-date-picker--cell-inner{color:inherit;background:var(--x-color-transparent)}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-start.x-date-picker-is-week-end.x-date-picker-is-week-selected{border-radius:12px}.x-date-picker--body-week .x-date-picker--cell.x-date-picker-is-week-selected::after{opacity:0}.x-date-picker--body-month{grid-template-columns:repeat(3, 1fr)}.x-date-picker--body-month .x-date-picker--cell-inner{min-width:48px;height:24px;border-radius:3px}.x-date-picker--body-year{grid-template-columns:repeat(3, 1fr)}.x-date-picker--body-year .x-date-picker--cell-inner{min-width:48px;height:24px;border-radius:3px}.x-date-picker--body-quarter{grid-template-columns:repeat(2, 1fr)}.x-date-picker--body-quarter .x-date-picker--cell-inner{min-width:48px;height:24px;border-radius:3px}.x-date-picker--cell-inner{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:var(--x-date-picker-cell-inner-size);min-width:var(--x-date-picker-cell-inner-size);height:var(--x-date-picker-cell-inner-size);padding:0;border-radius:50%}.x-date-picker--cell-date{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:100%;min-width:0;height:var(--x-date-picker-cell-size)}.x-date-picker--cell-lunar{display:none;max-width:38px;margin-top:3px;overflow:hidden;color:var(--x-color-text-3);font-size:var(--x-font-size-body-1);line-height:12px;opacity:.86;white-space:nowrap;text-overflow:ellipsis}.x-date-picker--cell{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0;height:var(--x-date-picker-cell-size);padding:0;color:var(--x-date-picker-cell-color);font:inherit;background:var(--x-color-transparent);border:none;border-radius:0;cursor:pointer;transition:color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-date-picker--cell::after{position:absolute;bottom:3px;left:50%;z-index:2;width:4px;height:4px;background:var(--x-date-picker-today-color);border-radius:50%;transform:translateX(-50%);opacity:0;content:"";pointer-events:none}.x-date-picker--cell::before{position:absolute;top:50%;right:0;left:0;z-index:0;height:var(--x-date-picker-cell-inner-size);background:var(--x-color-transparent);transform:translateY(-50%);content:"";transition:background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-date-picker--cell:hover,.x-date-picker--cell:focus-visible{color:var(--x-date-picker-cell-color-hover);outline:none}.x-date-picker--cell:hover .x-date-picker--cell-inner,.x-date-picker--cell:focus-visible .x-date-picker--cell-inner{background:var(--x-date-picker-cell-bg-hover)}.x-date-picker--cell.x-date-picker-is-today::after{opacity:1}.x-date-picker--cell.x-date-picker-is-in-range,.x-date-picker--cell.x-date-picker-is-range-start,.x-date-picker--cell.x-date-picker-is-range-end,.x-date-picker--cell.x-date-picker-is-in-preview-range,.x-date-picker--cell.x-date-picker-is-preview-range-start,.x-date-picker--cell.x-date-picker-is-preview-range-end{color:var(--x-color-text-1)}.x-date-picker--cell.x-date-picker-is-in-range::before,.x-date-picker--cell.x-date-picker-is-range-start::before,.x-date-picker--cell.x-date-picker-is-range-end::before,.x-date-picker--cell.x-date-picker-is-in-preview-range::before,.x-date-picker--cell.x-date-picker-is-preview-range-start::before,.x-date-picker--cell.x-date-picker-is-preview-range-end::before{background:var(--x-date-picker-cell-bg-range)}.x-date-picker--cell.x-date-picker-is-range-start::before,.x-date-picker--cell.x-date-picker-is-preview-range-start::before{left:50%}.x-date-picker--cell.x-date-picker-is-range-end::before,.x-date-picker--cell.x-date-picker-is-preview-range-end::before{right:50%}.x-date-picker--cell.x-date-picker-is-range-start.x-date-picker-is-range-end::before{background:var(--x-color-transparent)}.x-date-picker--cell.x-date-picker-is-in-range:hover .x-date-picker--cell-inner,.x-date-picker--cell.x-date-picker-is-in-range:focus-visible .x-date-picker--cell-inner,.x-date-picker--cell.x-date-picker-is-in-preview-range:hover .x-date-picker--cell-inner,.x-date-picker--cell.x-date-picker-is-in-preview-range:focus-visible .x-date-picker--cell-inner{background:var(--x-color-transparent)}.x-date-picker--cell.x-date-picker-is-in-range:hover::before,.x-date-picker--cell.x-date-picker-is-in-range:focus-visible::before,.x-date-picker--cell.x-date-picker-is-range-start:hover::before,.x-date-picker--cell.x-date-picker-is-range-start:focus-visible::before,.x-date-picker--cell.x-date-picker-is-range-end:hover::before,.x-date-picker--cell.x-date-picker-is-range-end:focus-visible::before{background:var(--x-date-picker-cell-bg-range-hover)}.x-date-picker--cell.x-date-picker-is-selected .x-date-picker--cell-inner,.x-date-picker--cell.x-date-picker-is-range-start .x-date-picker--cell-inner,.x-date-picker--cell.x-date-picker-is-range-end .x-date-picker--cell-inner{color:var(--x-date-picker-cell-color-selected);background:var(--x-date-picker-cell-bg-selected)}.x-date-picker--cell.x-date-picker-is-selected .x-date-picker--cell-inner .x-date-picker--cell-lunar,.x-date-picker--cell.x-date-picker-is-range-start .x-date-picker--cell-inner .x-date-picker--cell-lunar,.x-date-picker--cell.x-date-picker-is-range-end .x-date-picker--cell-inner .x-date-picker--cell-lunar{color:inherit}.x-date-picker--cell.x-date-picker-is-selected::after,.x-date-picker--cell.x-date-picker-is-range-start::after,.x-date-picker--cell.x-date-picker-is-range-end::after{opacity:0}.x-date-picker--cell.x-date-picker-is-out-view{color:var(--x-date-picker-cell-color-out-view)}.x-date-picker--cell.x-date-picker-is-out-view .x-date-picker--cell-inner{background:var(--x-color-transparent)}.x-date-picker--cell.x-date-picker-is-out-view.x-date-picker-is-today::after{opacity:0}.x-date-picker--cell.x-date-picker-is-week-label{color:var(--x-color-text-3);cursor:default}.x-date-picker--cell.x-date-picker-is-week-label .x-date-picker--cell-inner{width:auto;min-width:50px;padding:0;background:var(--x-color-transparent);border-radius:0;white-space:nowrap}.x-date-picker--cell.x-date-picker-is-week-start{justify-content:center}.x-date-picker--cell.x-date-picker-is-week-start.x-date-picker-is-selected .x-date-picker--cell-inner,.x-date-picker--cell.x-date-picker-is-week-start.x-date-picker-is-range-start .x-date-picker--cell-inner,.x-date-picker--cell.x-date-picker-is-week-start.x-date-picker-is-range-end .x-date-picker--cell-inner{margin-left:0}.x-date-picker--cell.x-date-picker-is-disabled,.x-date-picker--cell:disabled{color:var(--x-date-picker-cell-color-disabled);background:var(--x-color-transparent);cursor:not-allowed}.x-date-picker--cell.x-date-picker-is-disabled .x-date-picker--cell-inner,.x-date-picker--cell:disabled .x-date-picker--cell-inner{background:var(--x-color-transparent)}.x-date-picker--cell.x-date-picker-is-week-label:disabled{color:var(--x-color-text-3);cursor:default}.x-date-picker--cell.x-date-picker-is-week-label.x-date-picker-is-week-selected:disabled{color:var(--x-date-picker-cell-color-selected)}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--weekdays{padding-top:6px}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--body-date{column-gap:0;row-gap:4px;padding-top:6px;padding-bottom:12px}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell{flex-direction:column;height:50px}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell::after{opacity:0}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell-date{width:100%;height:32px;border-radius:0}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell-inner{width:24px;min-width:24px;height:24px}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell-lunar{display:block}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-out-view .x-date-picker--cell-lunar{color:var(--x-color-text-4);opacity:.72}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell:hover .x-date-picker--cell-inner,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell:focus-visible .x-date-picker--cell-inner{background:var(--x-date-picker-cell-bg-hover)}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-range:hover .x-date-picker--cell-inner,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-range:focus-visible .x-date-picker--cell-inner,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-preview-range:hover .x-date-picker--cell-inner,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-preview-range:focus-visible .x-date-picker--cell-inner,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-start:hover .x-date-picker--cell-inner,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-end:hover .x-date-picker--cell-inner{background:var(--x-color-transparent)}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-range:hover::before,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-range:focus-visible::before,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-start:hover::before,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-start:focus-visible::before,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-end:hover::before,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-end:focus-visible::before{background:var(--x-date-picker-cell-bg-range-hover)}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-selected .x-date-picker--cell-lunar,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-start .x-date-picker--cell-lunar,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-end .x-date-picker--cell-lunar{color:var(--x-color-text-2);opacity:.86}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell::before{top:16px}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-range,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-start,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-end,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-preview-range,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-preview-range-start,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-preview-range-end{background:var(--x-color-transparent)}.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-range .x-date-picker--cell-date,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-start .x-date-picker--cell-date,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-range-end .x-date-picker--cell-date,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-in-preview-range .x-date-picker--cell-date,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-preview-range-start .x-date-picker--cell-date,.x-date-picker-mode-date.x-date-picker-is-show-lunar .x-date-picker--cell.x-date-picker-is-preview-range-end .x-date-picker--cell-date{background:var(--x-color-transparent)}.x-date-picker--shortcuts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 10px;border-top:1px solid var(--x-date-picker-footer-border)}.x-date-picker--range-footer{display:flex;align-items:center;justify-content:space-between;min-height:40px;padding:6px 10px;border-top:1px solid var(--x-date-picker-footer-border)}.x-date-picker--range-shortcuts{display:flex;flex:1;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}.x-date-picker--shortcut{height:24px;padding:0 8px;color:var(--x-color-text-2);font:inherit;font-size:var(--x-date-picker-action-font-size);background:var(--x-color-fill-1);border:none;border-radius:3px;cursor:pointer}.x-date-picker--shortcut:hover,.x-date-picker--shortcut:focus-visible{color:var(--x-color-primary-text);background:var(--x-color-primary-light-1);outline:none}.x-date-picker--extra{flex:1 0 100%;min-width:0;color:var(--x-color-text-3);font-size:var(--x-font-size-body-1)}.x-date-picker--footer{display:flex;align-items:center;justify-content:space-between;min-height:36px;padding:4px 8px;border-top:1px solid var(--x-date-picker-footer-border)}.x-date-picker--footer-btn{min-width:36px;height:24px;padding:0 8px;color:var(--x-color-text-2);font:inherit;font-size:var(--x-date-picker-action-font-size);background:var(--x-color-transparent);border:none;border-radius:3px;cursor:pointer}.x-date-picker--footer-btn:hover,.x-date-picker--footer-btn:focus-visible{background:var(--x-color-fill-1);outline:none}.x-date-picker--today{color:var(--x-date-picker-today-color)}.x-date-picker--confirm{color:var(--x-date-picker-confirm-color)}
|
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);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: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}
|
package/dist/style/drawer.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.x-drawer{--x-drawer-mask-background-color: var(--x-color-overlay-mask);--x-drawer-bg-color: var(--x-color-bg-elevated);--x-drawer-icon-color: var(--x-color-icon-elevated);--x-drawer-icon-color-dark: var(--x-color-icon-elevated-hover);--x-drawer-border-color: var(--x-color-bg-elevated-border);--x-drawer-title-color: var(--x-color-text-elevated-title);--x-drawer-shadow: var(--x-shadow-drawer);top:0;right:0;bottom:0;left:0}.x-drawer.is-fixed{position:fixed}.x-drawer.is-absolute{position:absolute}.x-drawer--mask{position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--x-drawer-mask-background-color)}.x-drawer--container{position:absolute;overflow:auto;background-color:var(--x-drawer-bg-color);box-shadow:var(--x-drawer-shadow);display:flex;flex-direction:column}.x-drawer--container.is-right{top:0;right:0;bottom:0}.x-drawer--container.is-left{top:0;bottom:0;left:0}.x-drawer--container.is-top{top:0;right:0;left:0}.x-drawer--container.is-bottom{right:0;bottom:0;left:0}.x-drawer--close-icon{position:absolute;top:18px;right:20px;width:18px;height:18px;font-size:18px;color:var(--x-drawer-icon-color);cursor:pointer;outline:none;transition:transform .3s ease}.x-drawer--close-icon:focus-visible{outline:2px solid var(--x-color-primary);outline-offset:2px}.x-drawer--close-icon:hover{color:var(--x-drawer-icon-color-dark);transform:rotate(90deg)}.x-drawer--header{border-bottom:1px solid var(--x-drawer-border-color);padding-left:20px;height:55px;box-sizing:border-box;line-height:55px}.x-drawer--title{font-size:16px;font-weight:500;color:var(--x-drawer-title-color);line-height:1}.x-drawer--footer{display:flex;align-items:center;justify-content:flex-end;margin-top:auto;padding:0 20px;height:55px;background:var(--x-drawer-bg-color);border-top:1px solid var(--x-drawer-border-color);box-sizing:border-box}.x-drawer--body{min-height:0}
|
|
1
|
+
.x-drawer{--x-drawer-mask-background-color: var(--x-color-overlay-mask);--x-drawer-bg-color: var(--x-color-bg-elevated);--x-drawer-icon-color: var(--x-color-icon-elevated);--x-drawer-icon-color-dark: var(--x-color-icon-elevated-hover);--x-drawer-border-color: var(--x-color-bg-elevated-border);--x-drawer-title-color: var(--x-color-text-elevated-title);--x-drawer-shadow: var(--x-shadow-drawer);top:0;right:0;bottom:0;left:0}.x-drawer.is-fixed{position:fixed}.x-drawer.is-absolute{position:absolute}.x-drawer--mask{position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--x-drawer-mask-background-color)}.x-drawer--container{position:absolute;overflow:auto;background-color:var(--x-drawer-bg-color);box-shadow:var(--x-drawer-shadow);display:flex;flex-direction:column}.x-drawer--container.is-right{top:0;right:0;bottom:0}.x-drawer--container.is-left{top:0;bottom:0;left:0}.x-drawer--container.is-top{top:0;right:0;left:0}.x-drawer--container.is-bottom{right:0;bottom:0;left:0}.x-drawer--close-icon{position:absolute;top:18px;right:20px;width:18px;height:18px;font-size:18px;color:var(--x-drawer-icon-color);cursor:pointer;outline:none;transition:transform .3s ease}.x-drawer--close-icon:focus-visible{outline:2px solid var(--x-color-primary-text);outline-offset:2px}.x-drawer--close-icon:hover{color:var(--x-drawer-icon-color-dark);transform:rotate(90deg)}.x-drawer--header{border-bottom:1px solid var(--x-drawer-border-color);padding-left:20px;height:55px;box-sizing:border-box;line-height:55px}.x-drawer--title{font-size:16px;font-weight:500;color:var(--x-drawer-title-color);line-height:1}.x-drawer--footer{display:flex;align-items:center;justify-content:flex-end;margin-top:auto;padding:0 20px;height:55px;background:var(--x-drawer-bg-color);border-top:1px solid var(--x-drawer-border-color);box-sizing:border-box}.x-drawer--body{min-height:0}
|
package/dist/style/dropdown.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--x-dropdown-max-height: var(--x-size-50);--x-dropdown-border-radius: var(--x-border-radius-medium);--x-dropdown-padding-vertical: var(--x-spacing-2);--x-dropdown-font-size: var(--x-font-size-body-3);--x-dropdown-color-bg: var(--x-color-bg-popup);--x-dropdown-color-border: var(--x-color-
|
|
1
|
+
:root{--x-dropdown-max-height: var(--x-size-50);--x-dropdown-border-radius: var(--x-border-radius-medium);--x-dropdown-padding-vertical: var(--x-spacing-2);--x-dropdown-font-size: var(--x-font-size-body-3);--x-dropdown-color-bg: var(--x-color-bg-popup);--x-dropdown-color-border: var(--x-color-transparent);--x-dropdown-box-shadow: var(--x-shadow-popover);--x-dropdown-option-height: var(--x-size-9);--x-dropdown-option-padding-horizontal: var(--x-spacing-6);--x-dropdown-option-font-weight_selected: var(--x-font-weight-500);--x-dropdown-option-color-bg_default: var(--x-color-transparent);--x-dropdown-option-color-bg_hover: var(--x-color-fill-2);--x-dropdown-option-color-bg_selected: var(--x-color-transparent);--x-dropdown-option-color-bg_disabled: var(--x-color-transparent);--x-dropdown-option-color-text_default: var(--x-color-text-1);--x-dropdown-option-color-text_hover: var(--x-color-text-1);--x-dropdown-option-color-text_selected: var(--x-color-text-1);--x-dropdown-option-color-text_disabled: var(--x-color-text-4);--x-dropdown-group-title-height: var(--x-size-5);--x-dropdown-group-title-padding-horizontal: var(--x-spacing-6);--x-dropdown-group-title-padding-top: var(--x-spacing-4);--x-dropdown-group-title-margin-top: var(--x-spacing-4);--x-dropdown-group-title-font-size: var(--x-font-size-body-1);--x-dropdown-group-title-color-text: var(--x-color-text-3);--x-dropdown-margin-left-suffix-icon: var(--x-spacing-6)}.x-dropdown{box-sizing:border-box;padding:var(--x-dropdown-padding-vertical) 0;background-color:var(--x-dropdown-color-bg);border:1px solid var(--x-dropdown-color-border);border-radius:var(--x-dropdown-border-radius);box-shadow:var(--x-dropdown-box-shadow)}.x-dropdown--list{margin-top:0;margin-bottom:0;padding-left:0;list-style:none}.x-dropdown--list--wrapper{max-height:var(--x-dropdown-max-height);overflow-y:auto}.x-dropdown--option{position:relative;z-index:1;display:flex;align-items:center;box-sizing:border-box;width:100%;padding:0 var(--x-dropdown-option-padding-horizontal);color:var(--x-dropdown-option-color-text_default);font-size:var(--x-dropdown-font-size);line-height:var(--x-dropdown-option-height);text-align:left;background-color:var(--x-dropdown-option-color-bg_default);cursor:pointer}.x-dropdown--option--content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-dropdown--option-has-suffix{justify-content:space-between}.x-dropdown--option-active,.x-dropdown--option:not(.x-dropdown--option-disabled):hover,.x-dropdown--option:not(.x-dropdown--option-disabled):focus-visible{color:var(--x-dropdown-option-color-text_hover);background-color:var(--x-dropdown-option-color-bg_hover);outline:none;transition:all var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-dropdown--option-disabled{color:var(--x-dropdown-option-color-text_disabled);background-color:var(--x-dropdown-option-color-bg_disabled);cursor:not-allowed}.x-dropdown--option-icon{display:inline-flex;margin-right:8px}.x-dropdown--option--suffix{display:flex;margin-left:var(--x-dropdown-margin-left-suffix-icon)}.x-dropdown--group:first-child .x-dropdown--group--title{margin-top:var(--x-dropdown-group-title-margin-top)}.x-dropdown--group--title{box-sizing:border-box;width:100%;margin-top:var(--x-dropdown-group-title-margin-top);padding:0 var(--x-dropdown-group-title-padding-horizontal);color:var(--x-dropdown-group-title-color-text);font-size:var(--x-dropdown-group-title-font-size);line-height:var(--x-dropdown-group-title-height);cursor:default;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-dropdown--submenu{margin-top:-var(--x-spacing-2)}.x-dropdown.x-dropdown-has-footer{padding-bottom:0}.x-dropdown--empty,.x-dropdown--loading{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:160px;min-height:72px;padding:var(--x-spacing-4) var(--x-spacing-6)}.x-dropdown--loading{color:var(--x-color-primary-text)}.x-dropdown--loading .x-spin--icon{font-size:22px}.x-dropdown--loading .x-spin--tip{margin-top:var(--x-spacing-2);font-size:12px}.x-dropdown--footer{border-top:1px solid var(--x-dropdown-color-border)}.x-dropdown--button .x-trigger{display:inline-flex}.x-dropdown--button--trigger{--x-button-width: var(--x-size-medium);min-width:var(--x-size-medium)}.x-dropdown--button--trigger .x-button--prefix{margin-right:0}.x-dropdown--button--trigger .x-button--content{display:none}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--x-input-color-bg: var(--x-field-color-bg);--x-input-color-bg_hover: var(--x-field-color-bg-hover);--x-input-color-bg_focus: var(--x-field-color-bg-focus);--x-input-color-bg_disabled: var(--x-field-color-bg-disabled);--x-input-color-addon-bg: var(--x-input-color-bg);--x-input-color-addon-border: var(--x-color-border-subtle);--x-input-border-addon-separator-width: var(--x-border-1);--x-input-color-border_focus: var(--x-field-color-border-focus);--x-input-color-shadow_focus: var(--x-field-color-shadow-focus);--x-input-size-shadow_focus: var(--x-field-size-shadow-focus);--x-input-color-addon-border_default: var(--x-color-transparent);--x-input-color-text: var(--x-field-color-text);--x-input-color-placeholder-text: var(--x-field-color-placeholder);--x-input-color-text_disabled: var(--x-field-color-text-disabled);--x-textarea-color-tip-text: var(--x-color-text-tertiary);--x-input-color-bg_error: var(--x-field-color-bg-error);--x-input-color-bg_error_hover: var(--x-field-color-bg-error-hover);--x-input-color-bg_error_focus: var(--x-field-color-bg-error-focus);--x-input-color-border_error_focus: var(--x-field-color-border-error);--x-input-color-shadow_error_focus: var(--x-field-status-error-shadow-color-focus);--x-input-size-shadow_error_focus: var(--x-field-status-error-shadow-size-focus);--x-input-size-default-height: var(--x-size-default);--x-input-size-mini-height: var(--x-size-mini);--x-input-size-small-height: var(--x-size-small);--x-input-size-large-height: var(--x-size-large);--x-input-border-width: var(--x-border-1);--x-input-border-color: var(--x-field-color-border);--x-input-color-border_disabled: var(--x-field-color-border-disabled);--x-input-color-border_hover: var(--x-field-color-border-hover);--x-input-color-border_error: var(--x-field-color-border-error);--x-input-color-border_error_hover: var(--x-color-transparent);--x-input-size-default-font-size: var(--x-font-size-body-3);--x-input-size-small-font-size: var(--x-font-size-body-3);--x-input-size-large-font-size: var(--x-font-size-body-3);--x-input-size-mini-font-size: var(--x-font-size-body-1);--x-input-font-tip-size: var(--x-font-size-body-1);--x-input-size-mini-icon-suffix-size: var(--x-size-3);--x-input-size-small-icon-suffix-size: 14px;--x-input-size-default-icon-suffix-size: 14px;--x-input-size-large-icon-suffix-size: 14px;--x-input-size-mini-icon-addon-size: var(--x-size-3);--x-input-size-small-icon-addon-size: 14px;--x-input-size-default-icon-addon-size: 14px;--x-input-size-large-icon-addon-size: 14px;--x-input-size-icon-clear: var(--x-size-3);--x-input-color-prefix-text: var(--x-field-color-affix);--x-input-color-suffix-text: var(--x-field-color-affix);--x-input-color-tip-text: var(--x-color-text-tertiary);--x-input-color-icon-clear: var(--x-field-color-icon);--x-input-color-icon-clear-bg_hover: var(--x-color-fill-4);--x-search-color-icon: var(--x-field-color-icon);--x-search-size-icon: 14px;--x-input-padding-horizontal: var(--x-spacing-6);--x-input-margin-left-clear-btn: var(--x-spacing-6);--x-input-spacing-clear-icon-right: var(--x-spacing-4);--x-input-padding-word-limit-left: var(--x-spacing-4);--x-textarea-padding-horizontal: var(--x-spacing-6);--x-textarea-padding-vertical: var(--x-spacing-2);--x-textarea-font-size: var(--x-font-size-body-3);--x-textarea-font-tip-size: var(--x-font-size-body-1);--x-textarea-layout-tip-right: var(--x-spacing-5);--x-textarea-layout-tip-bottom: var(--x-spacing-3);--x-textarea-size-min-height: var(--x-size-default);--x-textarea-size-icon-clear: var(--x-font-size-body-1);--x-textarea-layout-top-icon-clear: var(--x-spacing-5);--x-password-color-eye-icon: var(--x-color-text-2);--x-password-size-eye-icon: var(--x-size-3);--x-input-group-border-radius_compact: var(--x-border-radius-small);--x-input-group-border-separator-width: var(--x-border-1);--x-input-group-color-separator-border: var(--x-color-border-subtle);--x-input-size-medium-height: var(--x-input-size-default-height);--x-input-size-medium-font-size: var(--x-input-size-default-font-size);--x-input-size-mini-line-height: 1.667;--x-input-size-small-line-height: var(--x-line-height-base);--x-input-size-medium-line-height: var(--x-line-height-base);--x-input-size-large-line-height: var(--x-line-height-base);--x-input-size-mini-padding-up-down: 1px;--x-input-size-small-padding-up-down: 2px;--x-input-size-medium-padding-up-down: 3px;--x-input-size-large-padding-up-down: 4px;--x-input-size-huge-padding-up-down: 5px;--x-input-feedback-icon-color_success: var(--x-field-status-success-icon);--x-input-feedback-icon-color_error: var(--x-field-status-error-icon);--x-input-feedback-icon-color_warning: var(--x-field-status-warning-icon);--x-input-feedback-icon-color_validating: var(--x-field-status-validating-icon)}:root{--x-input-number-border-radius: var(--x-input-border-radius);--x-input-number-step-layer-border-radius: 1px;--x-input-number-size-mini-step-button-width: var(--x-size-mini);--x-input-number-size-small-step-button-width: var(--x-size-small);--x-input-number-size-default-step-button-width: var(--x-size-default);--x-input-number-size-large-step-button-width: var(--x-size-large);--x-input-number-step-button-color: var(--x-field-color-icon);--x-input-number-step-button-color_disabled: var(--x-field-color-text-disabled);--x-input-number-step-button-color-border: var(--x-color-border-subtle);--x-input-number-step-button-color-bg_default: var(--x-color-fill-2);--x-input-number-step-button-color-bg_default_hover: var(--x-color-fill-3);--x-input-number-step-button-color-bg_default_active: var(--x-color-fill-4);--x-input-number-step-button-color-bg_disabled: var(--x-field-color-bg-disabled);--x-input-number-step-button-color-bg_disabled_hover: var(--x-field-color-bg-disabled);--x-input-number-step-button-color-bg_disabled_active: var(--x-field-color-bg-disabled)}.x-input-number{position:relative;box-sizing:border-box;width:100%;border-radius:var(--x-input-number-border-radius)}.x-input-number--step--button{display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0;color:var(--x-input-number-step-button-color);background-color:var(--x-input-number-step-button-color-bg_default);cursor:pointer;user-select:none;transition:all var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-input-number--step--button:hover{background-color:var(--x-input-number-step-button-color-bg_default_hover);border-color:var(--x-input-number-step-button-color-bg_default_hover)}.x-input-number--step--button:active{background-color:var(--x-input-number-step-button-color-bg_default_active);border-color:var(--x-input-number-step-button-color-bg_default_active)}.x-input-number--step--button:disabled,.x-input-number--step--button.x-button-is-disabled,.x-input-number--step--button.x-input-number--step--button-disabled{color:var(--x-input-number-step-button-color_disabled);background-color:var(--x-input-number-step-button-color-bg_disabled);cursor:not-allowed}.x-input-number--step--button:disabled:hover,.x-input-number--step--button:disabled:active,.x-input-number--step--button.x-button-is-disabled:hover,.x-input-number--step--button.x-button-is-disabled:active,.x-input-number--step--button.x-input-number--step--button-disabled:hover,.x-input-number--step--button.x-input-number--step--button-disabled:active{background-color:var(--x-input-number-step-button-color-bg_disabled_hover);border-color:var(--x-input-number-step-button-color-border)}.x-input-number.x-input--wrapper,.x-input-number.x-input--outer{position:relative}.x-input-number-prefix,.x-input-number-suffix{transition:all var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-input-number-mode-embed .x-input-number--step{position:absolute;top:4px;right:4px;bottom:4px;width:18px;overflow:hidden;border-radius:var(--x-input-number-step-layer-border-radius);opacity:0;transition:all var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-input-number-mode-embed .x-input-number--step .x-input-number--step--button{width:100%;height:50%;font-size:10px;border:none;border-color:var(--x-input-number-step-button-color-border)}.x-input-number-mode-embed .x-input--suffix{justify-content:flex-end;min-width:6px}.x-input-number-mode-embed .x-input--suffix-has-feedback{min-width:32px}.x-input-number-mode-embed .x-input--suffix-has-feedback .x-input-number--step{right:30px}.x-input-number-mode-embed:not(.x-input-disabled):not(.x-input--outer-disabled):hover .x-input--suffix:has(.x-input-number--suffix),.x-input-number-mode-embed:not(.x-input-disabled):not(.x-input--outer-disabled):focus-within .x-input--suffix:has(.x-input-number--suffix){padding-left:var(--x-spacing-2)}.x-input-number-mode-embed:not(.x-input-disabled):not(.x-input--outer-disabled):hover .x-input-number--step,.x-input-number-mode-embed:not(.x-input-disabled):not(.x-input--outer-disabled):focus-within .x-input-number--step{opacity:1}.x-input-number-mode-embed:not(.x-input-disabled):not(.x-input--outer-disabled):hover .x-input-number--suffix,.x-input-number-mode-embed:not(.x-input-disabled):not(.x-input--outer-disabled):focus-within .x-input-number--suffix{opacity:0;pointer-events:none}.x-input-number-mode-embed.x-input--wrapper:not(.x-input-focus) .x-input-number--step--button:not(.x-input-number--step--button-disabled):hover{background-color:var(--x-input-number-step-button-color-bg_default_active)}.x-input-number-mode-button .x-input--prepend,.x-input-number-mode-button .x-input--append{padding:0;border:none}.x-input-number-mode-button .x-input--prepend,.x-input-number-mode-button .x-input--append,.x-input-number-mode-button .x-input--prepend .x-input-number--step--button,.x-input-number-mode-button .x-input--append .x-input-number--step--button{width:var(--x-input-number-size-default-step-button-width);min-width:var(--x-input-number-size-default-step-button-width);height:100%}.x-input-number-mode-button .x-input--prepend .x-input-number--step--button,.x-input-number-mode-button .x-input--append .x-input-number--step--button{color:var(--x-input-number-step-button-color);background-color:var(--x-input-number-step-button-color-bg_default);border-color:var(--x-input-number-step-button-color-border);border-radius:0}.x-input-number-mode-button .x-input--prepend .x-input-number--step--button .x-button--prefix,.x-input-number-mode-button .x-input--append .x-input-number--step--button .x-button--prefix{margin-right:0}.x-input-number-mode-button .x-input--prepend .x-input-number--step--button .x-icon,.x-input-number-mode-button .x-input--append .x-input-number--step--button .x-icon{width:1em;height:1em;line-height:1}.x-input-number-mode-button .x-input--prepend .x-input-number--step--button{border-right:var(--x-input-border-addon-separator-width) solid var(--x-color-transparent);border-top-right-radius:0;border-bottom-right-radius:0}.x-input-number-mode-button .x-input--prepend .x-input-number--step--button:not(.x-input-number-mode-button .x-input--prepend .x-input-number--step--button:active){border-right-color:var(--x-input-number-step-button-color-border)}.x-input-number-mode-button .x-input--append .x-input-number--step--button{border-left:var(--x-input-border-addon-separator-width) solid var(--x-color-transparent);border-top-left-radius:0;border-bottom-left-radius:0}.x-input-number-mode-button .x-input--append .x-input-number--step--button:not(.x-input-number-mode-button .x-input--append .x-input-number--step--button:active){border-left-color:var(--x-input-number-step-button-color-border)}.x-input-number-mode-button.x-input-number-size-mini .x-input--prepend,.x-input-number-mode-button.x-input-number-size-mini .x-input--append,.x-input-number-mode-button.x-input-number-size-mini .x-input--prepend .x-input-number--step--button,.x-input-number-mode-button.x-input-number-size-mini .x-input--append .x-input-number--step--button{width:var(--x-input-number-size-mini-step-button-width);min-width:var(--x-input-number-size-mini-step-button-width)}.x-input-number-mode-button.x-input-number-size-small .x-input--prepend,.x-input-number-mode-button.x-input-number-size-small .x-input--append,.x-input-number-mode-button.x-input-number-size-small .x-input--prepend .x-input-number--step--button,.x-input-number-mode-button.x-input-number-size-small .x-input--append .x-input-number--step--button{width:var(--x-input-number-size-small-step-button-width);min-width:var(--x-input-number-size-small-step-button-width)}.x-input-number-mode-button.x-input-number-size-large .x-input--prepend,.x-input-number-mode-button.x-input-number-size-large .x-input--append,.x-input-number-mode-button.x-input-number-size-large .x-input--prepend .x-input-number--step--button,.x-input-number-mode-button.x-input-number-size-large .x-input--append .x-input-number--step--button{width:var(--x-input-number-size-large-step-button-width);min-width:var(--x-input-number-size-large-step-button-width)}.x-input-number-readonly .x-input-number--step--button{color:var(--x-input-number-step-button-color_disabled);pointer-events:none}
|
|
1
|
+
:root{--x-input-color-bg: var(--x-field-color-bg);--x-input-color-bg_hover: var(--x-field-color-bg-hover);--x-input-color-bg_focus: var(--x-field-color-bg-focus);--x-input-color-bg_disabled: var(--x-field-color-bg-disabled);--x-input-color-addon-bg: var(--x-input-color-bg);--x-input-color-addon-border: var(--x-color-border-subtle);--x-input-border-addon-separator-width: var(--x-border-1);--x-input-color-border_focus: var(--x-field-color-border-focus);--x-input-color-shadow_focus: var(--x-field-color-shadow-focus);--x-input-size-shadow_focus: var(--x-field-size-shadow-focus);--x-input-color-addon-border_default: var(--x-color-transparent);--x-input-color-text: var(--x-field-color-text);--x-input-color-placeholder-text: var(--x-field-color-placeholder);--x-input-color-text_disabled: var(--x-field-color-text-disabled);--x-textarea-color-tip-text: var(--x-color-text-tertiary);--x-input-color-bg_error: var(--x-field-color-bg-error);--x-input-color-bg_error_hover: var(--x-field-color-bg-error-hover);--x-input-color-bg_error_focus: var(--x-field-color-bg-error-focus);--x-input-color-border_error_focus: var(--x-field-color-border-error);--x-input-color-shadow_error_focus: var(--x-field-status-error-shadow-color-focus);--x-input-size-shadow_error_focus: var(--x-field-status-error-shadow-size-focus);--x-input-size-default-height: var(--x-size-default);--x-input-size-mini-height: var(--x-size-mini);--x-input-size-small-height: var(--x-size-small);--x-input-size-large-height: var(--x-size-large);--x-input-border-width: var(--x-border-1);--x-input-border-color: var(--x-field-color-border);--x-input-color-border_disabled: var(--x-field-color-border-disabled);--x-input-color-border_hover: var(--x-field-color-border-hover);--x-input-color-border_error: var(--x-field-color-border-error);--x-input-color-border_error_hover: var(--x-color-transparent);--x-input-size-default-font-size: var(--x-font-size-body-3);--x-input-size-small-font-size: var(--x-font-size-body-3);--x-input-size-large-font-size: var(--x-font-size-body-3);--x-input-size-mini-font-size: var(--x-font-size-body-1);--x-input-font-tip-size: var(--x-font-size-body-1);--x-input-size-mini-icon-suffix-size: var(--x-size-3);--x-input-size-small-icon-suffix-size: 14px;--x-input-size-default-icon-suffix-size: 14px;--x-input-size-large-icon-suffix-size: 14px;--x-input-size-mini-icon-addon-size: var(--x-size-3);--x-input-size-small-icon-addon-size: 14px;--x-input-size-default-icon-addon-size: 14px;--x-input-size-large-icon-addon-size: 14px;--x-input-size-icon-clear: var(--x-size-3);--x-input-color-prefix-text: var(--x-field-color-affix);--x-input-color-suffix-text: var(--x-field-color-affix);--x-input-color-tip-text: var(--x-color-text-tertiary);--x-input-color-icon-clear: var(--x-field-color-icon);--x-input-color-icon-clear-bg_hover: var(--x-color-fill-4);--x-search-color-icon: var(--x-field-color-icon);--x-search-size-icon: 14px;--x-input-padding-horizontal: var(--x-spacing-6);--x-input-margin-left-clear-btn: var(--x-spacing-6);--x-input-spacing-clear-icon-right: var(--x-spacing-4);--x-input-padding-word-limit-left: var(--x-spacing-4);--x-textarea-padding-horizontal: var(--x-spacing-6);--x-textarea-padding-vertical: var(--x-spacing-2);--x-textarea-font-size: var(--x-font-size-body-3);--x-textarea-font-tip-size: var(--x-font-size-body-1);--x-textarea-layout-tip-right: var(--x-spacing-5);--x-textarea-layout-tip-bottom: var(--x-spacing-3);--x-textarea-size-min-height: var(--x-size-default);--x-textarea-size-icon-clear: var(--x-font-size-body-1);--x-textarea-layout-top-icon-clear: var(--x-spacing-5);--x-password-color-eye-icon: var(--x-color-text-2);--x-password-size-eye-icon: var(--x-size-3);--x-input-group-border-radius_compact: var(--x-border-radius-small);--x-input-group-border-separator-width: var(--x-border-1);--x-input-group-color-separator-border: var(--x-color-border-subtle);--x-input-size-medium-height: var(--x-input-size-default-height);--x-input-size-medium-font-size: var(--x-input-size-default-font-size);--x-input-size-mini-line-height: 1.667;--x-input-size-small-line-height: var(--x-line-height-base);--x-input-size-medium-line-height: var(--x-line-height-base);--x-input-size-large-line-height: var(--x-line-height-base);--x-input-size-mini-padding-up-down: 1px;--x-input-size-small-padding-up-down: 2px;--x-input-size-medium-padding-up-down: 4px;--x-input-size-large-padding-up-down: 6px;--x-input-feedback-icon-color_success: var(--x-field-status-success-icon);--x-input-feedback-icon-color_error: var(--x-field-status-error-icon);--x-input-feedback-icon-color_warning: var(--x-field-status-warning-icon);--x-input-feedback-icon-color_validating: var(--x-field-status-validating-icon)}:root{--x-input-number-border-radius: var(--x-input-border-radius);--x-input-number-step-layer-border-radius: 1px;--x-input-number-step-layer-height: var(--x-input-size-default-height);--x-input-number-size-mini-step-button-width: var(--x-size-mini);--x-input-number-size-small-step-button-width: var(--x-size-small);--x-input-number-size-default-step-button-width: var(--x-size-default);--x-input-number-size-large-step-button-width: var(--x-size-large);--x-input-number-step-button-color: var(--x-field-color-icon);--x-input-number-step-button-color_disabled: var(--x-field-color-text-disabled);--x-input-number-step-button-color-border: var(--x-color-border-subtle);--x-input-number-step-button-color-bg_default: var(--x-color-fill-2);--x-input-number-step-button-color-bg_default_hover: var(--x-color-fill-3);--x-input-number-step-button-color-bg_default_active: var(--x-color-fill-4);--x-input-number-step-button-color-bg_disabled: var(--x-field-color-bg-disabled);--x-input-number-step-button-color-bg_disabled_hover: var(--x-field-color-bg-disabled);--x-input-number-step-button-color-bg_disabled_active: var(--x-field-color-bg-disabled)}.x-input-number{position:relative;box-sizing:border-box;width:100%;border-radius:var(--x-input-number-border-radius)}.x-input-number--step--button{display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0;color:var(--x-input-number-step-button-color);background-color:var(--x-input-number-step-button-color-bg_default);cursor:pointer;user-select:none;transition:all var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-input-number--step--button:hover{background-color:var(--x-input-number-step-button-color-bg_default_hover);border-color:var(--x-input-number-step-button-color-bg_default_hover)}.x-input-number--step--button:active{background-color:var(--x-input-number-step-button-color-bg_default_active);border-color:var(--x-input-number-step-button-color-bg_default_active)}.x-input-number--step--button:disabled,.x-input-number--step--button.x-button-is-disabled,.x-input-number--step--button.x-input-number--step--button-disabled{color:var(--x-input-number-step-button-color_disabled);background-color:var(--x-input-number-step-button-color-bg_disabled);cursor:not-allowed}.x-input-number--step--button:disabled:hover,.x-input-number--step--button:disabled:active,.x-input-number--step--button.x-button-is-disabled:hover,.x-input-number--step--button.x-button-is-disabled:active,.x-input-number--step--button.x-input-number--step--button-disabled:hover,.x-input-number--step--button.x-input-number--step--button-disabled:active{background-color:var(--x-input-number-step-button-color-bg_disabled_hover);border-color:var(--x-input-number-step-button-color-border)}.x-input-number.x-input--wrapper,.x-input-number.x-input--outer{position:relative}.x-input-number-prefix,.x-input-number-suffix{transition:all var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-input-number-mode-embed .x-input-number--step{position:absolute;top:var(--x-spacing-1);right:var(--x-spacing-1);bottom:var(--x-spacing-1);width:var(--x-spacing-8);overflow:hidden;border-radius:var(--x-input-number-step-layer-border-radius);opacity:0;transition:all var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-input-number-mode-embed .x-input-number--step .x-input-number--step--button{display:flex;align-items:center;justify-content:center;width:100%;height:50%;font-size:calc((var(--x-input-number-step-layer-height) - 4*var(--x-spacing-1))/2);line-height:1;border:none;border-color:var(--x-input-number-step-button-color-border)}.x-input-number-mode-embed .x-input-number--step .x-input-number--step--button>.x-icon{flex:0 0 auto;width:1em;height:1em}.x-input-number-mode-embed .x-input--suffix{justify-content:flex-end;min-width:6px}.x-input-number-mode-embed .x-input--suffix-has-feedback{min-width:32px}.x-input-number-mode-embed .x-input--suffix-has-feedback .x-input-number--step{right:30px}.x-input-number-mode-embed:not(.x-input-disabled):not(.x-input--outer-disabled):hover .x-input--suffix:has(.x-input-number--suffix),.x-input-number-mode-embed:not(.x-input-disabled):not(.x-input--outer-disabled):focus-within .x-input--suffix:has(.x-input-number--suffix){padding-left:var(--x-spacing-2)}.x-input-number-mode-embed:not(.x-input-disabled):not(.x-input--outer-disabled):hover .x-input-number--step,.x-input-number-mode-embed:not(.x-input-disabled):not(.x-input--outer-disabled):focus-within .x-input-number--step{opacity:1}.x-input-number-mode-embed:not(.x-input-disabled):not(.x-input--outer-disabled):hover .x-input-number--suffix,.x-input-number-mode-embed:not(.x-input-disabled):not(.x-input--outer-disabled):focus-within .x-input-number--suffix{opacity:0;pointer-events:none}.x-input-number-mode-embed.x-input--wrapper:not(.x-input-focus) .x-input-number--step--button:not(.x-input-number--step--button-disabled):hover{background-color:var(--x-input-number-step-button-color-bg_default_active)}.x-input-number-mode-button .x-input--prepend:has(.x-input-number--step--button),.x-input-number-mode-button .x-input--append:has(.x-input-number--step--button){padding:0;border:none}.x-input-number-mode-button .x-input--prepend .x-input-number--step--button,.x-input-number-mode-button .x-input--append .x-input-number--step--button{width:var(--x-input-number-size-default-step-button-width);min-width:var(--x-input-number-size-default-step-button-width);color:var(--x-input-number-step-button-color);background-color:var(--x-input-number-step-button-color-bg_default);border-color:var(--x-input-number-step-button-color-border);border-radius:0}.x-input-number-mode-button .x-input--prepend .x-input-number--step--button .x-button--prefix,.x-input-number-mode-button .x-input--append .x-input-number--step--button .x-button--prefix{margin-right:0}.x-input-number-mode-button .x-input--prepend .x-input-number--step--button .x-icon,.x-input-number-mode-button .x-input--append .x-input-number--step--button .x-icon{width:1em;height:1em;line-height:1}.x-input-number-mode-button .x-input--prepend .x-input-number--step--button:not(.x-button-is-disabled):not(:disabled):hover,.x-input-number-mode-button .x-input--append .x-input-number--step--button:not(.x-button-is-disabled):not(:disabled):hover{background-color:var(--x-input-number-step-button-color-bg_default_hover)}.x-input-number-mode-button .x-input--prepend .x-input-number--step--button:not(.x-button-is-disabled):not(:disabled):active,.x-input-number-mode-button .x-input--append .x-input-number--step--button:not(.x-button-is-disabled):not(:disabled):active{background-color:var(--x-input-number-step-button-color-bg_default_active)}.x-input-number-mode-button .x-input--prepend .x-input-number--step--button{border-right:var(--x-input-border-addon-separator-width) solid var(--x-color-transparent);border-top-right-radius:0;border-bottom-right-radius:0}.x-input-number-mode-button .x-input--prepend .x-input-number--step--button:not(.x-input-number-mode-button .x-input--prepend .x-input-number--step--button:active){border-right-color:var(--x-input-number-step-button-color-border)}.x-input-number-mode-button .x-input--append .x-input-number--step--button{border-left:var(--x-input-border-addon-separator-width) solid var(--x-color-transparent);border-top-left-radius:0;border-bottom-left-radius:0}.x-input-number-mode-button .x-input--append .x-input-number--step--button:not(.x-input-number-mode-button .x-input--append .x-input-number--step--button:active){border-left-color:var(--x-input-number-step-button-color-border)}.x-input-number-mode-button.x-input-number-readonly .x-input--prepend .x-input-number--step--button,.x-input-number-mode-button.x-input-number-readonly .x-input--append .x-input-number--step--button{color:var(--x-input-number-step-button-color_disabled);background-color:var(--x-input-number-step-button-color-bg_default)}.x-input-number-mode-button.x-input-number-size-mini{--x-input-number-step-layer-height: var(--x-input-size-mini-height)}.x-input-number-mode-button.x-input-number-size-mini .x-input--prepend .x-input-number--step--button,.x-input-number-mode-button.x-input-number-size-mini .x-input--append .x-input-number--step--button{width:var(--x-input-number-size-mini-step-button-width);min-width:var(--x-input-number-size-mini-step-button-width)}.x-input-number-mode-button.x-input-number-size-small{--x-input-number-step-layer-height: var(--x-input-size-small-height)}.x-input-number-mode-button.x-input-number-size-small .x-input--prepend .x-input-number--step--button,.x-input-number-mode-button.x-input-number-size-small .x-input--append .x-input-number--step--button{width:var(--x-input-number-size-small-step-button-width);min-width:var(--x-input-number-size-small-step-button-width)}.x-input-number-mode-button.x-input-number-size-large{--x-input-number-step-layer-height: var(--x-input-size-large-height)}.x-input-number-mode-button.x-input-number-size-large .x-input--prepend .x-input-number--step--button,.x-input-number-mode-button.x-input-number-size-large .x-input--append .x-input-number--step--button{width:var(--x-input-number-size-large-step-button-width);min-width:var(--x-input-number-size-large-step-button-width)}.x-input-number-readonly .x-input-number--step--button{color:var(--x-input-number-step-button-color_disabled);pointer-events:none}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--x-input-color-bg: var(--x-field-color-bg);--x-input-color-bg_hover: var(--x-field-color-bg-hover);--x-input-color-bg_focus: var(--x-field-color-bg-focus);--x-input-color-bg_disabled: var(--x-field-color-bg-disabled);--x-input-color-addon-bg: var(--x-input-color-bg);--x-input-color-addon-border: var(--x-color-border-subtle);--x-input-border-addon-separator-width: var(--x-border-1);--x-input-color-border_focus: var(--x-field-color-border-focus);--x-input-color-shadow_focus: var(--x-field-color-shadow-focus);--x-input-size-shadow_focus: var(--x-field-size-shadow-focus);--x-input-color-addon-border_default: var(--x-color-transparent);--x-input-color-text: var(--x-field-color-text);--x-input-color-placeholder-text: var(--x-field-color-placeholder);--x-input-color-text_disabled: var(--x-field-color-text-disabled);--x-textarea-color-tip-text: var(--x-color-text-tertiary);--x-input-color-bg_error: var(--x-field-color-bg-error);--x-input-color-bg_error_hover: var(--x-field-color-bg-error-hover);--x-input-color-bg_error_focus: var(--x-field-color-bg-error-focus);--x-input-color-border_error_focus: var(--x-field-color-border-error);--x-input-color-shadow_error_focus: var(--x-field-status-error-shadow-color-focus);--x-input-size-shadow_error_focus: var(--x-field-status-error-shadow-size-focus);--x-input-size-default-height: var(--x-size-default);--x-input-size-mini-height: var(--x-size-mini);--x-input-size-small-height: var(--x-size-small);--x-input-size-large-height: var(--x-size-large);--x-input-border-width: var(--x-border-1);--x-input-border-color: var(--x-field-color-border);--x-input-color-border_disabled: var(--x-field-color-border-disabled);--x-input-color-border_hover: var(--x-field-color-border-hover);--x-input-color-border_error: var(--x-field-color-border-error);--x-input-color-border_error_hover: var(--x-color-transparent);--x-input-size-default-font-size: var(--x-font-size-body-3);--x-input-size-small-font-size: var(--x-font-size-body-3);--x-input-size-large-font-size: var(--x-font-size-body-3);--x-input-size-mini-font-size: var(--x-font-size-body-1);--x-input-font-tip-size: var(--x-font-size-body-1);--x-input-size-mini-icon-suffix-size: var(--x-size-3);--x-input-size-small-icon-suffix-size: 14px;--x-input-size-default-icon-suffix-size: 14px;--x-input-size-large-icon-suffix-size: 14px;--x-input-size-mini-icon-addon-size: var(--x-size-3);--x-input-size-small-icon-addon-size: 14px;--x-input-size-default-icon-addon-size: 14px;--x-input-size-large-icon-addon-size: 14px;--x-input-size-icon-clear: var(--x-size-3);--x-input-color-prefix-text: var(--x-field-color-affix);--x-input-color-suffix-text: var(--x-field-color-affix);--x-input-color-tip-text: var(--x-color-text-tertiary);--x-input-color-icon-clear: var(--x-field-color-icon);--x-input-color-icon-clear-bg_hover: var(--x-color-fill-4);--x-search-color-icon: var(--x-field-color-icon);--x-search-size-icon: 14px;--x-input-padding-horizontal: var(--x-spacing-6);--x-input-margin-left-clear-btn: var(--x-spacing-6);--x-input-spacing-clear-icon-right: var(--x-spacing-4);--x-input-padding-word-limit-left: var(--x-spacing-4);--x-textarea-padding-horizontal: var(--x-spacing-6);--x-textarea-padding-vertical: var(--x-spacing-2);--x-textarea-font-size: var(--x-font-size-body-3);--x-textarea-font-tip-size: var(--x-font-size-body-1);--x-textarea-layout-tip-right: var(--x-spacing-5);--x-textarea-layout-tip-bottom: var(--x-spacing-3);--x-textarea-size-min-height: var(--x-size-default);--x-textarea-size-icon-clear: var(--x-font-size-body-1);--x-textarea-layout-top-icon-clear: var(--x-spacing-5);--x-password-color-eye-icon: var(--x-color-text-2);--x-password-size-eye-icon: var(--x-size-3);--x-input-group-border-radius_compact: var(--x-border-radius-small);--x-input-group-border-separator-width: var(--x-border-1);--x-input-group-color-separator-border: var(--x-color-border-subtle);--x-input-size-medium-height: var(--x-input-size-default-height);--x-input-size-medium-font-size: var(--x-input-size-default-font-size);--x-input-size-mini-line-height: 1.667;--x-input-size-small-line-height: var(--x-line-height-base);--x-input-size-medium-line-height: var(--x-line-height-base);--x-input-size-large-line-height: var(--x-line-height-base);--x-input-size-mini-padding-up-down: 1px;--x-input-size-small-padding-up-down: 2px;--x-input-size-medium-padding-up-down: 3px;--x-input-size-large-padding-up-down: 4px;--x-input-size-huge-padding-up-down: 5px;--x-input-feedback-icon-color_success: var(--x-field-status-success-icon);--x-input-feedback-icon-color_error: var(--x-field-status-error-icon);--x-input-feedback-icon-color_warning: var(--x-field-status-warning-icon);--x-input-feedback-icon-color_validating: var(--x-field-status-validating-icon)}.x-tag{display:inline-flex;align-items:center;box-sizing:border-box;height:24px;padding:4px 8px;color:var(--x-tag-color-text-default);font-weight:500;font-size:12px;line-height:14px;vertical-align:middle;border:1px solid var(--x-color-transparent);border-radius:2px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.x-tag .x-icon-hover.x-icon-hover::before{width:14px;height:14px}.x-tag .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-bg-default-hover)}.x-tag-selectable{cursor:pointer;transition:all .3s linear}.x-tag-selectable:hover{background-color:var(--x-tag-color-bg-default-hover);border-color:var(--x-tag-color-border-default-hover)}.x-tag-checked{background-color:var(--x-tag-color-bg-default)}.x-tag-bordered{border-color:var(--x-tag-color-border-default-bordered)}.x-tag-size-small{height:20px;font-size:12px;line-height:18px}.x-tag-size-medium{height:24px;font-size:12px;line-height:22px}.x-tag-size-large{height:28px;font-size:14px;line-height:26px}.x-tag-hide{display:none}.x-tag-loading{cursor:default;opacity:.8}.x-tag-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-tag-color-red{color:var(--x-tag-color-red-text);background-color:var(--x-tag-color-red-bg);border:1px solid var(--x-tag-color-red-border)}.x-tag-color-red .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-red-icon-bg_hover)}.x-tag-color-red.x-tag-bordered{border-color:var(--x-tag-color-red-text)}.x-tag-color-red.x-tag-selectable:hover{background-color:var(--x-tag-color-red-border-hover);border-color:var(--x-tag-color-red-text)}.x-tag-color-red .x-tag--close-icon:hover{color:var(--x-tag-color-red-text)}.x-tag-color-orangered{color:var(--x-tag-color-orangered-text);background-color:var(--x-tag-color-orangered-bg);border:1px solid var(--x-tag-color-orangered-border)}.x-tag-color-orangered .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-orangered-icon-bg_hover)}.x-tag-color-orangered.x-tag-bordered{border-color:var(--x-tag-color-orangered-text)}.x-tag-color-orangered.x-tag-selectable:hover{background-color:var(--x-tag-color-orangered-border-hover);border-color:var(--x-tag-color-orangered-text)}.x-tag-color-orangered .x-tag--close-icon:hover{color:var(--x-tag-color-orangered-text)}.x-tag-color-orange{color:var(--x-tag-color-orange-text);background-color:var(--x-tag-color-orange-bg);border:1px solid var(--x-tag-color-orange-border)}.x-tag-color-orange .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-orange-icon-bg_hover)}.x-tag-color-orange.x-tag-bordered{border-color:var(--x-tag-color-orange-text)}.x-tag-color-orange.x-tag-selectable:hover{background-color:var(--x-tag-color-orange-border-hover);border-color:var(--x-tag-color-orange-text)}.x-tag-color-orange .x-tag--close-icon:hover{color:var(--x-tag-color-orange-text)}.x-tag-color-gold{color:var(--x-tag-color-gold-text);background-color:var(--x-tag-color-gold-bg);border:1px solid var(--x-tag-color-gold-border)}.x-tag-color-gold .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-gold-icon-bg_hover)}.x-tag-color-gold.x-tag-bordered{border-color:var(--x-tag-color-gold-text)}.x-tag-color-gold.x-tag-selectable:hover{background-color:var(--x-tag-color-gold-border-hover);border-color:var(--x-tag-color-gold-text)}.x-tag-color-gold .x-tag--close-icon:hover{color:var(--x-tag-color-gold-text)}.x-tag-color-lime{color:var(--x-tag-color-lime-text);background-color:var(--x-tag-color-lime-bg);border:1px solid var(--x-tag-color-lime-border)}.x-tag-color-lime .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-lime-icon-bg_hover)}.x-tag-color-lime.x-tag-bordered{border-color:var(--x-tag-color-lime-text)}.x-tag-color-lime.x-tag-selectable:hover{background-color:var(--x-tag-color-lime-border-hover);border-color:var(--x-tag-color-lime-text)}.x-tag-color-lime .x-tag--close-icon:hover{color:var(--x-tag-color-lime-text)}.x-tag-color-green{color:var(--x-tag-color-green-text);background-color:var(--x-tag-color-green-bg);border:1px solid var(--x-tag-color-green-border)}.x-tag-color-green .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-green-icon-bg_hover)}.x-tag-color-green.x-tag-bordered{border-color:var(--x-tag-color-green-text)}.x-tag-color-green.x-tag-selectable:hover{background-color:var(--x-tag-color-green-border-hover);border-color:var(--x-tag-color-green-text)}.x-tag-color-green .x-tag--close-icon:hover{color:var(--x-tag-color-green-text)}.x-tag-color-cyan{color:var(--x-tag-color-cyan-text);background-color:var(--x-tag-color-cyan-bg);border:1px solid var(--x-tag-color-cyan-border)}.x-tag-color-cyan .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-cyan-icon-bg_hover)}.x-tag-color-cyan.x-tag-bordered{border-color:var(--x-tag-color-cyan-text)}.x-tag-color-cyan.x-tag-selectable:hover{background-color:var(--x-tag-color-cyan-border-hover);border-color:var(--x-tag-color-cyan-text)}.x-tag-color-cyan .x-tag--close-icon:hover{color:var(--x-tag-color-cyan-text)}.x-tag-color-better-blue{color:var(--x-tag-color-better-blue-text);background-color:var(--x-tag-color-better-blue-bg);border:1px solid var(--x-tag-color-better-blue-border)}.x-tag-color-better-blue .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-better-blue-icon-bg_hover)}.x-tag-color-better-blue.x-tag-bordered{border-color:var(--x-tag-color-better-blue-text)}.x-tag-color-better-blue.x-tag-selectable:hover{background-color:var(--x-tag-color-better-blue-border-hover);border-color:var(--x-tag-color-better-blue-text)}.x-tag-color-better-blue .x-tag--close-icon:hover{color:var(--x-tag-color-better-blue-text)}.x-tag-color-blue{color:var(--x-tag-color-blue-text);background-color:var(--x-tag-color-blue-bg);border:1px solid var(--x-tag-color-blue-border)}.x-tag-color-blue .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-blue-icon-bg_hover)}.x-tag-color-blue.x-tag-bordered{border-color:var(--x-tag-color-blue-text)}.x-tag-color-blue.x-tag-selectable:hover{background-color:var(--x-tag-color-blue-border-hover);border-color:var(--x-tag-color-blue-text)}.x-tag-color-blue .x-tag--close-icon:hover{color:var(--x-tag-color-blue-text)}.x-tag-color-purple{color:var(--x-tag-color-purple-text);background-color:var(--x-tag-color-purple-bg);border:1px solid var(--x-tag-color-purple-border)}.x-tag-color-purple .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-purple-icon-bg_hover)}.x-tag-color-purple.x-tag-bordered{border-color:var(--x-tag-color-purple-text)}.x-tag-color-purple.x-tag-selectable:hover{background-color:var(--x-tag-color-purple-border-hover);border-color:var(--x-tag-color-purple-text)}.x-tag-color-purple .x-tag--close-icon:hover{color:var(--x-tag-color-purple-text)}.x-tag-color-pink-purple{color:var(--x-tag-color-pink-purple-text);background-color:var(--x-tag-color-pink-purple-bg);border:1px solid var(--x-tag-color-pink-purple-border)}.x-tag-color-pink-purple .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-pink-purple-icon-bg_hover)}.x-tag-color-pink-purple.x-tag-bordered{border-color:var(--x-tag-color-pink-purple-text)}.x-tag-color-pink-purple.x-tag-selectable:hover{background-color:var(--x-tag-color-pink-purple-border-hover);border-color:var(--x-tag-color-pink-purple-text)}.x-tag-color-pink-purple .x-tag--close-icon:hover{color:var(--x-tag-color-pink-purple-text)}.x-tag-color-magenta{color:var(--x-tag-color-magenta-text);background-color:var(--x-tag-color-magenta-bg);border:1px solid var(--x-tag-color-magenta-border)}.x-tag-color-magenta .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-magenta-icon-bg_hover)}.x-tag-color-magenta.x-tag-bordered{border-color:var(--x-tag-color-magenta-text)}.x-tag-color-magenta.x-tag-selectable:hover{background-color:var(--x-tag-color-magenta-border-hover);border-color:var(--x-tag-color-magenta-text)}.x-tag-color-magenta .x-tag--close-icon:hover{color:var(--x-tag-color-magenta-text)}.x-tag-color-gray{color:var(--x-tag-color-gray-text);background-color:var(--x-tag-color-gray-bg);border:1px solid var(--x-tag-color-gray-border)}.x-tag-color-gray .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-gray-icon-bg_hover)}.x-tag-color-gray.x-tag-bordered{border-color:var(--x-tag-color-gray-text)}.x-tag-color-gray.x-tag-selectable:hover{background-color:var(--x-tag-color-gray-border-hover);border-color:var(--x-tag-color-gray-text)}.x-tag-color-gray .x-tag--close-icon:hover{color:var(--x-tag-color-gray-text)}.x-tag-custom-color{color:var(--x-tag-custom-color-text)}.x-tag-custom-color .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-custom-color-icon-bg_hover)}.x-tag-custom-color .x-tag--close-icon:hover{color:var(--x-tag-custom-color-text)}.x-tag--close-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:14px;height:14px;margin-left:4px;font-size:12px;line-height:1;border-radius:50%;cursor:pointer;transition:all .2s ease-in-out}.x-tag--close-icon>.x-icon,.x-tag--close-icon>svg{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;line-height:1}.x-tag--close-icon>svg{position:relative}.x-tag--icon{margin-right:6px;color:currentcolor}.x-tag--loading-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:14px;height:14px;margin-left:4px;font-size:12px;line-height:1}.x-tag--loading-icon>.x-icon,.x-tag--loading-icon>svg{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;line-height:1}:root{--x-input-tag-size-mini-height: var(--x-size-mini);--x-input-tag-size-small-height: var(--x-size-small);--x-input-tag-size-default-height: var(--x-size-default);--x-input-tag-size-large-height: var(--x-size-large);--x-input-tag-size-mini-tag-height: var(--x-size-5);--x-input-tag-size-small-tag-height: var(--x-size-5);--x-input-tag-size-default-tag-height: var(--x-size-6);--x-input-tag-size-large-tag-height: var(--x-size-7);--x-input-tag-size-mini-tag-height-2px: 18px;--x-input-tag-size-small-tag-height-2px: 18px;--x-input-tag-size-default-tag-height-2px: 22px;--x-input-tag-size-large-tag-height-2px: 26px;--x-input-tag-size-mini-padding-top-bottom: 1px;--x-input-tag-size-small-padding-top-bottom: 3px;--x-input-tag-size-default-padding-top-bottom: 3px;--x-input-tag-size-large-padding-top-bottom: 4px;--x-input-tag-size-mini-font-size: var(--x-font-size-body-1);--x-input-tag-size-small-font-size: var(--x-font-size-body-3);--x-input-tag-size-default-font-size: var(--x-font-size-body-3);--x-input-tag-size-large-font-size: var(--x-font-size-body-3);--x-input-tag-color-text_default: var(--x-field-color-text);--x-input-tag-color-text_error: var(--x-field-color-text);--x-input-tag-color-text_disabled: var(--x-field-color-text-disabled);--x-input-tag-color-placeholder: var(--x-field-color-placeholder);--x-input-tag-color-icon-clear: var(--x-field-color-icon);--x-input-tag-color-icon-clear-bg_hover: var(--x-color-fill-4);--x-input-tag-color-border_default: var(--x-field-color-border);--x-input-tag-color-border_default_hover: var(--x-field-color-border-hover);--x-input-tag-color-border_default_focus: var(--x-field-color-border-focus);--x-input-tag-color-border_error: var(--x-color-transparent);--x-input-tag-color-border_error_hover: var(--x-color-transparent);--x-input-tag-color-border_error_focus: var(--x-field-color-border-error);--x-input-tag-color-border_disabled: var(--x-field-color-border-disabled);--x-input-tag-color-border_disabled_hover: var(--x-input-tag-color-border_disabled);--x-input-tag-color-border_disabled_focus: var(--x-input-tag-color-border_disabled);--x-input-tag-color-bg_default: var(--x-field-color-bg);--x-input-tag-color-bg_default_hover: var(--x-field-color-bg-hover);--x-input-tag-color-bg_default_focus: var(--x-field-color-bg-focus);--x-input-tag-color-bg_error: var(--x-field-color-bg-error);--x-input-tag-color-bg_error_hover: var(--x-field-color-bg-error-hover);--x-input-tag-color-bg_error_focus: var(--x-field-color-bg-error-focus);--x-input-tag-color-bg_disabled: var(--x-field-color-bg-disabled);--x-input-tag-color-bg_disabled_hover: var(--x-input-tag-color-bg_disabled);--x-input-tag-color-shadow_default_focus: var(--x-field-color-shadow-focus);--x-input-tag-color-shadow_error_focus: var(--x-field-status-error-shadow-color-focus);--x-input-tag-size-shadow_error_focus: var(--x-field-status-error-shadow-size-focus);--x-input-tag-size-shadow_default_focus: var(--x-field-size-shadow-focus);--x-input-tag-tag-margin-right: var(--x-spacing-2);--x-input-tag-tag-margin-vertical: var(--x-spacing-1);--x-input-tag-tag-margin-vertical-division-2: 1px;--x-input-tag-padding-horizontal: var(--x-spacing-2);--x-input-tag-border-radius: var(--x-border-radius-small);--x-input-tag-border-width: var(--x-border-1);--x-input-tag-size-icon-clear: var(--x-size-3);--x-input-tag-size-icon-clear_hover: var(--x-size-5);--x-input-tag-tag-font-size: var(--x-font-size-body-1);--x-input-tag-tag-color-bg: var(--x-color-bg-2);--x-input-tag-tag-color-bg_focus: var(--x-color-fill-2);--x-input-tag-tag-color-bg_disabled: var(--x-color-fill-2);--x-input-tag-tag-color-border: var(--x-color-fill-3);--x-input-tag-tag-color-border_disabled: var(--x-color-fill-3);--x-input-tag-tag-color-border_focus: var(--x-color-fill-2);--x-input-tag-tag-remove-icon-color-bg: var(--x-color-fill-2);--x-input-tag-tag-remove-icon-color-bg_focus: var(--x-color-fill-3);--x-input-tag-size-medium-height: var(--x-input-tag-size-default-height);--x-input-tag-size-medium-tag-height: var(--x-input-tag-size-default-tag-height);--x-input-tag-size-medium-tag-height-2px: var(--x-input-tag-size-default-tag-height-2px);--x-input-tag-size-medium-padding-top-bottom: var( --x-input-tag-size-default-padding-top-bottom );--x-input-tag-size-medium-font-size: var(--x-input-tag-size-default-font-size)}.x-input-tag{display:inline-flex;align-items:center;box-sizing:border-box;width:100%;min-width:0;padding-right:var(--x-input-padding-horizontal);padding-left:var(--x-input-padding-horizontal);color:var(--x-input-color-text);font-size:var(--x-input-size-default-font-size);background-color:var(--x-input-color-bg);border:var(--x-input-border-width) solid var(--x-input-border-color);border-radius:var(--x-input-border-radius);cursor:text;transition:color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),border-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-input-tag:hover{background-color:var(--x-input-color-bg_hover);border-color:var(--x-input-color-border_hover)}.x-input-tag:focus-within,.x-input-tag.x-input-tag-focus{z-index:1;background-color:var(--x-input-color-bg_focus);border-color:var(--x-input-color-border_focus);box-shadow:0 0 0 var(--x-input-size-shadow_focus) var(--x-input-color-shadow_focus)}.x-input-tag.x-input-tag-disabled{color:var(--x-input-color-text_disabled);background-color:var(--x-input-color-bg_disabled);border-color:var(--x-input-color-border_disabled);cursor:not-allowed}.x-input-tag.x-input-tag-disabled:hover{color:var(--x-input-color-text_disabled);background-color:var(--x-input-color-bg_disabled);border-color:var(--x-input-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--prefix,.x-input-tag.x-input-tag-disabled .x-input-tag--suffix{color:inherit}.x-input-tag.x-input-tag-error{background-color:var(--x-input-color-bg_error);border-color:var(--x-input-color-border_error)}.x-input-tag.x-input-tag-error:hover{background-color:var(--x-input-color-bg_error_hover);border-color:var(--x-input-color-border_error_hover)}.x-input-tag.x-input-tag-error:focus-within,.x-input-tag.x-input-tag-error.x-input-tag-focus{z-index:1;background-color:var(--x-input-color-bg_error_focus);border-color:var(--x-input-color-border_error_focus);box-shadow:0 0 0 var(--x-input-size-shadow_error_focus) var(--x-input-color-shadow_error_focus)}.x-input-tag .x-input-tag--prefix,.x-input-tag .x-input-tag--suffix{display:inline-flex;flex-shrink:0;align-items:center;white-space:nowrap;user-select:none}.x-input-tag .x-input-tag--prefix>svg,.x-input-tag .x-input-tag--suffix>svg{font-size:var(--x-input-size-default-icon-suffix-size)}.x-input-tag .x-input-tag--prefix{padding-right:var(--x-input-padding-horizontal);color:var(--x-input-color-prefix-text)}.x-input-tag .x-input-tag--suffix{padding-left:var(--x-input-padding-horizontal);color:var(--x-input-color-suffix-text)}.x-input-tag .x-input-tag--suffix .x-feedback-icon{display:inline-flex}.x-input-tag .x-input-tag--suffix .x-feedback-icon-status-validating{color:var(--x-input-feedback-icon-color_validating)}.x-input-tag .x-input-tag--suffix .x-feedback-icon-status-success{color:var(--x-input-feedback-icon-color_success)}.x-input-tag .x-input-tag--suffix .x-feedback-icon-status-warning{color:var(--x-input-feedback-icon-color_warning)}.x-input-tag .x-input-tag--suffix .x-feedback-icon-status-error{color:var(--x-input-feedback-icon-color_error)}.x-input-tag .x-input-tag--clear-btn{flex-shrink:0;align-self:center;margin-left:var(--x-input-margin-left-clear-btn);color:var(--x-input-color-icon-clear);font-size:var(--x-input-size-icon-clear);visibility:hidden;cursor:pointer}.x-input-tag .x-input-tag--clear-btn>svg{position:relative;transition:color var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-input-tag:hover .x-input-tag--clear-btn{visibility:visible}.x-input-tag:not(.x-input-tag-focus) .x-input-tag-icon-hover:hover::before{background-color:var(--x-input-color-icon-clear-bg_hover)}.x-input-tag.x-input-tag-has-tag{padding-right:var(--x-input-tag-padding-horizontal);padding-left:var(--x-input-tag-padding-horizontal)}.x-input-tag.x-input-tag-has-prefix{padding-left:var(--x-input-padding-horizontal)}.x-input-tag.x-input-tag-has-suffix{padding-right:var(--x-input-padding-horizontal)}.x-input-tag .x-input-tag--inner{flex:1;overflow:hidden;line-height:0}.x-input-tag .x-input-tag--inner.x-input-tag-nowrap{display:flex;flex-wrap:wrap}.x-input-tag .x-input-tag--inner .x-input-tag--tag{display:inline-flex;align-items:center;margin-right:var(--x-input-tag-tag-margin-right);color:var(--x-input-tag-color-text_default);font-size:var(--x-input-tag-tag-font-size);white-space:pre-wrap;word-break:break-word;background-color:var(--x-input-tag-tag-color-bg);border-color:var(--x-input-tag-tag-color-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag .x-icon-hover:hover::before{background-color:var(--x-input-tag-tag-remove-icon-color-bg)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-custom-color{color:var(--x-tag-custom-color-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-custom-color .x-icon-hover.x-tag-icon-hover:hover::before{background-color:var(--x-tag-custom-color-icon-bg_hover)}.x-input-tag .x-input-tag--inner.x-input-tag-nowrap .x-input-tag--tag{white-space:nowrap;word-break:normal}.x-input-tag .x-input-tag--inner .x-input-tag--input{width:100%;min-width:0;padding-right:0;padding-left:0;color:inherit;line-height:var(--x-line-height-base);background:none;border:none;border-radius:0;outline:none;cursor:inherit;-webkit-appearance:none;-webkit-tap-highlight-color:var(--x-color-transparent)}.x-input-tag .x-input-tag--inner .x-input-tag--input::placeholder{color:var(--x-input-color-placeholder-text)}.x-input-tag .x-input-tag--inner .x-input-tag--input[disabled]::placeholder{color:var(--x-input-color-text_disabled)}.x-input-tag .x-input-tag--inner .x-input-tag--input[disabled]{-webkit-text-fill-color:var(--x-input-color-text_disabled)}.x-input-tag .x-input-tag--inner .x-input-tag--input{box-sizing:border-box}.x-input-tag .x-input-tag--mirror{position:absolute;top:0;left:0;white-space:pre;visibility:hidden;pointer-events:none}.x-input-tag.x-input-tag-focus .x-input-tag--tag{background-color:var(--x-input-tag-tag-color-bg_focus);border-color:var(--x-input-tag-tag-color-border_focus)}.x-input-tag.x-input-tag-focus .x-input-tag--tag .x-icon-hover:hover::before{background-color:var(--x-input-tag-tag-remove-icon-color-bg_focus)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-readonly,.x-input-tag.x-input-tag-disabled-input{cursor:default}.x-input-tag.x-input-tag-size-mini{font-size:var(--x-input-tag-size-mini-font-size)}.x-input-tag.x-input-tag-size-mini .x-input-tag--inner{padding-top:var(--x-input-tag-size-mini-padding-top-bottom);padding-bottom:var(--x-input-tag-size-mini-padding-top-bottom)}.x-input-tag.x-input-tag-size-mini .x-input-tag--tag,.x-input-tag.x-input-tag-size-mini .x-input-tag--input{margin-top:var(--x-input-tag-tag-margin-vertical-division-2);margin-bottom:var(--x-input-tag-tag-margin-vertical-division-2);line-height:var(--x-input-tag-size-mini-tag-height-2px);vertical-align:middle}.x-input-tag.x-input-tag-size-mini .x-input-tag--tag,.x-input-tag.x-input-tag-size-mini .x-input-tag--input{height:auto;min-height:var(--x-input-tag-size-mini-tag-height)}.x-input-tag.x-input-tag-size-medium{font-size:var(--x-input-tag-size-medium-font-size)}.x-input-tag.x-input-tag-size-medium .x-input-tag--inner{padding-top:var(--x-input-tag-size-medium-padding-top-bottom);padding-bottom:var(--x-input-tag-size-medium-padding-top-bottom)}.x-input-tag.x-input-tag-size-medium .x-input-tag--tag,.x-input-tag.x-input-tag-size-medium .x-input-tag--input{margin-top:var(--x-input-tag-tag-margin-vertical-division-2);margin-bottom:var(--x-input-tag-tag-margin-vertical-division-2);line-height:var(--x-input-tag-size-medium-tag-height-2px);vertical-align:middle}.x-input-tag.x-input-tag-size-medium .x-input-tag--tag,.x-input-tag.x-input-tag-size-medium .x-input-tag--input{height:auto;min-height:var(--x-input-tag-size-medium-tag-height)}.x-input-tag.x-input-tag-size-small{font-size:var(--x-input-tag-size-small-font-size)}.x-input-tag.x-input-tag-size-small .x-input-tag--inner{padding-top:var(--x-input-tag-size-small-padding-top-bottom);padding-bottom:var(--x-input-tag-size-small-padding-top-bottom)}.x-input-tag.x-input-tag-size-small .x-input-tag--tag,.x-input-tag.x-input-tag-size-small .x-input-tag--input{margin-top:var(--x-input-tag-tag-margin-vertical-division-2);margin-bottom:var(--x-input-tag-tag-margin-vertical-division-2);line-height:var(--x-input-tag-size-small-tag-height-2px);vertical-align:middle}.x-input-tag.x-input-tag-size-small .x-input-tag--tag,.x-input-tag.x-input-tag-size-small .x-input-tag--input{height:auto;min-height:var(--x-input-tag-size-small-tag-height)}.x-input-tag.x-input-tag-size-large{font-size:var(--x-input-tag-size-large-font-size)}.x-input-tag.x-input-tag-size-large .x-input-tag--inner{padding-top:var(--x-input-tag-size-large-padding-top-bottom);padding-bottom:var(--x-input-tag-size-large-padding-top-bottom)}.x-input-tag.x-input-tag-size-large .x-input-tag--tag,.x-input-tag.x-input-tag-size-large .x-input-tag--input{margin-top:var(--x-input-tag-tag-margin-vertical-division-2);margin-bottom:var(--x-input-tag-tag-margin-vertical-division-2);line-height:var(--x-input-tag-size-large-tag-height-2px);vertical-align:middle}.x-input-tag.x-input-tag-size-large .x-input-tag--tag,.x-input-tag.x-input-tag-size-large .x-input-tag--input{height:auto;min-height:var(--x-input-tag-size-large-tag-height)}.input-tag-zoom-enter-from{transform:scale(0.5, 0.5);opacity:0}.input-tag-zoom-enter-to{transform:scale(1, 1);opacity:1}.input-tag-zoom-enter-active{transition:all var(--x-transition-duration-3) var(--x-transition-timing-function-standard)}.input-tag-zoom-leave-from{transform:scale(1, 1);opacity:1}.input-tag-zoom-leave-to{transform:scale(0.5, 0.5);opacity:0}.input-tag-zoom-leave-active{position:absolute;transition:all var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot)}.input-tag-zoom-move{transition:all var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot)}
|
|
1
|
+
:root{--x-input-color-bg: var(--x-field-color-bg);--x-input-color-bg_hover: var(--x-field-color-bg-hover);--x-input-color-bg_focus: var(--x-field-color-bg-focus);--x-input-color-bg_disabled: var(--x-field-color-bg-disabled);--x-input-color-addon-bg: var(--x-input-color-bg);--x-input-color-addon-border: var(--x-color-border-subtle);--x-input-border-addon-separator-width: var(--x-border-1);--x-input-color-border_focus: var(--x-field-color-border-focus);--x-input-color-shadow_focus: var(--x-field-color-shadow-focus);--x-input-size-shadow_focus: var(--x-field-size-shadow-focus);--x-input-color-addon-border_default: var(--x-color-transparent);--x-input-color-text: var(--x-field-color-text);--x-input-color-placeholder-text: var(--x-field-color-placeholder);--x-input-color-text_disabled: var(--x-field-color-text-disabled);--x-textarea-color-tip-text: var(--x-color-text-tertiary);--x-input-color-bg_error: var(--x-field-color-bg-error);--x-input-color-bg_error_hover: var(--x-field-color-bg-error-hover);--x-input-color-bg_error_focus: var(--x-field-color-bg-error-focus);--x-input-color-border_error_focus: var(--x-field-color-border-error);--x-input-color-shadow_error_focus: var(--x-field-status-error-shadow-color-focus);--x-input-size-shadow_error_focus: var(--x-field-status-error-shadow-size-focus);--x-input-size-default-height: var(--x-size-default);--x-input-size-mini-height: var(--x-size-mini);--x-input-size-small-height: var(--x-size-small);--x-input-size-large-height: var(--x-size-large);--x-input-border-width: var(--x-border-1);--x-input-border-color: var(--x-field-color-border);--x-input-color-border_disabled: var(--x-field-color-border-disabled);--x-input-color-border_hover: var(--x-field-color-border-hover);--x-input-color-border_error: var(--x-field-color-border-error);--x-input-color-border_error_hover: var(--x-color-transparent);--x-input-size-default-font-size: var(--x-font-size-body-3);--x-input-size-small-font-size: var(--x-font-size-body-3);--x-input-size-large-font-size: var(--x-font-size-body-3);--x-input-size-mini-font-size: var(--x-font-size-body-1);--x-input-font-tip-size: var(--x-font-size-body-1);--x-input-size-mini-icon-suffix-size: var(--x-size-3);--x-input-size-small-icon-suffix-size: 14px;--x-input-size-default-icon-suffix-size: 14px;--x-input-size-large-icon-suffix-size: 14px;--x-input-size-mini-icon-addon-size: var(--x-size-3);--x-input-size-small-icon-addon-size: 14px;--x-input-size-default-icon-addon-size: 14px;--x-input-size-large-icon-addon-size: 14px;--x-input-size-icon-clear: var(--x-size-3);--x-input-color-prefix-text: var(--x-field-color-affix);--x-input-color-suffix-text: var(--x-field-color-affix);--x-input-color-tip-text: var(--x-color-text-tertiary);--x-input-color-icon-clear: var(--x-field-color-icon);--x-input-color-icon-clear-bg_hover: var(--x-color-fill-4);--x-search-color-icon: var(--x-field-color-icon);--x-search-size-icon: 14px;--x-input-padding-horizontal: var(--x-spacing-6);--x-input-margin-left-clear-btn: var(--x-spacing-6);--x-input-spacing-clear-icon-right: var(--x-spacing-4);--x-input-padding-word-limit-left: var(--x-spacing-4);--x-textarea-padding-horizontal: var(--x-spacing-6);--x-textarea-padding-vertical: var(--x-spacing-2);--x-textarea-font-size: var(--x-font-size-body-3);--x-textarea-font-tip-size: var(--x-font-size-body-1);--x-textarea-layout-tip-right: var(--x-spacing-5);--x-textarea-layout-tip-bottom: var(--x-spacing-3);--x-textarea-size-min-height: var(--x-size-default);--x-textarea-size-icon-clear: var(--x-font-size-body-1);--x-textarea-layout-top-icon-clear: var(--x-spacing-5);--x-password-color-eye-icon: var(--x-color-text-2);--x-password-size-eye-icon: var(--x-size-3);--x-input-group-border-radius_compact: var(--x-border-radius-small);--x-input-group-border-separator-width: var(--x-border-1);--x-input-group-color-separator-border: var(--x-color-border-subtle);--x-input-size-medium-height: var(--x-input-size-default-height);--x-input-size-medium-font-size: var(--x-input-size-default-font-size);--x-input-size-mini-line-height: 1.667;--x-input-size-small-line-height: var(--x-line-height-base);--x-input-size-medium-line-height: var(--x-line-height-base);--x-input-size-large-line-height: var(--x-line-height-base);--x-input-size-mini-padding-up-down: 1px;--x-input-size-small-padding-up-down: 2px;--x-input-size-medium-padding-up-down: 4px;--x-input-size-large-padding-up-down: 6px;--x-input-feedback-icon-color_success: var(--x-field-status-success-icon);--x-input-feedback-icon-color_error: var(--x-field-status-error-icon);--x-input-feedback-icon-color_warning: var(--x-field-status-warning-icon);--x-input-feedback-icon-color_validating: var(--x-field-status-validating-icon)}.x-tag{display:inline-flex;align-items:center;box-sizing:border-box;height:24px;padding:4px 8px;color:var(--x-tag-color-text-default);font-weight:500;font-size:12px;line-height:14px;vertical-align:middle;border:1px solid var(--x-color-transparent);border-radius:2px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.x-tag .x-icon-hover.x-icon-hover::before{width:14px;height:14px}.x-tag .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-bg-default-hover)}.x-tag-selectable{cursor:pointer;transition:all .3s linear}.x-tag-selectable:hover{background-color:var(--x-tag-color-bg-default-hover);border-color:var(--x-tag-color-border-default-hover)}.x-tag-checked{background-color:var(--x-tag-color-bg-default)}.x-tag-bordered{border-color:var(--x-tag-color-border-default-bordered)}.x-tag-size-small{height:20px;font-size:12px;line-height:18px}.x-tag-size-medium{height:24px;font-size:12px;line-height:22px}.x-tag-size-large{height:28px;font-size:14px;line-height:26px}.x-tag-hide{display:none}.x-tag-loading{cursor:default}.x-tag-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-tag-color-red.x-tag-checked{color:var(--x-tag-color-red-text);background-color:var(--x-tag-color-red-bg);border:1px solid var(--x-tag-color-red-border)}.x-tag-color-red.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-red-icon-bg_hover)}.x-tag-color-red.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-red-text)}.x-tag-color-red.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-red-border-hover);border-color:var(--x-tag-color-red-text)}.x-tag-color-red.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-red-text)}.x-tag-color-orangered.x-tag-checked{color:var(--x-tag-color-orangered-text);background-color:var(--x-tag-color-orangered-bg);border:1px solid var(--x-tag-color-orangered-border)}.x-tag-color-orangered.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-orangered-icon-bg_hover)}.x-tag-color-orangered.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-orangered-text)}.x-tag-color-orangered.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-orangered-border-hover);border-color:var(--x-tag-color-orangered-text)}.x-tag-color-orangered.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-orangered-text)}.x-tag-color-orange.x-tag-checked{color:var(--x-tag-color-orange-text);background-color:var(--x-tag-color-orange-bg);border:1px solid var(--x-tag-color-orange-border)}.x-tag-color-orange.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-orange-icon-bg_hover)}.x-tag-color-orange.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-orange-text)}.x-tag-color-orange.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-orange-border-hover);border-color:var(--x-tag-color-orange-text)}.x-tag-color-orange.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-orange-text)}.x-tag-color-gold.x-tag-checked{color:var(--x-tag-color-gold-text);background-color:var(--x-tag-color-gold-bg);border:1px solid var(--x-tag-color-gold-border)}.x-tag-color-gold.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-gold-icon-bg_hover)}.x-tag-color-gold.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-gold-text)}.x-tag-color-gold.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-gold-border-hover);border-color:var(--x-tag-color-gold-text)}.x-tag-color-gold.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-gold-text)}.x-tag-color-lime.x-tag-checked{color:var(--x-tag-color-lime-text);background-color:var(--x-tag-color-lime-bg);border:1px solid var(--x-tag-color-lime-border)}.x-tag-color-lime.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-lime-icon-bg_hover)}.x-tag-color-lime.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-lime-text)}.x-tag-color-lime.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-lime-border-hover);border-color:var(--x-tag-color-lime-text)}.x-tag-color-lime.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-lime-text)}.x-tag-color-green.x-tag-checked{color:var(--x-tag-color-green-text);background-color:var(--x-tag-color-green-bg);border:1px solid var(--x-tag-color-green-border)}.x-tag-color-green.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-green-icon-bg_hover)}.x-tag-color-green.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-green-text)}.x-tag-color-green.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-green-border-hover);border-color:var(--x-tag-color-green-text)}.x-tag-color-green.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-green-text)}.x-tag-color-cyan.x-tag-checked{color:var(--x-tag-color-cyan-text);background-color:var(--x-tag-color-cyan-bg);border:1px solid var(--x-tag-color-cyan-border)}.x-tag-color-cyan.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-cyan-icon-bg_hover)}.x-tag-color-cyan.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-cyan-text)}.x-tag-color-cyan.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-cyan-border-hover);border-color:var(--x-tag-color-cyan-text)}.x-tag-color-cyan.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-cyan-text)}.x-tag-color-better-blue.x-tag-checked{color:var(--x-tag-color-better-blue-text);background-color:var(--x-tag-color-better-blue-bg);border:1px solid var(--x-tag-color-better-blue-border)}.x-tag-color-better-blue.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-better-blue-icon-bg_hover)}.x-tag-color-better-blue.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-better-blue-text)}.x-tag-color-better-blue.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-better-blue-border-hover);border-color:var(--x-tag-color-better-blue-text)}.x-tag-color-better-blue.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-better-blue-text)}.x-tag-color-blue.x-tag-checked{color:var(--x-tag-color-blue-text);background-color:var(--x-tag-color-blue-bg);border:1px solid var(--x-tag-color-blue-border)}.x-tag-color-blue.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-blue-icon-bg_hover)}.x-tag-color-blue.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-blue-text)}.x-tag-color-blue.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-blue-border-hover);border-color:var(--x-tag-color-blue-text)}.x-tag-color-blue.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-blue-text)}.x-tag-color-purple.x-tag-checked{color:var(--x-tag-color-purple-text);background-color:var(--x-tag-color-purple-bg);border:1px solid var(--x-tag-color-purple-border)}.x-tag-color-purple.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-purple-icon-bg_hover)}.x-tag-color-purple.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-purple-text)}.x-tag-color-purple.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-purple-border-hover);border-color:var(--x-tag-color-purple-text)}.x-tag-color-purple.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-purple-text)}.x-tag-color-pink-purple.x-tag-checked{color:var(--x-tag-color-pink-purple-text);background-color:var(--x-tag-color-pink-purple-bg);border:1px solid var(--x-tag-color-pink-purple-border)}.x-tag-color-pink-purple.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-pink-purple-icon-bg_hover)}.x-tag-color-pink-purple.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-pink-purple-text)}.x-tag-color-pink-purple.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-pink-purple-border-hover);border-color:var(--x-tag-color-pink-purple-text)}.x-tag-color-pink-purple.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-pink-purple-text)}.x-tag-color-magenta.x-tag-checked{color:var(--x-tag-color-magenta-text);background-color:var(--x-tag-color-magenta-bg);border:1px solid var(--x-tag-color-magenta-border)}.x-tag-color-magenta.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-magenta-icon-bg_hover)}.x-tag-color-magenta.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-magenta-text)}.x-tag-color-magenta.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-magenta-border-hover);border-color:var(--x-tag-color-magenta-text)}.x-tag-color-magenta.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-magenta-text)}.x-tag-color-gray.x-tag-checked{color:var(--x-tag-color-gray-text);background-color:var(--x-tag-color-gray-bg);border:1px solid var(--x-tag-color-gray-border)}.x-tag-color-gray.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-color-gray-icon-bg_hover)}.x-tag-color-gray.x-tag-checked.x-tag-bordered{border-color:var(--x-tag-color-gray-text)}.x-tag-color-gray.x-tag-checked.x-tag-selectable:hover{background-color:var(--x-tag-color-gray-border-hover);border-color:var(--x-tag-color-gray-text)}.x-tag-color-gray.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-color-gray-text)}.x-tag-custom-color.x-tag-checked{color:var(--x-tag-custom-color-text)}.x-tag-custom-color.x-tag-checked .x-icon-hover.x-icon-hover:hover::before{background-color:var(--x-tag-custom-color-icon-bg_hover)}.x-tag-custom-color.x-tag-checked .x-tag--close-icon:hover{color:var(--x-tag-custom-color-text)}.x-tag--close-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:14px;height:14px;margin-left:4px;font-size:12px;line-height:1;border-radius:50%;cursor:pointer;transition:all .2s ease-in-out}.x-tag--close-icon>.x-icon,.x-tag--close-icon>svg{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;line-height:1}.x-tag--close-icon>svg{position:relative}.x-tag--icon{margin-right:6px;color:currentcolor}.x-tag--loading-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:14px;height:14px;margin-left:4px;font-size:12px;line-height:1}.x-tag--loading-icon>.x-icon,.x-tag--loading-icon>svg{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;line-height:1}:root{--x-input-tag-size-mini-height: var(--x-size-mini);--x-input-tag-size-small-height: var(--x-size-small);--x-input-tag-size-default-height: var(--x-size-default);--x-input-tag-size-large-height: var(--x-size-large);--x-input-tag-size-mini-tag-height: var(--x-size-5);--x-input-tag-size-small-tag-height: var(--x-size-5);--x-input-tag-size-default-tag-height: var(--x-size-6);--x-input-tag-size-large-tag-height: var(--x-size-7);--x-input-tag-size-mini-tag-height-2px: 18px;--x-input-tag-size-small-tag-height-2px: 18px;--x-input-tag-size-default-tag-height-2px: 22px;--x-input-tag-size-large-tag-height-2px: 26px;--x-input-tag-size-mini-padding-top-bottom: 0;--x-input-tag-size-small-padding-top-bottom: 2px;--x-input-tag-size-default-padding-top-bottom: 2px;--x-input-tag-size-large-padding-top-bottom: 2px;--x-input-tag-size-mini-font-size: var(--x-font-size-body-1);--x-input-tag-size-small-font-size: var(--x-font-size-body-3);--x-input-tag-size-default-font-size: var(--x-font-size-body-3);--x-input-tag-size-large-font-size: var(--x-font-size-body-3);--x-input-tag-color-text_default: var(--x-field-color-text);--x-input-tag-color-text_error: var(--x-field-color-text);--x-input-tag-color-text_disabled: var(--x-field-color-text-disabled);--x-input-tag-color-placeholder: var(--x-field-color-placeholder);--x-input-tag-color-icon-clear: var(--x-field-color-icon);--x-input-tag-color-icon-clear-bg_hover: var(--x-color-fill-4);--x-input-tag-color-border_default: var(--x-field-color-border);--x-input-tag-color-border_default_hover: var(--x-field-color-border-hover);--x-input-tag-color-border_default_focus: var(--x-field-color-border-focus);--x-input-tag-color-border_error: var(--x-color-transparent);--x-input-tag-color-border_error_hover: var(--x-color-transparent);--x-input-tag-color-border_error_focus: var(--x-field-color-border-error);--x-input-tag-color-border_disabled: var(--x-field-color-border-disabled);--x-input-tag-color-border_disabled_hover: var(--x-input-tag-color-border_disabled);--x-input-tag-color-border_disabled_focus: var(--x-input-tag-color-border_disabled);--x-input-tag-color-bg_default: var(--x-field-color-bg);--x-input-tag-color-bg_default_hover: var(--x-field-color-bg-hover);--x-input-tag-color-bg_default_focus: var(--x-field-color-bg-focus);--x-input-tag-color-bg_error: var(--x-field-color-bg-error);--x-input-tag-color-bg_error_hover: var(--x-field-color-bg-error-hover);--x-input-tag-color-bg_error_focus: var(--x-field-color-bg-error-focus);--x-input-tag-color-bg_disabled: var(--x-field-color-bg-disabled);--x-input-tag-color-bg_disabled_hover: var(--x-input-tag-color-bg_disabled);--x-input-tag-color-shadow_default_focus: var(--x-field-color-shadow-focus);--x-input-tag-color-shadow_error_focus: var(--x-field-status-error-shadow-color-focus);--x-input-tag-size-shadow_error_focus: var(--x-field-status-error-shadow-size-focus);--x-input-tag-size-shadow_default_focus: var(--x-field-size-shadow-focus);--x-input-tag-tag-margin-right: var(--x-spacing-2);--x-input-tag-tag-margin-vertical: var(--x-spacing-1);--x-input-tag-tag-margin-vertical-division-2: 1px;--x-input-tag-padding-horizontal: var(--x-spacing-2);--x-input-tag-border-radius: var(--x-border-radius-small);--x-input-tag-border-width: var(--x-border-1);--x-input-tag-size-icon-clear: var(--x-size-3);--x-input-tag-size-icon-clear_hover: var(--x-size-5);--x-input-tag-tag-font-size: var(--x-font-size-body-1);--x-input-tag-tag-color-bg: var(--x-color-bg-2);--x-input-tag-tag-color-bg_focus: var(--x-color-fill-2);--x-input-tag-tag-color-bg_disabled: var(--x-color-fill-2);--x-input-tag-tag-color-border: var(--x-color-fill-3);--x-input-tag-tag-color-border_disabled: var(--x-color-fill-3);--x-input-tag-tag-color-border_focus: var(--x-color-fill-2);--x-input-tag-tag-remove-icon-color-bg: var(--x-color-fill-2);--x-input-tag-tag-remove-icon-color-bg_focus: var(--x-color-fill-3);--x-input-tag-size-medium-height: var(--x-input-tag-size-default-height);--x-input-tag-size-medium-tag-height: var(--x-input-tag-size-default-tag-height);--x-input-tag-size-medium-tag-height-2px: var(--x-input-tag-size-default-tag-height-2px);--x-input-tag-size-medium-padding-top-bottom: var( --x-input-tag-size-default-padding-top-bottom );--x-input-tag-size-medium-font-size: var(--x-input-tag-size-default-font-size)}.x-input-tag{display:inline-flex;align-items:center;box-sizing:border-box;width:100%;min-width:0;padding-right:var(--x-input-padding-horizontal);padding-left:var(--x-input-padding-horizontal);color:var(--x-input-color-text);font-size:var(--x-input-size-default-font-size);background-color:var(--x-input-color-bg);border:var(--x-input-border-width) solid var(--x-input-border-color);border-radius:var(--x-input-border-radius);cursor:text;transition:color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),border-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-input-tag:hover{background-color:var(--x-input-color-bg_hover);border-color:var(--x-input-color-border_hover)}.x-input-tag:focus-within,.x-input-tag.x-input-tag-focus{z-index:1;background-color:var(--x-input-color-bg_focus);border-color:var(--x-input-color-border_focus);box-shadow:0 0 0 var(--x-input-size-shadow_focus) var(--x-input-color-shadow_focus)}.x-input-tag.x-input-tag-disabled{color:var(--x-input-color-text_disabled);background-color:var(--x-input-color-bg_disabled);border-color:var(--x-input-color-border_disabled);cursor:not-allowed}.x-input-tag.x-input-tag-disabled:hover{color:var(--x-input-color-text_disabled);background-color:var(--x-input-color-bg_disabled);border-color:var(--x-input-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--prefix,.x-input-tag.x-input-tag-disabled .x-input-tag--suffix{color:inherit}.x-input-tag.x-input-tag-error{background-color:var(--x-input-color-bg_error);border-color:var(--x-input-color-border_error)}.x-input-tag.x-input-tag-error:hover{background-color:var(--x-input-color-bg_error_hover);border-color:var(--x-input-color-border_error_hover)}.x-input-tag.x-input-tag-error:focus-within,.x-input-tag.x-input-tag-error.x-input-tag-focus{z-index:1;background-color:var(--x-input-color-bg_error_focus);border-color:var(--x-input-color-border_error_focus);box-shadow:0 0 0 var(--x-input-size-shadow_error_focus) var(--x-input-color-shadow_error_focus)}.x-input-tag .x-input-tag--prefix,.x-input-tag .x-input-tag--suffix{display:inline-flex;flex-shrink:0;align-items:center;white-space:nowrap;user-select:none}.x-input-tag .x-input-tag--prefix>.x-icon,.x-input-tag .x-input-tag--suffix>.x-icon{width:var(--x-input-size-default-icon-suffix-size);height:var(--x-input-size-default-icon-suffix-size);font-size:var(--x-input-size-default-icon-suffix-size)}.x-input-tag .x-input-tag--prefix>.x-icon>svg,.x-input-tag .x-input-tag--suffix>.x-icon>svg{width:1em;height:1em}.x-input-tag .x-input-tag--prefix{padding-right:var(--x-input-padding-horizontal);color:var(--x-input-color-prefix-text)}.x-input-tag .x-input-tag--suffix{padding-left:var(--x-input-padding-horizontal);color:var(--x-input-color-suffix-text)}.x-input-tag .x-input-tag--suffix .x-feedback-icon{display:inline-flex}.x-input-tag .x-input-tag--suffix .x-feedback-icon-status-validating{color:var(--x-input-feedback-icon-color_validating)}.x-input-tag .x-input-tag--suffix .x-feedback-icon-status-success{color:var(--x-input-feedback-icon-color_success)}.x-input-tag .x-input-tag--suffix .x-feedback-icon-status-warning{color:var(--x-input-feedback-icon-color_warning)}.x-input-tag .x-input-tag--suffix .x-feedback-icon-status-error{color:var(--x-input-feedback-icon-color_error)}.x-input-tag .x-input-tag--clear-btn{flex-shrink:0;align-self:center;margin-left:var(--x-input-margin-left-clear-btn);color:var(--x-input-color-icon-clear);font-size:var(--x-input-size-icon-clear);visibility:hidden;cursor:pointer;opacity:0;transition:opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear),visibility var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-input-tag .x-input-tag--clear-btn>svg{position:relative;transition:color var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-input-tag:hover .x-input-tag--clear-btn,.x-input-tag:focus-within .x-input-tag--clear-btn{visibility:visible;opacity:1}.x-input-tag:not(.x-input-tag-focus) .x-input-tag-icon-hover:hover::before{background-color:var(--x-input-color-icon-clear-bg_hover)}.x-input-tag.x-input-tag-has-tag{padding-right:var(--x-input-tag-padding-horizontal);padding-left:var(--x-input-tag-padding-horizontal)}.x-input-tag.x-input-tag-has-prefix{padding-left:var(--x-input-padding-horizontal)}.x-input-tag.x-input-tag-has-suffix{padding-right:var(--x-input-padding-horizontal)}.x-input-tag .x-input-tag--inner{flex:1;overflow:hidden;line-height:0}.x-input-tag .x-input-tag--inner.x-input-tag-nowrap{display:flex;flex-wrap:wrap}.x-input-tag .x-input-tag--inner .x-input-tag--tag{display:inline-flex;align-items:center;padding-top:0;padding-bottom:0;margin-right:var(--x-input-tag-tag-margin-right);color:var(--x-input-tag-color-text_default);font-size:var(--x-input-tag-tag-font-size);white-space:pre-wrap;word-break:break-word;background-color:var(--x-input-tag-tag-color-bg);border-color:var(--x-input-tag-tag-color-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-red{color:var(--x-tag-color-red-text);background-color:var(--x-tag-color-red-bg);border-color:var(--x-tag-color-red-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-red.x-tag-bordered{border-color:var(--x-tag-color-red-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-orangered{color:var(--x-tag-color-orangered-text);background-color:var(--x-tag-color-orangered-bg);border-color:var(--x-tag-color-orangered-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-orangered.x-tag-bordered{border-color:var(--x-tag-color-orangered-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-orange{color:var(--x-tag-color-orange-text);background-color:var(--x-tag-color-orange-bg);border-color:var(--x-tag-color-orange-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-orange.x-tag-bordered{border-color:var(--x-tag-color-orange-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-gold{color:var(--x-tag-color-gold-text);background-color:var(--x-tag-color-gold-bg);border-color:var(--x-tag-color-gold-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-gold.x-tag-bordered{border-color:var(--x-tag-color-gold-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-lime{color:var(--x-tag-color-lime-text);background-color:var(--x-tag-color-lime-bg);border-color:var(--x-tag-color-lime-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-lime.x-tag-bordered{border-color:var(--x-tag-color-lime-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-green{color:var(--x-tag-color-green-text);background-color:var(--x-tag-color-green-bg);border-color:var(--x-tag-color-green-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-green.x-tag-bordered{border-color:var(--x-tag-color-green-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-cyan{color:var(--x-tag-color-cyan-text);background-color:var(--x-tag-color-cyan-bg);border-color:var(--x-tag-color-cyan-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-cyan.x-tag-bordered{border-color:var(--x-tag-color-cyan-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-better-blue{color:var(--x-tag-color-better-blue-text);background-color:var(--x-tag-color-better-blue-bg);border-color:var(--x-tag-color-better-blue-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-better-blue.x-tag-bordered{border-color:var(--x-tag-color-better-blue-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-blue{color:var(--x-tag-color-blue-text);background-color:var(--x-tag-color-blue-bg);border-color:var(--x-tag-color-blue-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-blue.x-tag-bordered{border-color:var(--x-tag-color-blue-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-purple{color:var(--x-tag-color-purple-text);background-color:var(--x-tag-color-purple-bg);border-color:var(--x-tag-color-purple-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-purple.x-tag-bordered{border-color:var(--x-tag-color-purple-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-pink-purple{color:var(--x-tag-color-pink-purple-text);background-color:var(--x-tag-color-pink-purple-bg);border-color:var(--x-tag-color-pink-purple-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-pink-purple.x-tag-bordered{border-color:var(--x-tag-color-pink-purple-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-magenta{color:var(--x-tag-color-magenta-text);background-color:var(--x-tag-color-magenta-bg);border-color:var(--x-tag-color-magenta-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-magenta.x-tag-bordered{border-color:var(--x-tag-color-magenta-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-gray{color:var(--x-tag-color-gray-text);background-color:var(--x-tag-color-gray-bg);border-color:var(--x-tag-color-gray-border)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-color-gray.x-tag-bordered{border-color:var(--x-tag-color-gray-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag .x-icon-hover:hover::before{background-color:var(--x-input-tag-tag-remove-icon-color-bg)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-custom-color{color:var(--x-tag-custom-color-text)}.x-input-tag .x-input-tag--inner .x-input-tag--tag.x-tag-custom-color .x-icon-hover.x-tag-icon-hover:hover::before{background-color:var(--x-tag-custom-color-icon-bg_hover)}.x-input-tag .x-input-tag--inner.x-input-tag-nowrap .x-input-tag--tag{white-space:nowrap;word-break:normal}.x-input-tag .x-input-tag--inner .x-input-tag--input{width:100%;min-width:0;padding-right:0;padding-left:0;color:inherit;line-height:var(--x-line-height-base);background:none;border:none;border-radius:0;outline:none;cursor:inherit;-webkit-appearance:none;-webkit-tap-highlight-color:var(--x-color-transparent)}.x-input-tag .x-input-tag--inner .x-input-tag--input::placeholder{color:var(--x-input-color-placeholder-text)}.x-input-tag .x-input-tag--inner .x-input-tag--input[disabled]::placeholder{color:var(--x-input-color-text_disabled)}.x-input-tag .x-input-tag--inner .x-input-tag--input[disabled]{-webkit-text-fill-color:var(--x-input-color-text_disabled)}.x-input-tag .x-input-tag--inner .x-input-tag--input{box-sizing:border-box}.x-input-tag .x-input-tag--mirror{position:absolute;top:0;left:0;white-space:pre;visibility:hidden;pointer-events:none}.x-input-tag.x-input-tag-focus .x-input-tag--tag{background-color:var(--x-input-tag-tag-color-bg_focus);border-color:var(--x-input-tag-tag-color-border_focus)}.x-input-tag.x-input-tag-focus .x-input-tag--tag .x-icon-hover:hover::before{background-color:var(--x-input-tag-tag-remove-icon-color-bg_focus)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-red{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-orangered{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-orange{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-gold{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-lime{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-green{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-cyan{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-better-blue{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-blue{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-purple{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-pink-purple{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-magenta{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-disabled .x-input-tag--tag.x-tag-color-gray{color:var(--x-input-tag-color-text_disabled);background-color:var(--x-input-tag-tag-color-bg_disabled);border-color:var(--x-input-tag-tag-color-border_disabled)}.x-input-tag.x-input-tag-readonly,.x-input-tag.x-input-tag-disabled-input{cursor:default}.x-input-tag.x-input-tag-size-mini{font-size:var(--x-input-tag-size-mini-font-size)}.x-input-tag.x-input-tag-size-mini .x-input-tag--inner{padding-top:var(--x-input-tag-size-mini-padding-top-bottom);padding-bottom:var(--x-input-tag-size-mini-padding-top-bottom)}.x-input-tag.x-input-tag-size-mini .x-input-tag--tag,.x-input-tag.x-input-tag-size-mini .x-input-tag--input{margin-top:var(--x-input-tag-tag-margin-vertical-division-2);margin-bottom:var(--x-input-tag-tag-margin-vertical-division-2);line-height:var(--x-input-tag-size-mini-tag-height-2px);vertical-align:middle}.x-input-tag.x-input-tag-size-mini .x-input-tag--tag{height:auto;min-height:var(--x-input-tag-size-mini-tag-height)}.x-input-tag.x-input-tag-size-mini .x-input-tag--input{height:var(--x-input-tag-size-mini-tag-height)}.x-input-tag.x-input-tag-size-medium{font-size:var(--x-input-tag-size-medium-font-size)}.x-input-tag.x-input-tag-size-medium .x-input-tag--inner{padding-top:var(--x-input-tag-size-medium-padding-top-bottom);padding-bottom:var(--x-input-tag-size-medium-padding-top-bottom)}.x-input-tag.x-input-tag-size-medium .x-input-tag--tag,.x-input-tag.x-input-tag-size-medium .x-input-tag--input{margin-top:var(--x-input-tag-tag-margin-vertical-division-2);margin-bottom:var(--x-input-tag-tag-margin-vertical-division-2);line-height:var(--x-input-tag-size-medium-tag-height-2px);vertical-align:middle}.x-input-tag.x-input-tag-size-medium .x-input-tag--tag{height:auto;min-height:var(--x-input-tag-size-medium-tag-height)}.x-input-tag.x-input-tag-size-medium .x-input-tag--input{height:var(--x-input-tag-size-medium-tag-height)}.x-input-tag.x-input-tag-size-small{font-size:var(--x-input-tag-size-small-font-size)}.x-input-tag.x-input-tag-size-small .x-input-tag--inner{padding-top:var(--x-input-tag-size-small-padding-top-bottom);padding-bottom:var(--x-input-tag-size-small-padding-top-bottom)}.x-input-tag.x-input-tag-size-small .x-input-tag--tag,.x-input-tag.x-input-tag-size-small .x-input-tag--input{margin-top:var(--x-input-tag-tag-margin-vertical-division-2);margin-bottom:var(--x-input-tag-tag-margin-vertical-division-2);line-height:var(--x-input-tag-size-small-tag-height-2px);vertical-align:middle}.x-input-tag.x-input-tag-size-small .x-input-tag--tag{height:auto;min-height:var(--x-input-tag-size-small-tag-height)}.x-input-tag.x-input-tag-size-small .x-input-tag--input{height:var(--x-input-tag-size-small-tag-height)}.x-input-tag.x-input-tag-size-large{font-size:var(--x-input-tag-size-large-font-size)}.x-input-tag.x-input-tag-size-large .x-input-tag--inner{padding-top:var(--x-input-tag-size-large-padding-top-bottom);padding-bottom:var(--x-input-tag-size-large-padding-top-bottom)}.x-input-tag.x-input-tag-size-large .x-input-tag--tag,.x-input-tag.x-input-tag-size-large .x-input-tag--input{margin-top:var(--x-input-tag-tag-margin-vertical-division-2);margin-bottom:var(--x-input-tag-tag-margin-vertical-division-2);line-height:var(--x-input-tag-size-large-tag-height-2px);vertical-align:middle}.x-input-tag.x-input-tag-size-large .x-input-tag--tag{height:auto;min-height:var(--x-input-tag-size-large-tag-height)}.x-input-tag.x-input-tag-size-large .x-input-tag--input{height:var(--x-input-tag-size-large-tag-height)}.x-input-tag:focus-within .x-input-tag--clear-btn{visibility:visible;opacity:1}.input-tag-zoom-enter-from{transform:scale(0.5, 0.5);opacity:0}.input-tag-zoom-enter-to{transform:scale(1, 1);opacity:1}.input-tag-zoom-enter-active{transition:all var(--x-transition-duration-3) var(--x-transition-timing-function-standard)}.input-tag-zoom-leave-from{transform:scale(1, 1);opacity:1}.input-tag-zoom-leave-to{transform:scale(0.5, 0.5);opacity:0}.input-tag-zoom-leave-active{position:absolute;transition:all var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot)}.input-tag-zoom-move{transition:all var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot)}
|