x-next 1.8.4 → 1.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/AI_USAGE.md +67 -7
  2. package/CHANGELOG.md +44 -0
  3. package/dist/_styles/palette-aliases.d.ts +1 -0
  4. package/dist/_utils/chart/scale.d.ts +1 -1
  5. package/dist/components/_components/chart/axis-labels.d.ts +8 -0
  6. package/dist/components/link/Link.vue.d.ts +1 -1
  7. package/dist/components/link/index.d.ts +3 -3
  8. package/dist/components/virtual-list-v2/interface.d.ts +3 -0
  9. package/dist/components/virtual-list-v2/virtual-list.vue.d.ts +336 -1
  10. package/dist/es/_hooks/use-component-ref.js +9 -9
  11. package/dist/es/_styles/palette-aliases.js +30 -1
  12. package/dist/es/_utils/chart/scale.js +44 -39
  13. package/dist/es/_utils/palette.js +37 -35
  14. package/dist/es/components/_components/chart/ChartAxis.js +61 -36
  15. package/dist/es/components/_components/chart/axis-labels.js +26 -0
  16. package/dist/es/components/button/Button.js +23 -23
  17. package/dist/es/components/form-select/Select.js +142 -141
  18. package/dist/es/components/trigger/Trigger.js +174 -183
  19. package/dist/es/components/virtual-list-v2/virtual-list.vue.js +22 -23
  20. package/dist/es/components/virtual-list-v2/virtual-list.vue2.js +67 -53
  21. package/dist/es/icons/icon.js +37 -36
  22. package/dist/es/icons/index.js +6 -8
  23. package/dist/es/icons/public/lucide-names.js +167 -0
  24. package/dist/es/icons/public/lucide.js +75 -188
  25. package/dist/es/index.js +152 -148
  26. package/dist/es/style.css +1 -1
  27. package/dist/icons/index.d.ts +3 -3
  28. package/dist/icons/names.d.ts +2 -2
  29. package/dist/icons/public/lucide-names.d.ts +32 -0
  30. package/dist/icons/public/lucide.d.ts +2 -2
  31. package/dist/index.cjs +3 -62
  32. package/dist/index.umd.js +3 -62
  33. package/dist/style/base.css +1 -1
  34. package/dist/style/button.css +1 -1
  35. package/dist/style/heatmap.css +1 -1
  36. package/dist/style.css +1 -1
  37. package/package.json +3 -2
package/dist/style/button.css CHANGED
@@ -1 +1 @@
1
- :root{--x-button-color-bg-default: var(--x-color-fill-2);--x-button-color-bg-default-hover: var(--x-color-neutral-3);--x-button-color-bg-default-active: var(--x-color-neutral-4);--x-button-color-text-default: var(--x-color-text-primary);--x-button-color-border-default: var(--x-color-border-default);--x-button-color-text-solid: var(--x-color-white);--x-button-color-text-solid-primary: var(--x-color-white);--x-button-color-text-solid-success: var(--x-color-white);--x-button-color-text-solid-warning: var(--x-color-white);--x-button-color-text-solid-strong: var(--x-color-white);--x-button-color-text-solid-danger: var(--x-color-white);--x-button-color-text-solid-info: var(--x-color-white);--x-button-color-bg-primary-subtle: var(--x-color-primary-subtle);--x-button-color-bg-primary-subtle-hover: var(--x-color-primary-subtle-hover);--x-button-color-bg-primary-subtle-active: var(--x-color-primary-subtle-active);--x-button-color-bg-primary-solid: var(--x-color-primary-solid);--x-button-color-bg-primary-solid-hover: var(--x-color-primary-solid-hover);--x-button-color-bg-primary-solid-active: var(--x-color-primary-solid-active);--x-button-color-text-primary: var(--x-color-primary-button-text);--x-button-color-border-primary: var(--x-color-primary-solid);--x-button-color-bg-success-subtle: var(--x-color-success-subtle);--x-button-color-bg-success-subtle-hover: var(--x-color-success-subtle-hover);--x-button-color-bg-success-subtle-active: var(--x-color-success-subtle-active);--x-button-color-bg-success-solid: var(--x-color-success-solid);--x-button-color-bg-success-solid-hover: var(--x-color-success-solid-hover);--x-button-color-bg-success-solid-active: var(--x-color-success-solid-active);--x-button-color-text-success: var(--x-color-success-button-text);--x-button-color-border-success: var(--x-color-success-solid);--x-button-color-bg-warning-subtle: var(--x-color-warning-subtle);--x-button-color-bg-warning-subtle-hover: var(--x-color-warning-subtle-hover);--x-button-color-bg-warning-subtle-active: var(--x-color-warning-subtle-active);--x-button-color-bg-warning-solid: var(--x-color-warning-solid);--x-button-color-bg-warning-solid-hover: var(--x-color-warning-solid-hover);--x-button-color-bg-warning-solid-active: var(--x-color-warning-solid-active);--x-button-color-text-warning: var(--x-color-warning-button-text);--x-button-color-border-warning: var(--x-color-warning-solid);--x-button-color-bg-danger-subtle: var(--x-color-danger-subtle);--x-button-color-bg-danger-subtle-hover: var(--x-color-danger-subtle-hover);--x-button-color-bg-danger-subtle-active: var(--x-color-danger-subtle-active);--x-button-color-bg-danger-solid: var(--x-color-danger-solid);--x-button-color-bg-danger-solid-hover: var(--x-color-danger-solid-hover);--x-button-color-bg-danger-solid-active: var(--x-color-danger-solid-active);--x-button-color-text-danger: var(--x-color-danger-button-text);--x-button-color-border-danger: var(--x-color-danger-solid);--x-button-color-bg-strong-subtle: var(--x-color-strong-subtle);--x-button-color-bg-strong-subtle-hover: var(--x-color-strong-subtle-hover);--x-button-color-bg-strong-subtle-active: var(--x-color-strong-subtle-active);--x-button-color-bg-strong-solid: var(--x-color-strong-solid);--x-button-color-bg-strong-solid-hover: var(--x-color-strong-solid-hover);--x-button-color-bg-strong-solid-active: var(--x-color-strong-solid-active);--x-button-color-text-strong: var(--x-color-strong-button-text);--x-button-color-border-strong: var(--x-color-strong-solid);--x-button-color-bg-info-subtle: var(--x-color-fill-2);--x-button-color-bg-info-subtle-hover: var(--x-color-neutral-3);--x-button-color-bg-info-subtle-active: var(--x-color-neutral-4);--x-button-color-bg-info-solid: var(--x-color-constant-neutral-strong);--x-button-color-bg-info-solid-hover: var(--x-color-constant-neutral-strong-hover);--x-button-color-bg-info-solid-active: var(--x-color-constant-neutral-strong-active);--x-button-color-text-info: var(--x-color-text-secondary);--x-button-color-border-info: var(--x-color-neutral-5)}.x-button{--x-button-width: auto;--x-button-font-weight: 500;--x-button-opacity: 1;--x-button-border-style: solid;--x-button-border-color: var(--x-button-color-border-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-text-color: var(--x-button-color-text-default);--x-button-padding: 0 0;--x-button-mini-height: var(--x-size-mini);--x-button-mini-font-size: 12px;--x-button-mini-padding: 0 8px;--x-button-mini-border-radius: 4px;--x-button-small-height: var(--x-size-small);--x-button-small-font-size: 13px;--x-button-small-padding: 0 10px;--x-button-small-border-radius: 4px;--x-button-medium-height: var(--x-size-medium);--x-button-medium-font-size: 14px;--x-button-medium-padding: 0 14px;--x-button-medium-border-radius: 4px;--x-button-large-height: var(--x-size-large);--x-button-large-font-size: 14px;--x-button-large-padding: 0 20px;--x-button-large-border-radius: 6px;--x-button-huge-height: var(--x-size-huge);--x-button-huge-font-size: 16px;--x-button-huge-font-weight: 400;--x-button-huge-padding: 0 28px;--x-button-huge-border-radius: 4px}.x-button{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button{position:relative;display:inline-flex;justify-content:center;align-items:center;overflow:visible;margin:0;border-style:var(--x-button-border-style);border-width:1px;border-color:var(--x-button-border-color);border-radius:var(--x-button-border-radius);padding:var(--x-button-padding);width:var(--x-button-width);height:var(--x-button-height);color:var(--x-button-text-color);font-size:var(--x-button-font-size);font-weight:var(--x-button-font-weight);line-height:var(--x-line-height-base);white-space:nowrap;background-color:var(--x-button-background-color);opacity:var(--x-button-opacity);outline:none;transition:color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),border-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear);box-sizing:border-box;appearance:none;user-select:none;vertical-align:bottom;cursor:pointer}.x-button>.x-wave{position:absolute;inset:-1px;z-index:0;border-radius:inherit;pointer-events:none;opacity:.45;box-shadow:0 0 0 0 var(--x-wave-color, currentColor);transition:box-shadow var(--x-transition-duration-4, 0.4s) var(--x-transition-timing-function-standard, ease),opacity var(--x-transition-duration-4, 0.4s) var(--x-transition-timing-function-linear, linear)}.x-button>.x-wave-active{opacity:0;box-shadow:0 0 0 6px var(--x-wave-color, currentColor)}.x-button--prefix{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;margin-right:4px}.x-button--suffix{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;margin-left:4px}.x-button--loading{position:relative;z-index:1;display:flex;transition:all .2s ease}.x-button--content{position:relative;z-index:1;display:flex}.x-button.x-button-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-primary{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid);--x-button-border-color: var(--x-button-color-bg-primary-solid)}.x-button-primary:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-hover);--x-button-border-color: var(--x-button-color-bg-primary-solid-hover)}.x-button-primary:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-active);--x-button-border-color: var(--x-button-color-bg-primary-solid-active)}.x-button-primary.x-button-default{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid);--x-button-border-color: var(--x-button-color-bg-primary-solid)}.x-button-primary.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-hover);--x-button-border-color: var(--x-button-color-bg-primary-solid-hover)}.x-button-primary.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-active);--x-button-border-color: var(--x-button-color-bg-primary-solid-active)}.x-button-primary.x-button-success{--x-button-text-color: var(--x-button-color-text-solid-success);--x-button-background-color: var(--x-button-color-bg-success-solid);--x-button-border-color: var(--x-button-color-bg-success-solid)}.x-button-primary.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-success);--x-button-background-color: var(--x-button-color-bg-success-solid-hover);--x-button-border-color: var(--x-button-color-bg-success-solid-hover)}.x-button-primary.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-success);--x-button-background-color: var(--x-button-color-bg-success-solid-active);--x-button-border-color: var(--x-button-color-bg-success-solid-active)}.x-button-primary.x-button-warning{--x-button-text-color: var(--x-button-color-text-solid-warning);--x-button-background-color: var(--x-button-color-bg-warning-solid);--x-button-border-color: var(--x-button-color-bg-warning-solid)}.x-button-primary.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-warning);--x-button-background-color: var(--x-button-color-bg-warning-solid-hover);--x-button-border-color: var(--x-button-color-bg-warning-solid-hover)}.x-button-primary.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-warning);--x-button-background-color: var(--x-button-color-bg-warning-solid-active);--x-button-border-color: var(--x-button-color-bg-warning-solid-active)}.x-button-primary.x-button-strong{--x-button-text-color: var(--x-button-color-text-solid-strong);--x-button-background-color: var(--x-button-color-bg-strong-solid);--x-button-border-color: var(--x-button-color-bg-strong-solid)}.x-button-primary.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-strong);--x-button-background-color: var(--x-button-color-bg-strong-solid-hover);--x-button-border-color: var(--x-button-color-bg-strong-solid-hover)}.x-button-primary.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-strong);--x-button-background-color: var(--x-button-color-bg-strong-solid-active);--x-button-border-color: var(--x-button-color-bg-strong-solid-active)}.x-button-primary.x-button-danger{--x-button-text-color: var(--x-button-color-text-solid-danger);--x-button-background-color: var(--x-button-color-bg-danger-solid);--x-button-border-color: var(--x-button-color-bg-danger-solid)}.x-button-primary.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-danger);--x-button-background-color: var(--x-button-color-bg-danger-solid-hover);--x-button-border-color: var(--x-button-color-bg-danger-solid-hover)}.x-button-primary.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-danger);--x-button-background-color: var(--x-button-color-bg-danger-solid-active);--x-button-border-color: var(--x-button-color-bg-danger-solid-active)}.x-button-primary.x-button-info{--x-button-text-color: var(--x-button-color-text-solid-info);--x-button-background-color: var(--x-button-color-bg-info-solid);--x-button-border-color: var(--x-button-color-bg-info-solid)}.x-button-primary.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-info);--x-button-background-color: var(--x-button-color-bg-info-solid-hover);--x-button-border-color: var(--x-button-color-bg-info-solid-hover)}.x-button-primary.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-info);--x-button-background-color: var(--x-button-color-bg-info-solid-active);--x-button-border-color: var(--x-button-color-bg-info-solid-active)}.x-button-outline{--x-button-border-style: solid}.x-button-outline{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-default{--x-button-border-style: solid}.x-button-outline.x-button-default{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-success{--x-button-border-style: solid}.x-button-outline.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-success)}.x-button-outline.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-button-color-border-success)}.x-button-outline.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-button-color-border-success)}.x-button-outline.x-button-warning{--x-button-border-style: solid}.x-button-outline.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-outline.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-outline.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-outline.x-button-strong{--x-button-border-style: solid}.x-button-outline.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-outline.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-outline.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-outline.x-button-danger{--x-button-border-style: solid}.x-button-outline.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-outline.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-outline.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-outline.x-button-info{--x-button-border-style: solid}.x-button-outline.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-info)}.x-button-outline.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-button-color-border-info)}.x-button-outline.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-button-color-border-info)}.x-button-dashed{--x-button-border-style: dashed}.x-button-dashed{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-default{--x-button-border-style: dashed}.x-button-dashed.x-button-default{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-success{--x-button-border-style: dashed}.x-button-dashed.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-success)}.x-button-dashed.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-button-color-border-success)}.x-button-dashed.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-button-color-border-success)}.x-button-dashed.x-button-warning{--x-button-border-style: dashed}.x-button-dashed.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-dashed.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-dashed.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-dashed.x-button-strong{--x-button-border-style: dashed}.x-button-dashed.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-dashed.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-dashed.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-dashed.x-button-danger{--x-button-border-style: dashed}.x-button-dashed.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-dashed.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-dashed.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-dashed.x-button-info{--x-button-border-style: dashed}.x-button-dashed.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-info)}.x-button-dashed.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-button-color-border-info)}.x-button-dashed.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-button-color-border-info)}.x-button-text{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-default{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain{--x-button-font-weight: 500}.x-button-plain{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button-plain.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button-plain.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button-plain.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border{--x-button-font-weight: 500}.x-button-hide-border{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button-hide-border.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button-hide-border.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button-hide-border.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-link{--x-button-height: auto;--x-button-padding: 0;--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent);--x-button-text-color: var(--x-button-color-text-primary);min-height:0}.x-button-link:not(.is-disabled):hover{--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent);--x-button-text-color: var(--x-button-color-text-primary)}.x-button-link:not(.is-disabled):active{--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent);--x-button-text-color: var(--x-button-color-text-primary)}.x-button-is-disabled{--x-button-opacity: 0.4;cursor:not-allowed}.x-button-block{display:flex;width:100%}.x-button-loading{cursor:default}.x-button-loading-fill--loading{position:absolute;inset:0;z-index:1;justify-content:center;align-items:center;color:var(--x-button-text-color);background-color:var(--x-button-background-color)}.x-button-narrow{--x-button-mini-padding: 0 0;--x-button-small-padding: 0 0;--x-button-medium-padding: 0 0;--x-button-large-padding: 0 0;--x-button-huge-padding: 0 0}.x-button-mini{--x-button-height: var(--x-button-mini-height);--x-button-font-size: var(--x-button-mini-font-size);--x-button-padding: var(--x-button-mini-padding);--x-button-border-radius: var(--x-button-mini-border-radius)}.x-button-small{--x-button-height: var(--x-button-small-height);--x-button-font-size: var(--x-button-small-font-size);--x-button-padding: var(--x-button-small-padding);--x-button-border-radius: var(--x-button-small-border-radius)}.x-button-medium{--x-button-height: var(--x-button-medium-height);--x-button-font-size: var(--x-button-medium-font-size);--x-button-padding: var(--x-button-medium-padding);--x-button-border-radius: var(--x-button-medium-border-radius)}.x-button-large{--x-button-height: var(--x-button-large-height);--x-button-font-size: var(--x-button-large-font-size);--x-button-padding: var(--x-button-large-padding);--x-button-border-radius: var(--x-button-large-border-radius)}.x-button-huge{--x-button-height: var(--x-button-huge-height);--x-button-font-size: var(--x-button-huge-font-size);--x-button-font-weight: var(--x-button-huge-font-weight);--x-button-padding: var(--x-button-huge-padding);--x-button-border-radius: var(--x-button-huge-border-radius)}.x-button-round{--x-button-border-radius: var(--x-button-height);height:var(--x-button-height)}.x-button-circle{--x-button-width: var(--x-button-height);--x-button-padding: 0;--x-button-border-radius: 100%;width:var(--x-button-height);height:var(--x-button-height)}.x-button-group{display:flex;width:min-content}.x-button-group>.x-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.x-button-group>.x-button:last-child{margin-left:-1px;border-left-color:var(--x-button-group-color-separator);border-top-left-radius:0;border-bottom-left-radius:0}.x-button-group>.x-button:not(:first-child):not(:last-child){margin-left:-1px;border-left-color:var(--x-button-group-color-separator);border-radius:0}
1
+ :root{--x-button-color-bg-default: var(--x-color-fill-2);--x-button-color-bg-default-hover: var(--x-color-neutral-3);--x-button-color-bg-default-active: var(--x-color-neutral-4);--x-button-color-text-default: var(--x-color-text-primary);--x-button-color-border-default: var(--x-color-border-default);--x-button-color-text-solid: var(--x-color-white);--x-button-color-text-solid-primary: var(--x-color-white);--x-button-color-text-solid-success: var(--x-color-white);--x-button-color-text-solid-warning: var(--x-color-white);--x-button-color-text-solid-strong: var(--x-color-white);--x-button-color-text-solid-danger: var(--x-color-white);--x-button-color-text-solid-info: var(--x-color-white);--x-button-color-bg-primary-subtle: var(--x-color-primary-subtle);--x-button-color-bg-primary-subtle-hover: var(--x-color-primary-subtle-hover);--x-button-color-bg-primary-subtle-active: var(--x-color-primary-subtle-active);--x-button-color-bg-primary-solid: var(--x-color-primary-solid);--x-button-color-bg-primary-solid-hover: var(--x-color-primary-solid-hover);--x-button-color-bg-primary-solid-active: var(--x-color-primary-solid-active);--x-button-color-text-primary: var(--x-color-primary-button-text);--x-button-color-border-primary: var(--x-color-primary-solid);--x-button-color-bg-success-subtle: var(--x-color-success-subtle);--x-button-color-bg-success-subtle-hover: var(--x-color-success-subtle-hover);--x-button-color-bg-success-subtle-active: var(--x-color-success-subtle-active);--x-button-color-bg-success-solid: var(--x-color-success-solid);--x-button-color-bg-success-solid-hover: var(--x-color-success-solid-hover);--x-button-color-bg-success-solid-active: var(--x-color-success-solid-active);--x-button-color-text-success: var(--x-color-success-button-text);--x-button-color-border-success: var(--x-color-success-solid);--x-button-color-bg-warning-subtle: var(--x-color-warning-subtle);--x-button-color-bg-warning-subtle-hover: var(--x-color-warning-subtle-hover);--x-button-color-bg-warning-subtle-active: var(--x-color-warning-subtle-active);--x-button-color-bg-warning-solid: var(--x-color-warning-solid);--x-button-color-bg-warning-solid-hover: var(--x-color-warning-solid-hover);--x-button-color-bg-warning-solid-active: var(--x-color-warning-solid-active);--x-button-color-text-warning: var(--x-color-warning-button-text);--x-button-color-border-warning: var(--x-color-warning-solid);--x-button-color-bg-danger-subtle: var(--x-color-danger-subtle);--x-button-color-bg-danger-subtle-hover: var(--x-color-danger-subtle-hover);--x-button-color-bg-danger-subtle-active: var(--x-color-danger-subtle-active);--x-button-color-bg-danger-solid: var(--x-color-danger-solid);--x-button-color-bg-danger-solid-hover: var(--x-color-danger-solid-hover);--x-button-color-bg-danger-solid-active: var(--x-color-danger-solid-active);--x-button-color-text-danger: var(--x-color-danger-button-text);--x-button-color-border-danger: var(--x-color-danger-solid);--x-button-color-bg-strong-subtle: var(--x-color-strong-subtle);--x-button-color-bg-strong-subtle-hover: var(--x-color-strong-subtle-hover);--x-button-color-bg-strong-subtle-active: var(--x-color-strong-subtle-active);--x-button-color-bg-strong-solid: var(--x-color-strong-solid);--x-button-color-bg-strong-solid-hover: var(--x-color-strong-solid-hover);--x-button-color-bg-strong-solid-active: var(--x-color-strong-solid-active);--x-button-color-text-strong: var(--x-color-strong-button-text);--x-button-color-border-strong: var(--x-color-strong-solid);--x-button-color-bg-info-subtle: var(--x-color-fill-2);--x-button-color-bg-info-subtle-hover: var(--x-color-neutral-3);--x-button-color-bg-info-subtle-active: var(--x-color-neutral-4);--x-button-color-bg-info-solid: var(--x-color-constant-neutral-strong);--x-button-color-bg-info-solid-hover: var(--x-color-constant-neutral-strong-hover);--x-button-color-bg-info-solid-active: var(--x-color-constant-neutral-strong-active);--x-button-color-text-info: var(--x-color-text-secondary);--x-button-color-border-info: var(--x-color-neutral-5)}.x-button{--x-button-width: auto;--x-button-font-weight: 500;--x-button-opacity: 1;--x-button-border-style: solid;--x-button-border-color: var(--x-button-color-border-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-text-color: var(--x-button-color-text-default);--x-button-padding: 0 0;--x-button-mini-height: var(--x-size-mini);--x-button-mini-font-size: 12px;--x-button-mini-padding: 0 8px;--x-button-mini-border-radius: 4px;--x-button-small-height: var(--x-size-small);--x-button-small-font-size: 13px;--x-button-small-padding: 0 10px;--x-button-small-border-radius: 4px;--x-button-medium-height: var(--x-size-medium);--x-button-medium-font-size: 14px;--x-button-medium-padding: 0 14px;--x-button-medium-border-radius: 4px;--x-button-large-height: var(--x-size-large);--x-button-large-font-size: 14px;--x-button-large-padding: 0 20px;--x-button-large-border-radius: 6px;--x-button-huge-height: var(--x-size-huge);--x-button-huge-font-size: 16px;--x-button-huge-font-weight: 400;--x-button-huge-padding: 0 28px;--x-button-huge-border-radius: 4px}.x-button{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button{position:relative;display:inline-flex;justify-content:center;align-items:center;overflow:visible;margin:0;border-style:var(--x-button-border-style);border-width:1px;border-color:var(--x-button-border-color);border-radius:var(--x-button-border-radius);padding:var(--x-button-padding);width:var(--x-button-width);height:var(--x-button-height);color:var(--x-button-text-color);font-size:var(--x-button-font-size);font-weight:var(--x-button-font-weight);line-height:var(--x-line-height-base);white-space:nowrap;background-color:var(--x-button-background-color);opacity:var(--x-button-opacity);outline:none;transition:color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),border-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear);box-sizing:border-box;appearance:none;user-select:none;vertical-align:bottom;cursor:pointer}.x-button>.x-wave{position:absolute;inset:-1px;z-index:0;border-radius:inherit;pointer-events:none;opacity:.45;box-shadow:0 0 0 0 var(--x-wave-color, currentColor);transition:box-shadow var(--x-transition-duration-4, 0.4s) var(--x-transition-timing-function-standard, ease),opacity var(--x-transition-duration-4, 0.4s) var(--x-transition-timing-function-linear, linear)}.x-button>.x-wave-active{opacity:0;box-shadow:0 0 0 6px var(--x-wave-color, currentColor)}.x-button--prefix{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;margin-right:4px}.x-button--suffix{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;margin-left:4px}.x-button--loading{position:relative;z-index:1;display:flex;flex-shrink:0;transition:width .2s ease,opacity .2s ease,margin-right .2s ease}@media(prefers-reduced-motion: reduce){.x-button--loading{transition:none}}.x-button--content{position:relative;z-index:1;display:flex}.x-button.x-button-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-primary{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid);--x-button-border-color: var(--x-button-color-bg-primary-solid)}.x-button-primary:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-hover);--x-button-border-color: var(--x-button-color-bg-primary-solid-hover)}.x-button-primary:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-active);--x-button-border-color: var(--x-button-color-bg-primary-solid-active)}.x-button-primary.x-button-default{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid);--x-button-border-color: var(--x-button-color-bg-primary-solid)}.x-button-primary.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-hover);--x-button-border-color: var(--x-button-color-bg-primary-solid-hover)}.x-button-primary.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-active);--x-button-border-color: var(--x-button-color-bg-primary-solid-active)}.x-button-primary.x-button-success{--x-button-text-color: var(--x-button-color-text-solid-success);--x-button-background-color: var(--x-button-color-bg-success-solid);--x-button-border-color: var(--x-button-color-bg-success-solid)}.x-button-primary.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-success);--x-button-background-color: var(--x-button-color-bg-success-solid-hover);--x-button-border-color: var(--x-button-color-bg-success-solid-hover)}.x-button-primary.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-success);--x-button-background-color: var(--x-button-color-bg-success-solid-active);--x-button-border-color: var(--x-button-color-bg-success-solid-active)}.x-button-primary.x-button-warning{--x-button-text-color: var(--x-button-color-text-solid-warning);--x-button-background-color: var(--x-button-color-bg-warning-solid);--x-button-border-color: var(--x-button-color-bg-warning-solid)}.x-button-primary.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-warning);--x-button-background-color: var(--x-button-color-bg-warning-solid-hover);--x-button-border-color: var(--x-button-color-bg-warning-solid-hover)}.x-button-primary.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-warning);--x-button-background-color: var(--x-button-color-bg-warning-solid-active);--x-button-border-color: var(--x-button-color-bg-warning-solid-active)}.x-button-primary.x-button-strong{--x-button-text-color: var(--x-button-color-text-solid-strong);--x-button-background-color: var(--x-button-color-bg-strong-solid);--x-button-border-color: var(--x-button-color-bg-strong-solid)}.x-button-primary.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-strong);--x-button-background-color: var(--x-button-color-bg-strong-solid-hover);--x-button-border-color: var(--x-button-color-bg-strong-solid-hover)}.x-button-primary.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-strong);--x-button-background-color: var(--x-button-color-bg-strong-solid-active);--x-button-border-color: var(--x-button-color-bg-strong-solid-active)}.x-button-primary.x-button-danger{--x-button-text-color: var(--x-button-color-text-solid-danger);--x-button-background-color: var(--x-button-color-bg-danger-solid);--x-button-border-color: var(--x-button-color-bg-danger-solid)}.x-button-primary.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-danger);--x-button-background-color: var(--x-button-color-bg-danger-solid-hover);--x-button-border-color: var(--x-button-color-bg-danger-solid-hover)}.x-button-primary.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-danger);--x-button-background-color: var(--x-button-color-bg-danger-solid-active);--x-button-border-color: var(--x-button-color-bg-danger-solid-active)}.x-button-primary.x-button-info{--x-button-text-color: var(--x-button-color-text-solid-info);--x-button-background-color: var(--x-button-color-bg-info-solid);--x-button-border-color: var(--x-button-color-bg-info-solid)}.x-button-primary.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-info);--x-button-background-color: var(--x-button-color-bg-info-solid-hover);--x-button-border-color: var(--x-button-color-bg-info-solid-hover)}.x-button-primary.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-info);--x-button-background-color: var(--x-button-color-bg-info-solid-active);--x-button-border-color: var(--x-button-color-bg-info-solid-active)}.x-button-outline{--x-button-border-style: solid}.x-button-outline{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-default{--x-button-border-style: solid}.x-button-outline.x-button-default{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-success{--x-button-border-style: solid}.x-button-outline.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-success)}.x-button-outline.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-button-color-border-success)}.x-button-outline.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-button-color-border-success)}.x-button-outline.x-button-warning{--x-button-border-style: solid}.x-button-outline.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-outline.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-outline.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-outline.x-button-strong{--x-button-border-style: solid}.x-button-outline.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-outline.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-outline.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-outline.x-button-danger{--x-button-border-style: solid}.x-button-outline.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-outline.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-outline.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-outline.x-button-info{--x-button-border-style: solid}.x-button-outline.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-info)}.x-button-outline.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-button-color-border-info)}.x-button-outline.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-button-color-border-info)}.x-button-dashed{--x-button-border-style: dashed}.x-button-dashed{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-default{--x-button-border-style: dashed}.x-button-dashed.x-button-default{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-success{--x-button-border-style: dashed}.x-button-dashed.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-success)}.x-button-dashed.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-button-color-border-success)}.x-button-dashed.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-button-color-border-success)}.x-button-dashed.x-button-warning{--x-button-border-style: dashed}.x-button-dashed.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-dashed.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-dashed.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-dashed.x-button-strong{--x-button-border-style: dashed}.x-button-dashed.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-dashed.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-dashed.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-dashed.x-button-danger{--x-button-border-style: dashed}.x-button-dashed.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-dashed.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-dashed.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-dashed.x-button-info{--x-button-border-style: dashed}.x-button-dashed.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-info)}.x-button-dashed.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-button-color-border-info)}.x-button-dashed.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-button-color-border-info)}.x-button-text{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-default{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain{--x-button-font-weight: 500}.x-button-plain{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button-plain.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button-plain.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button-plain.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border{--x-button-font-weight: 500}.x-button-hide-border{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button-hide-border.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button-hide-border.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button-hide-border.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-link{--x-button-height: auto;--x-button-padding: 0;--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent);--x-button-text-color: var(--x-button-color-text-primary);min-height:0}.x-button-link:not(.is-disabled):hover{--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent);--x-button-text-color: var(--x-button-color-text-primary)}.x-button-link:not(.is-disabled):active{--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent);--x-button-text-color: var(--x-button-color-text-primary)}.x-button-is-disabled{--x-button-opacity: 0.4;cursor:not-allowed}.x-button-block{display:flex;width:100%}.x-button-loading{cursor:default}.x-button-loading-fill--loading{position:absolute;inset:0;z-index:1;justify-content:center;align-items:center;color:var(--x-button-text-color);background-color:var(--x-button-background-color)}.x-button-narrow{--x-button-mini-padding: 0 0;--x-button-small-padding: 0 0;--x-button-medium-padding: 0 0;--x-button-large-padding: 0 0;--x-button-huge-padding: 0 0}.x-button-mini{--x-button-height: var(--x-button-mini-height);--x-button-font-size: var(--x-button-mini-font-size);--x-button-padding: var(--x-button-mini-padding);--x-button-border-radius: var(--x-button-mini-border-radius)}.x-button-small{--x-button-height: var(--x-button-small-height);--x-button-font-size: var(--x-button-small-font-size);--x-button-padding: var(--x-button-small-padding);--x-button-border-radius: var(--x-button-small-border-radius)}.x-button-medium{--x-button-height: var(--x-button-medium-height);--x-button-font-size: var(--x-button-medium-font-size);--x-button-padding: var(--x-button-medium-padding);--x-button-border-radius: var(--x-button-medium-border-radius)}.x-button-large{--x-button-height: var(--x-button-large-height);--x-button-font-size: var(--x-button-large-font-size);--x-button-padding: var(--x-button-large-padding);--x-button-border-radius: var(--x-button-large-border-radius)}.x-button-huge{--x-button-height: var(--x-button-huge-height);--x-button-font-size: var(--x-button-huge-font-size);--x-button-font-weight: var(--x-button-huge-font-weight);--x-button-padding: var(--x-button-huge-padding);--x-button-border-radius: var(--x-button-huge-border-radius)}.x-button-round{--x-button-border-radius: var(--x-button-height);height:var(--x-button-height)}.x-button-circle{--x-button-width: var(--x-button-height);--x-button-padding: 0;--x-button-border-radius: 100%;width:var(--x-button-height);height:var(--x-button-height)}.x-button-group{display:flex;width:min-content}.x-button-group>.x-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.x-button-group>.x-button:last-child{margin-left:-1px;border-left-color:var(--x-button-group-color-separator);border-top-left-radius:0;border-bottom-left-radius:0}.x-button-group>.x-button:not(:first-child):not(:last-child){margin-left:-1px;border-left-color:var(--x-button-group-color-separator);border-radius:0}
package/dist/style/heatmap.css CHANGED
@@ -1 +1 @@
1
- :root{--x-heatmap-color-level-1: var(--x-color-primary-1);--x-heatmap-color-level-2: var(--x-color-primary-2);--x-heatmap-color-level-3: var(--x-color-primary-3);--x-heatmap-color-level-4: var(--x-color-primary-5);--x-heatmap-color-level-5: var(--x-color-primary-6);--x-heatmap-color-empty: var(--x-color-fill-2);--x-heatmap-color-text: var(--x-color-text-3);--x-heatmap-border-radius-cell: var(--x-border-radius-small);--x-heatmap-border-radius-tooltip: var(--x-border-radius-medium);--x-heatmap-color-tooltip-bg: var(--x-color-overlay-tooltip-bg);--x-heatmap-color-tooltip-text: var(--x-color-white);--x-heatmap-shadow-tooltip: var(--x-shadow-popover);--x-heatmap-color-cell-border: var(--x-color-border-subtle);--x-heatmap-margin-label: var(--x-spacing-1);--x-heatmap-spacing-week-label: var(--x-spacing-1);--x-heatmap-spacing-indicator: var(--x-spacing-2);--x-heatmap-spacing-footer: var(--x-spacing-4)}.x-heatmap{position:relative;display:inline-block;color:var(--x-heatmap-color-text);font-size:var(--x-font-size-caption);--x-heatmap-cell-size: 12px;--x-heatmap-cell-gap: var(--x-spacing-1)}.x-heatmap--body{display:flex;align-items:flex-start;gap:var(--x-heatmap-margin-label)}.x-heatmap--week-labels{display:grid;flex:none;grid-auto-flow:column;align-items:center;padding-top:calc(var(--x-font-size-caption)*1.5 + var(--x-heatmap-spacing-week-label))}.x-heatmap--week-label{height:var(--x-heatmap-cell-size);margin-bottom:var(--x-heatmap-cell-gap);line-height:var(--x-heatmap-cell-size);text-align:right;white-space:nowrap}.x-heatmap--grid-wrapper{position:relative;min-width:0}.x-heatmap--month-labels{display:grid;grid-auto-flow:column;height:calc(var(--x-font-size-caption)*1.5);margin-bottom:var(--x-heatmap-spacing-week-label)}.x-heatmap--month-label{grid-row:1;line-height:1.5;white-space:nowrap}.x-heatmap--grid{position:relative;display:grid;gap:var(--x-heatmap-cell-gap)}.x-heatmap--cell{width:var(--x-heatmap-cell-size);height:var(--x-heatmap-cell-size);border-radius:var(--x-heatmap-border-radius-cell);cursor:pointer;transition:opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear),outline-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-heatmap--cell:hover{outline:1px solid var(--x-heatmap-color-cell-border);outline-offset:1px}.x-heatmap--cell:focus-visible{outline:2px solid var(--x-color-primary-text);outline-offset:1px}.x-heatmap-is-out-of-range{opacity:.45}.x-heatmap--tooltip{position:absolute;z-index:1;padding:var(--x-spacing-2) var(--x-spacing-4);color:var(--x-heatmap-color-tooltip-text);font-size:var(--x-font-size-caption);line-height:1.5;white-space:nowrap;background-color:var(--x-heatmap-color-tooltip-bg);border-radius:var(--x-heatmap-border-radius-tooltip);box-shadow:var(--x-heatmap-shadow-tooltip);pointer-events:none;transform:translate(-50%, 0);opacity:0;transition:opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-heatmap-is-visible{opacity:1}.x-heatmap--indicator{display:flex;gap:var(--x-heatmap-spacing-indicator);align-items:center;justify-content:flex-end;margin-top:var(--x-heatmap-spacing-indicator);line-height:1}.x-heatmap--indicator-swatch{width:var(--x-heatmap-cell-size);height:var(--x-heatmap-cell-size);border-radius:var(--x-heatmap-border-radius-cell)}.x-heatmap--indicator-leading.x-heatmap--indicator-trailing{white-space:nowrap}.x-heatmap--footer{margin-top:var(--x-heatmap-spacing-footer)}.x-heatmap--grid:focus-visible{outline:2px solid var(--x-color-border-focus);outline-offset:2px;border-radius:var(--x-border-radius-small)}.x-heatmap--live{position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}
1
+ :root{--x-heatmap-color-level-1: var(--x-color-primary-1);--x-heatmap-color-level-2: var(--x-color-primary-2);--x-heatmap-color-level-3: var(--x-color-primary-3);--x-heatmap-color-level-4: var(--x-color-primary-5);--x-heatmap-color-level-5: var(--x-color-primary-6);--x-heatmap-color-empty: var(--x-color-fill-2);--x-heatmap-color-text: var(--x-color-text-3);--x-heatmap-border-radius-cell: var(--x-border-radius-small);--x-heatmap-border-radius-tooltip: var(--x-border-radius-medium);--x-heatmap-color-tooltip-bg: var(--x-color-overlay-tooltip-bg);--x-heatmap-color-tooltip-text: var(--x-color-overlay-tooltip-text);--x-heatmap-shadow-tooltip: var(--x-shadow-popover);--x-heatmap-color-cell-border: var(--x-color-border-subtle);--x-heatmap-margin-label: var(--x-spacing-1);--x-heatmap-spacing-week-label: var(--x-spacing-1);--x-heatmap-spacing-indicator: var(--x-spacing-2);--x-heatmap-spacing-footer: var(--x-spacing-4)}.x-heatmap{position:relative;display:inline-block;color:var(--x-heatmap-color-text);font-size:var(--x-font-size-caption);--x-heatmap-cell-size: 12px;--x-heatmap-cell-gap: var(--x-spacing-1)}.x-heatmap--body{display:flex;align-items:flex-start;gap:var(--x-heatmap-margin-label)}.x-heatmap--week-labels{display:grid;flex:none;grid-auto-flow:column;align-items:center;padding-top:calc(var(--x-font-size-caption)*1.5 + var(--x-heatmap-spacing-week-label))}.x-heatmap--week-label{height:var(--x-heatmap-cell-size);margin-bottom:var(--x-heatmap-cell-gap);line-height:var(--x-heatmap-cell-size);text-align:right;white-space:nowrap}.x-heatmap--grid-wrapper{position:relative;min-width:0}.x-heatmap--month-labels{display:grid;grid-auto-flow:column;height:calc(var(--x-font-size-caption)*1.5);margin-bottom:var(--x-heatmap-spacing-week-label)}.x-heatmap--month-label{grid-row:1;line-height:1.5;white-space:nowrap}.x-heatmap--grid{position:relative;display:grid;gap:var(--x-heatmap-cell-gap)}.x-heatmap--cell{width:var(--x-heatmap-cell-size);height:var(--x-heatmap-cell-size);border-radius:var(--x-heatmap-border-radius-cell);cursor:pointer;transition:opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear),outline-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-heatmap--cell:hover{outline:1px solid var(--x-heatmap-color-cell-border);outline-offset:1px}.x-heatmap--cell:focus-visible{outline:2px solid var(--x-color-primary-text);outline-offset:1px}.x-heatmap-is-out-of-range{opacity:.45}.x-heatmap--tooltip{position:absolute;z-index:1;padding:var(--x-spacing-2) var(--x-spacing-4);color:var(--x-heatmap-color-tooltip-text);font-size:var(--x-font-size-caption);line-height:1.5;white-space:nowrap;background-color:var(--x-heatmap-color-tooltip-bg);border-radius:var(--x-heatmap-border-radius-tooltip);box-shadow:var(--x-heatmap-shadow-tooltip);pointer-events:none;transform:translate(-50%, 0);opacity:0;transition:opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-heatmap-is-visible{opacity:1}.x-heatmap--indicator{display:flex;gap:var(--x-heatmap-spacing-indicator);align-items:center;justify-content:flex-end;margin-top:var(--x-heatmap-spacing-indicator);line-height:1}.x-heatmap--indicator-swatch{width:var(--x-heatmap-cell-size);height:var(--x-heatmap-cell-size);border-radius:var(--x-heatmap-border-radius-cell)}.x-heatmap--indicator-leading.x-heatmap--indicator-trailing{white-space:nowrap}.x-heatmap--footer{margin-top:var(--x-heatmap-spacing-footer)}.x-heatmap--grid:focus-visible{outline:2px solid var(--x-color-border-focus);outline-offset:2px;border-radius:var(--x-border-radius-small)}.x-heatmap--live{position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}