@acorex/components 19.11.2 → 19.11.4-next.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 (96) hide show
  1. package/button/index.d.ts +0 -1
  2. package/button/lib/button.component.d.ts +6 -1
  3. package/common/lib/types/base/button.type.d.ts +1 -1
  4. package/common/lib/types/base/color.type.d.ts +1 -1
  5. package/common/lib/types/base/interactive.type.d.ts +1 -1
  6. package/common/lib/types/base/look.type.d.ts +1 -1
  7. package/common/lib/types/base/value.type.d.ts +1 -1
  8. package/conversation/lib/conversation-input/conversation-input.component.d.ts +18 -11
  9. package/conversation/lib/conversation-messages/conversation-message-image-popup/conversation-message-image-popup.component.d.ts +1 -1
  10. package/fesm2022/acorex-components-breadcrumbs.mjs +4 -4
  11. package/fesm2022/acorex-components-breadcrumbs.mjs.map +1 -1
  12. package/fesm2022/acorex-components-button-group.mjs +1 -1
  13. package/fesm2022/acorex-components-button-group.mjs.map +1 -1
  14. package/fesm2022/acorex-components-button.mjs +26 -7
  15. package/fesm2022/acorex-components-button.mjs.map +1 -1
  16. package/fesm2022/acorex-components-check-box.mjs +2 -2
  17. package/fesm2022/acorex-components-check-box.mjs.map +1 -1
  18. package/fesm2022/acorex-components-common.mjs +5 -13
  19. package/fesm2022/acorex-components-common.mjs.map +1 -1
  20. package/fesm2022/acorex-components-conversation.mjs +31 -8
  21. package/fesm2022/acorex-components-conversation.mjs.map +1 -1
  22. package/fesm2022/acorex-components-data-pager.mjs +4 -4
  23. package/fesm2022/acorex-components-data-pager.mjs.map +1 -1
  24. package/fesm2022/acorex-components-data-table.mjs +2 -2
  25. package/fesm2022/acorex-components-data-table.mjs.map +1 -1
  26. package/fesm2022/acorex-components-datetime-box.mjs +26 -1
  27. package/fesm2022/acorex-components-datetime-box.mjs.map +1 -1
  28. package/fesm2022/acorex-components-datetime-input.mjs +11 -2
  29. package/fesm2022/acorex-components-datetime-input.mjs.map +1 -1
  30. package/fesm2022/acorex-components-datetime-picker.mjs +9 -4
  31. package/fesm2022/acorex-components-datetime-picker.mjs.map +1 -1
  32. package/fesm2022/acorex-components-dialog.mjs +1 -1
  33. package/fesm2022/acorex-components-dialog.mjs.map +1 -1
  34. package/fesm2022/acorex-components-dropdown-button.mjs +2 -2
  35. package/fesm2022/acorex-components-dropdown-button.mjs.map +1 -1
  36. package/fesm2022/acorex-components-file-explorer.mjs +1 -1
  37. package/fesm2022/acorex-components-file-explorer.mjs.map +1 -1
  38. package/fesm2022/acorex-components-form.mjs +2 -7
  39. package/fesm2022/acorex-components-form.mjs.map +1 -1
  40. package/fesm2022/acorex-components-grid-layout-builder.mjs +11 -4
  41. package/fesm2022/acorex-components-grid-layout-builder.mjs.map +1 -1
  42. package/fesm2022/acorex-components-image-editor.mjs +4 -4
  43. package/fesm2022/acorex-components-image-editor.mjs.map +1 -1
  44. package/fesm2022/acorex-components-kbd.mjs +3 -12
  45. package/fesm2022/acorex-components-kbd.mjs.map +1 -1
  46. package/fesm2022/acorex-components-loading-dialog.mjs +1 -1
  47. package/fesm2022/acorex-components-loading-dialog.mjs.map +1 -1
  48. package/fesm2022/acorex-components-media-viewer.mjs +3 -0
  49. package/fesm2022/acorex-components-media-viewer.mjs.map +1 -1
  50. package/fesm2022/acorex-components-menu.mjs +4 -4
  51. package/fesm2022/acorex-components-menu.mjs.map +1 -1
  52. package/fesm2022/acorex-components-notification.mjs +1 -1
  53. package/fesm2022/acorex-components-notification.mjs.map +1 -1
  54. package/fesm2022/acorex-components-otp.mjs +12 -8
  55. package/fesm2022/acorex-components-otp.mjs.map +1 -1
  56. package/fesm2022/acorex-components-paint.mjs +1 -1
  57. package/fesm2022/acorex-components-paint.mjs.map +1 -1
  58. package/fesm2022/acorex-components-password-box.mjs +2 -2
  59. package/fesm2022/acorex-components-password-box.mjs.map +1 -1
  60. package/fesm2022/acorex-components-phone-box.mjs +2 -2
  61. package/fesm2022/acorex-components-phone-box.mjs.map +1 -1
  62. package/fesm2022/acorex-components-query-builder.mjs +1 -1
  63. package/fesm2022/acorex-components-query-builder.mjs.map +1 -1
  64. package/fesm2022/acorex-components-rail-navigation.mjs +2 -2
  65. package/fesm2022/acorex-components-rail-navigation.mjs.map +1 -1
  66. package/fesm2022/acorex-components-range-slider.mjs +10 -8
  67. package/fesm2022/acorex-components-range-slider.mjs.map +1 -1
  68. package/fesm2022/acorex-components-rest-api-generator.mjs +2 -2
  69. package/fesm2022/acorex-components-rest-api-generator.mjs.map +1 -1
  70. package/fesm2022/acorex-components-scheduler.mjs +2 -2
  71. package/fesm2022/acorex-components-scheduler.mjs.map +1 -1
  72. package/fesm2022/acorex-components-select-box.mjs +2 -2
  73. package/fesm2022/acorex-components-select-box.mjs.map +1 -1
  74. package/fesm2022/acorex-components-step-wizard.mjs +2 -2
  75. package/fesm2022/acorex-components-step-wizard.mjs.map +1 -1
  76. package/fesm2022/acorex-components-tabs.mjs +2 -1
  77. package/fesm2022/acorex-components-tabs.mjs.map +1 -1
  78. package/fesm2022/acorex-components-tag-box.mjs +79 -20
  79. package/fesm2022/acorex-components-tag-box.mjs.map +1 -1
  80. package/fesm2022/acorex-components-tag.mjs +2 -2
  81. package/fesm2022/acorex-components-tag.mjs.map +1 -1
  82. package/fesm2022/acorex-components-text-area.mjs +2 -2
  83. package/fesm2022/acorex-components-text-area.mjs.map +1 -1
  84. package/fesm2022/acorex-components-text-box.mjs +2 -2
  85. package/fesm2022/acorex-components-text-box.mjs.map +1 -1
  86. package/fesm2022/acorex-components-wysiwyg.mjs +8 -8
  87. package/fesm2022/acorex-components-wysiwyg.mjs.map +1 -1
  88. package/kbd/lib/kbd.component.d.ts +1 -3
  89. package/media-viewer/lib/media-viewer-container/media-viewer-container.component.d.ts +1 -0
  90. package/otp/lib/otp.component.d.ts +2 -1
  91. package/package.json +5 -5
  92. package/range-slider/lib/range-slider.component.d.ts +1 -0
  93. package/tag-box/README.md +2 -2
  94. package/tag-box/lib/tag-box.component.d.ts +11 -4
  95. package/tag-box/lib/tag-box.module.d.ts +4 -4
  96. package/button/lib/button.class.d.ts +0 -1
package/fesm2022/acorex-components-button.mjs CHANGED
@@ -2,9 +2,9 @@ import * as i1 from '@acorex/components/common';
2
2
  import { MXInteractiveComponent, MXColorComponent, AXClosbaleComponent, MXButtonBaseComponent, AXRippleDirective, AXComponent, AXFocusableComponent, AXCommonModule } from '@acorex/components/common';
3
3
  import { AXDecoratorGenericComponent, AXDecoratorIconComponent, AXDecoratorModule } from '@acorex/components/decorators';
4
4
  import * as i0 from '@angular/core';
5
- import { EventEmitter, HostBinding, HostListener, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, input, afterNextRender, ContentChildren, Optional, Inject, model, NgModule } from '@angular/core';
5
+ import { EventEmitter, HostBinding, HostListener, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, input, afterNextRender, ContentChildren, Optional, Inject, computed, contentChild, model, NgModule } from '@angular/core';
6
6
  import { classes } from 'polytype';
7
- import { AXLoadingModule } from '@acorex/components/loading';
7
+ import { AXLoadingComponent, AXLoadingModule } from '@acorex/components/loading';
8
8
  import { CommonModule } from '@angular/common';
9
9
 
10
10
  /**
@@ -288,6 +288,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
288
288
  class AXButtonComponent extends MXButtonBaseComponent {
289
289
  constructor() {
290
290
  super(...arguments);
291
+ this.iconOnly = input(false);
292
+ this.showIcon = computed(() => {
293
+ return !this.hasLoadingIcon();
294
+ });
295
+ this.loadingIcon = contentChild(AXLoadingComponent);
296
+ this.hasLoadingIcon = computed(() => this.loadingIcon() != null);
291
297
  /**
292
298
  * Fires each time the user clicks the button.
293
299
  * @event
@@ -350,9 +356,13 @@ class AXButtonComponent extends MXButtonBaseComponent {
350
356
  * @ignore
351
357
  */
352
358
  get __hostClass() {
353
- return Object.entries(this.cssClasses)
359
+ const list = Object.entries(this.cssClasses)
354
360
  .filter((c) => c[1])
355
361
  .map((c) => c[0]);
362
+ if (this.iconOnly()) {
363
+ list.push('ax-button-icon');
364
+ }
365
+ return list;
356
366
  }
357
367
  /**
358
368
  * Sets focus on the button element and adds a focus style class.
@@ -370,19 +380,28 @@ class AXButtonComponent extends MXButtonBaseComponent {
370
380
  this.getButton().classList.remove('ax-state-focus');
371
381
  }
372
382
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
373
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: AXButtonComponent, isStandalone: true, selector: "ax-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", selectedChange: "selectedChange", toggleableChange: "toggleableChange", lookChange: "lookChange", colorChange: "colorChange", disabledChange: "disabledChange", loadingText: "loadingTextChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
383
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: AXButtonComponent, isStandalone: true, selector: "ax-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", selectedChange: "selectedChange", toggleableChange: "toggleableChange", lookChange: "lookChange", colorChange: "colorChange", disabledChange: "disabledChange", loadingText: "loadingTextChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
374
384
  { provide: AXComponent, useExisting: AXButtonComponent },
375
385
  { provide: AXButtonItemComponent, useExisting: AXButtonComponent },
376
386
  { provide: AXFocusableComponent, useExisting: AXButtonComponent },
377
- ], usesInheritance: true, ngImport: i0, template: "<button\n [axRipple]\n [disabled]=\"disabled\"\n [attr.tabindex]=\"tabIndex\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n (click)=\"_handleClick($event)\"\n [attr.type]=\"type()\"\n>\n <ng-content select=\"ax-loading, ax-loading-spinner\"> </ng-content>\n <ng-content select=\"ax-prefix, ax-icon\"> </ng-content>\n <ng-content select=\"ax-content\"> </ng-content>\n\n @if (text && !loadingText()) {\n <span class=\"ax-button-text\">{{ text }}</span>\n }\n @if (loadingText()) {\n <span class=\"ax-button-text\">{{ loadingText() }}</span>\n }\n\n <ng-content select=\"ax-suffix\"> </ng-content>\n <ng-content select=\"ax-dropdown-panel\"> </ng-content>\n <ng-content select=\".tab-content\"> </ng-content>\n\n <ng-content></ng-content>\n</button>\n", styles: ["ax-button{--ax-comp-button-padding-y: 0;--ax-comp-button-border-radius: var(--ax-sys-border-radius);--ax-comp-button-height: calc(var(--ax-sys-size-base) * var(--ax-comp-button-size-ratio, 1));--ax-comp-button-text-padding-x: .5rem}ax-button ax-prefix{display:flex;padding-inline-start:var(--ax-comp-button-decorator-padding-x)}ax-button ax-suffix{display:flex;padding-inline-end:var(--ax-comp-button-decorator-padding-x)}ax-button.ax-button-icon{--ax-comp-button-decorator-padding-x: 0 !important;font-size:var(--ax-comp-button-icon-only-font-size)}.ax-xs ax-button,ax-button.ax-xs{--ax-comp-button-font-size: .75rem;--ax-comp-button-padding-x: .25rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: .875rem}.ax-sm ax-button,ax-button.ax-sm{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: .5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1rem}.ax-md ax-button,ax-button{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: 1rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: 1.25rem}.ax-lg ax-button,ax-button.ax-lg{--ax-comp-button-font-size: 1.125rem;--ax-comp-button-padding-x: 1.125rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.5rem}.ax-xl ax-button,ax-button.ax-xl{--ax-comp-button-font-size: 1.5rem;--ax-comp-button-padding-x: 1.5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.75rem}ax-button.ax-solid{--ax-comp-button-border-width: 1px}ax-button.ax-solid>button:focus-visible,ax-button.ax-solid>button.ax-state-focus{outline:2px solid;outline-offset:3px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-solid.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-darkest-surface)}ax-button.ax-solid.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-darkest-surface)}ax-button.ax-solid.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-darkest-surface)}ax-button.ax-solid.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-darkest-surface)}ax-button.ax-solid.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-darkest-surface)}ax-button.ax-solid.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-solid.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-darker-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-outline.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-lighter-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-outline.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-outline{--ax-comp-button-border-width: 1px;--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-hover-bg-color: transparent;--ax-comp-button-pressed-bg-color: transparent;--ax-comp-button-focused-bg-color: transparent}ax-button.ax-outline>button:focus-visible,ax-button.ax-outline>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-outline.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-outline.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-outline.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-outline.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-outline.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-twotone.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-darker-surface)}.ax-dark ax-button.ax-twotone.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-lighter-surface)}ax-button.ax-twotone{--ax-comp-button-border-width: 1px}ax-button.ax-twotone>button:focus-visible,ax-button.ax-twotone>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-twotone.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-twotone.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-twotone.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-twotone.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-twotone.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-blank.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-blank.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-darker-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-blank{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-blank>button:focus-visible,ax-button.ax-blank>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-blank.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface)}ax-button.ax-blank.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-blank.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface)}ax-button.ax-blank.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface)}ax-button.ax-blank.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface)}ax-button.ax-link.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-link.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-link{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-link>button:focus-visible,ax-button.ax-link>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-link.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface)}ax-button.ax-link.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface)}ax-button.ax-link.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface)}ax-button.ax-link.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface)}ax-button.ax-link.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface)}ax-button-item.ax-primary{--ax-comp-button-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-primary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-primary-surface)}ax-button-item.ax-secondary{--ax-comp-button-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-secondary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-secondary-surface)}ax-button-item.ax-success{--ax-comp-button-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-success-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-success-surface)}ax-button-item.ax-warning{--ax-comp-button-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-warning-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-warning-surface)}ax-button-item.ax-danger{--ax-comp-button-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-danger-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-danger-surface)}ax-button{position:relative;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;transition-property:background-color,border-color,color,border-width,font-size,height;transition-timing-function:var(--ax-sys-transition-timing-function);transition-duration:var(--ax-sys-transition-duration);color:rgba(var(--ax-comp-button-normal-text-color));background-color:rgba(var(--ax-comp-button-normal-bg-color));border-color:rgba(var(--ax-comp-button-normal-border-color));border-width:var(--ax-comp-button-border-width, 0px);font-family:var(--ax-comp-button-font-family);font-size:var(--ax-comp-button-font-size);font-weight:var(--ax-comp-button-font-weight);border-radius:var(--ax-comp-button-border-radius);height:var(--ax-comp-button-height);line-height:var(--ax-comp-button-height)}ax-button>button{position:relative;display:inline-flex;height:100%;width:100%;align-items:center;justify-content:center;overflow:hidden;border-radius:inherit;outline-color:transparent;-webkit-user-select:none;user-select:none;padding:var(--ax-comp-button-padding-y) var(--ax-comp-button-padding-x)}ax-button>button .ax-button-text{white-space:nowrap;padding:0 var(--ax-comp-button-text-padding-x);font-weight:500}ax-button:hover:not(ax-button:hover.ax-state-disabled,ax-button:hover.ax-state-loading,ax-button:hover.ax-state-selected){color:rgba(var(--ax-comp-button-hover-text-color));background-color:rgba(var(--ax-comp-button-hover-bg-color));border-color:rgba(var(--ax-comp-button-hover-border-color))}ax-button:active:not(ax-button:active.ax-state-disabled,ax-button:active.ax-state-loading,ax-button:active.ax-state-selected){color:rgba(var(--ax-comp-button-pressed-text-color));background-color:rgba(var(--ax-comp-button-pressed-bg-color));border-color:rgba(var(--ax-comp-button-pressed-border-color))}ax-button.ax-state-disabled,ax-button.ax-state-loading{opacity:.5}ax-button.ax-state-disabled>button,ax-button.ax-state-loading>button{cursor:not-allowed}ax-button.ax-button-icon{height:var(--ax-comp-button-height);width:var(--ax-comp-button-height)}ax-button.ax-state-selected{color:rgba(var(--ax-comp-button-selected-text-color));background-color:rgba(var(--ax-comp-button-selected-bg-color));border-color:rgba(var(--ax-comp-button-selected-border-color))}\n"], dependencies: [{ kind: "directive", type: AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
387
+ ], queries: [{ propertyName: "loadingIcon", first: true, predicate: AXLoadingComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\n [axRipple]\n [disabled]=\"disabled\"\n [attr.tabindex]=\"tabIndex\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n (click)=\"_handleClick($event)\"\n [attr.type]=\"type()\"\n>\n <ng-content select=\"ax-loading, ax-loading-spinner\"> </ng-content>\n\n @if (showIcon()) {\n <ng-content select=\"ax-prefix, ax-icon\"> </ng-content>\n }\n\n <ng-content select=\"ax-content\"> </ng-content>\n\n @if (text && !loadingText() && !iconOnly()) {\n <span class=\"ax-button-text\">{{ text }}</span>\n }\n\n @if (loadingText()) {\n <span class=\"ax-button-text\">{{ loadingText() }}</span>\n }\n\n <ng-content select=\"ax-suffix\"> </ng-content>\n <ng-content select=\"ax-dropdown-panel\"> </ng-content>\n <ng-content select=\".tab-content\"> </ng-content>\n\n <ng-content></ng-content>\n</button>\n", styles: ["ax-button{--ax-comp-button-padding-y: 0;--ax-comp-button-border-radius: var(--ax-sys-border-radius);--ax-comp-button-height: calc(var(--ax-sys-size-base) * var(--ax-comp-button-size-ratio, 1));--ax-comp-button-text-padding-x: .5rem}ax-button ax-prefix{display:flex;padding-inline-start:var(--ax-comp-button-decorator-padding-x)}ax-button ax-suffix{display:flex;padding-inline-end:var(--ax-comp-button-decorator-padding-x)}ax-button.ax-button-icon{--ax-comp-button-decorator-padding-x: 0 !important;font-size:var(--ax-comp-button-icon-only-font-size)}.ax-xs ax-button,ax-button.ax-xs{--ax-comp-button-font-size: .75rem;--ax-comp-button-padding-x: .25rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: .875rem}.ax-sm ax-button,ax-button.ax-sm{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: .5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1rem}.ax-md ax-button,ax-button{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: 1rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: 1.25rem}.ax-lg ax-button,ax-button.ax-lg{--ax-comp-button-font-size: 1.125rem;--ax-comp-button-padding-x: 1.125rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.5rem}.ax-xl ax-button,ax-button.ax-xl{--ax-comp-button-font-size: 1.5rem;--ax-comp-button-padding-x: 1.5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.75rem}ax-button.ax-solid{--ax-comp-button-border-width: 1px}ax-button.ax-solid>button:focus-visible,ax-button.ax-solid>button.ax-state-focus{outline:2px solid;outline-offset:3px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-solid.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-darkest-surface)}ax-button.ax-solid.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-darkest-surface)}ax-button.ax-solid.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-darkest-surface)}ax-button.ax-solid.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-darkest-surface)}ax-button.ax-solid.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-darkest-surface)}ax-button.ax-solid.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-solid.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-darker-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-outline.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-lighter-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-outline.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-outline{--ax-comp-button-border-width: 1px;--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-hover-bg-color: transparent;--ax-comp-button-pressed-bg-color: transparent;--ax-comp-button-focused-bg-color: transparent}ax-button.ax-outline>button:focus-visible,ax-button.ax-outline>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-outline.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-outline.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-outline.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-outline.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-outline.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-twotone.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-darker-surface)}.ax-dark ax-button.ax-twotone.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-lighter-surface)}ax-button.ax-twotone{--ax-comp-button-border-width: 1px}ax-button.ax-twotone>button:focus-visible,ax-button.ax-twotone>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-twotone.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-twotone.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-twotone.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-twotone.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-twotone.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-blank.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-blank.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-darker-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-blank{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-blank>button:focus-visible,ax-button.ax-blank>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-blank.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface)}ax-button.ax-blank.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-blank.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface)}ax-button.ax-blank.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface)}ax-button.ax-blank.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface)}ax-button.ax-link.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-link.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-link{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-link>button:focus-visible,ax-button.ax-link>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-link.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface)}ax-button.ax-link.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface)}ax-button.ax-link.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface)}ax-button.ax-link.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface)}ax-button.ax-link.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface)}ax-button-item.ax-primary{--ax-comp-button-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-primary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-primary-surface)}ax-button-item.ax-secondary{--ax-comp-button-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-secondary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-secondary-surface)}ax-button-item.ax-success{--ax-comp-button-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-success-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-success-surface)}ax-button-item.ax-warning{--ax-comp-button-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-warning-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-warning-surface)}ax-button-item.ax-danger{--ax-comp-button-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-danger-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-danger-surface)}ax-button{position:relative;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;transition-property:background-color,border-color,color,border-width,font-size,height;transition-timing-function:var(--ax-sys-transition-timing-function);transition-duration:var(--ax-sys-transition-duration);color:rgba(var(--ax-comp-button-normal-text-color));background-color:rgba(var(--ax-comp-button-normal-bg-color));border-color:rgba(var(--ax-comp-button-normal-border-color));border-width:var(--ax-comp-button-border-width, 0px);font-family:var(--ax-comp-button-font-family);font-size:var(--ax-comp-button-font-size);font-weight:var(--ax-comp-button-font-weight);border-radius:var(--ax-comp-button-border-radius);height:var(--ax-comp-button-height);line-height:var(--ax-comp-button-height)}ax-button>button{position:relative;display:inline-flex;height:100%;width:100%;align-items:center;justify-content:center;overflow:hidden;border-radius:inherit;outline-color:transparent;-webkit-user-select:none;user-select:none;padding:var(--ax-comp-button-padding-y) var(--ax-comp-button-padding-x)}ax-button>button .ax-button-text{white-space:nowrap;padding:0 var(--ax-comp-button-text-padding-x);font-weight:500}ax-button:hover:not(ax-button:hover.ax-state-disabled,ax-button:hover.ax-state-loading,ax-button:hover.ax-state-selected){color:rgba(var(--ax-comp-button-hover-text-color));background-color:rgba(var(--ax-comp-button-hover-bg-color));border-color:rgba(var(--ax-comp-button-hover-border-color))}ax-button:active:not(ax-button:active.ax-state-disabled,ax-button:active.ax-state-loading,ax-button:active.ax-state-selected){color:rgba(var(--ax-comp-button-pressed-text-color));background-color:rgba(var(--ax-comp-button-pressed-bg-color));border-color:rgba(var(--ax-comp-button-pressed-border-color))}ax-button.ax-state-disabled,ax-button.ax-state-loading{opacity:.5}ax-button.ax-state-disabled>button,ax-button.ax-state-loading>button{cursor:not-allowed}ax-button.ax-button-icon{height:var(--ax-comp-button-height);width:var(--ax-comp-button-height)}ax-button.ax-state-selected{color:rgba(var(--ax-comp-button-selected-text-color));background-color:rgba(var(--ax-comp-button-selected-bg-color));border-color:rgba(var(--ax-comp-button-selected-border-color))}\n"], dependencies: [{ kind: "directive", type: AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
378
388
  }
379
389
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXButtonComponent, decorators: [{
380
390
  type: Component,
381
- args: [{ selector: 'ax-button', inputs: ['disabled', 'size', 'tabIndex', 'color', 'look', 'text', 'toggleable', 'selected'], outputs: ['onBlur', 'onFocus', 'onClick', 'selectedChange', 'toggleableChange', 'lookChange', 'colorChange', 'disabledChange'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
391
+ args: [{ selector: 'ax-button', inputs: ['disabled', 'size', 'tabIndex', 'color', 'look', 'text', 'toggleable', 'selected'], outputs: [
392
+ 'onBlur',
393
+ 'onFocus',
394
+ 'onClick',
395
+ 'selectedChange',
396
+ 'toggleableChange',
397
+ 'lookChange',
398
+ 'colorChange',
399
+ 'disabledChange',
400
+ ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
382
401
  { provide: AXComponent, useExisting: AXButtonComponent },
383
402
  { provide: AXButtonItemComponent, useExisting: AXButtonComponent },
384
403
  { provide: AXFocusableComponent, useExisting: AXButtonComponent },
385
- ], imports: [AXRippleDirective], template: "<button\n [axRipple]\n [disabled]=\"disabled\"\n [attr.tabindex]=\"tabIndex\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n (click)=\"_handleClick($event)\"\n [attr.type]=\"type()\"\n>\n <ng-content select=\"ax-loading, ax-loading-spinner\"> </ng-content>\n <ng-content select=\"ax-prefix, ax-icon\"> </ng-content>\n <ng-content select=\"ax-content\"> </ng-content>\n\n @if (text && !loadingText()) {\n <span class=\"ax-button-text\">{{ text }}</span>\n }\n @if (loadingText()) {\n <span class=\"ax-button-text\">{{ loadingText() }}</span>\n }\n\n <ng-content select=\"ax-suffix\"> </ng-content>\n <ng-content select=\"ax-dropdown-panel\"> </ng-content>\n <ng-content select=\".tab-content\"> </ng-content>\n\n <ng-content></ng-content>\n</button>\n", styles: ["ax-button{--ax-comp-button-padding-y: 0;--ax-comp-button-border-radius: var(--ax-sys-border-radius);--ax-comp-button-height: calc(var(--ax-sys-size-base) * var(--ax-comp-button-size-ratio, 1));--ax-comp-button-text-padding-x: .5rem}ax-button ax-prefix{display:flex;padding-inline-start:var(--ax-comp-button-decorator-padding-x)}ax-button ax-suffix{display:flex;padding-inline-end:var(--ax-comp-button-decorator-padding-x)}ax-button.ax-button-icon{--ax-comp-button-decorator-padding-x: 0 !important;font-size:var(--ax-comp-button-icon-only-font-size)}.ax-xs ax-button,ax-button.ax-xs{--ax-comp-button-font-size: .75rem;--ax-comp-button-padding-x: .25rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: .875rem}.ax-sm ax-button,ax-button.ax-sm{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: .5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1rem}.ax-md ax-button,ax-button{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: 1rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: 1.25rem}.ax-lg ax-button,ax-button.ax-lg{--ax-comp-button-font-size: 1.125rem;--ax-comp-button-padding-x: 1.125rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.5rem}.ax-xl ax-button,ax-button.ax-xl{--ax-comp-button-font-size: 1.5rem;--ax-comp-button-padding-x: 1.5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.75rem}ax-button.ax-solid{--ax-comp-button-border-width: 1px}ax-button.ax-solid>button:focus-visible,ax-button.ax-solid>button.ax-state-focus{outline:2px solid;outline-offset:3px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-solid.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-darkest-surface)}ax-button.ax-solid.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-darkest-surface)}ax-button.ax-solid.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-darkest-surface)}ax-button.ax-solid.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-darkest-surface)}ax-button.ax-solid.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-darkest-surface)}ax-button.ax-solid.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-solid.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-darker-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-outline.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-lighter-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-outline.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-outline{--ax-comp-button-border-width: 1px;--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-hover-bg-color: transparent;--ax-comp-button-pressed-bg-color: transparent;--ax-comp-button-focused-bg-color: transparent}ax-button.ax-outline>button:focus-visible,ax-button.ax-outline>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-outline.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-outline.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-outline.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-outline.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-outline.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-twotone.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-darker-surface)}.ax-dark ax-button.ax-twotone.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-lighter-surface)}ax-button.ax-twotone{--ax-comp-button-border-width: 1px}ax-button.ax-twotone>button:focus-visible,ax-button.ax-twotone>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-twotone.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-twotone.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-twotone.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-twotone.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-twotone.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-blank.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-blank.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-darker-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-blank{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-blank>button:focus-visible,ax-button.ax-blank>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-blank.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface)}ax-button.ax-blank.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-blank.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface)}ax-button.ax-blank.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface)}ax-button.ax-blank.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface)}ax-button.ax-link.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-link.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-link{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-link>button:focus-visible,ax-button.ax-link>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-link.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface)}ax-button.ax-link.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface)}ax-button.ax-link.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface)}ax-button.ax-link.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface)}ax-button.ax-link.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface)}ax-button-item.ax-primary{--ax-comp-button-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-primary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-primary-surface)}ax-button-item.ax-secondary{--ax-comp-button-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-secondary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-secondary-surface)}ax-button-item.ax-success{--ax-comp-button-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-success-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-success-surface)}ax-button-item.ax-warning{--ax-comp-button-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-warning-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-warning-surface)}ax-button-item.ax-danger{--ax-comp-button-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-danger-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-danger-surface)}ax-button{position:relative;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;transition-property:background-color,border-color,color,border-width,font-size,height;transition-timing-function:var(--ax-sys-transition-timing-function);transition-duration:var(--ax-sys-transition-duration);color:rgba(var(--ax-comp-button-normal-text-color));background-color:rgba(var(--ax-comp-button-normal-bg-color));border-color:rgba(var(--ax-comp-button-normal-border-color));border-width:var(--ax-comp-button-border-width, 0px);font-family:var(--ax-comp-button-font-family);font-size:var(--ax-comp-button-font-size);font-weight:var(--ax-comp-button-font-weight);border-radius:var(--ax-comp-button-border-radius);height:var(--ax-comp-button-height);line-height:var(--ax-comp-button-height)}ax-button>button{position:relative;display:inline-flex;height:100%;width:100%;align-items:center;justify-content:center;overflow:hidden;border-radius:inherit;outline-color:transparent;-webkit-user-select:none;user-select:none;padding:var(--ax-comp-button-padding-y) var(--ax-comp-button-padding-x)}ax-button>button .ax-button-text{white-space:nowrap;padding:0 var(--ax-comp-button-text-padding-x);font-weight:500}ax-button:hover:not(ax-button:hover.ax-state-disabled,ax-button:hover.ax-state-loading,ax-button:hover.ax-state-selected){color:rgba(var(--ax-comp-button-hover-text-color));background-color:rgba(var(--ax-comp-button-hover-bg-color));border-color:rgba(var(--ax-comp-button-hover-border-color))}ax-button:active:not(ax-button:active.ax-state-disabled,ax-button:active.ax-state-loading,ax-button:active.ax-state-selected){color:rgba(var(--ax-comp-button-pressed-text-color));background-color:rgba(var(--ax-comp-button-pressed-bg-color));border-color:rgba(var(--ax-comp-button-pressed-border-color))}ax-button.ax-state-disabled,ax-button.ax-state-loading{opacity:.5}ax-button.ax-state-disabled>button,ax-button.ax-state-loading>button{cursor:not-allowed}ax-button.ax-button-icon{height:var(--ax-comp-button-height);width:var(--ax-comp-button-height)}ax-button.ax-state-selected{color:rgba(var(--ax-comp-button-selected-text-color));background-color:rgba(var(--ax-comp-button-selected-bg-color));border-color:rgba(var(--ax-comp-button-selected-border-color))}\n"] }]
404
+ ], imports: [AXRippleDirective], template: "<button\n [axRipple]\n [disabled]=\"disabled\"\n [attr.tabindex]=\"tabIndex\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n (click)=\"_handleClick($event)\"\n [attr.type]=\"type()\"\n>\n <ng-content select=\"ax-loading, ax-loading-spinner\"> </ng-content>\n\n @if (showIcon()) {\n <ng-content select=\"ax-prefix, ax-icon\"> </ng-content>\n }\n\n <ng-content select=\"ax-content\"> </ng-content>\n\n @if (text && !loadingText() && !iconOnly()) {\n <span class=\"ax-button-text\">{{ text }}</span>\n }\n\n @if (loadingText()) {\n <span class=\"ax-button-text\">{{ loadingText() }}</span>\n }\n\n <ng-content select=\"ax-suffix\"> </ng-content>\n <ng-content select=\"ax-dropdown-panel\"> </ng-content>\n <ng-content select=\".tab-content\"> </ng-content>\n\n <ng-content></ng-content>\n</button>\n", styles: ["ax-button{--ax-comp-button-padding-y: 0;--ax-comp-button-border-radius: var(--ax-sys-border-radius);--ax-comp-button-height: calc(var(--ax-sys-size-base) * var(--ax-comp-button-size-ratio, 1));--ax-comp-button-text-padding-x: .5rem}ax-button ax-prefix{display:flex;padding-inline-start:var(--ax-comp-button-decorator-padding-x)}ax-button ax-suffix{display:flex;padding-inline-end:var(--ax-comp-button-decorator-padding-x)}ax-button.ax-button-icon{--ax-comp-button-decorator-padding-x: 0 !important;font-size:var(--ax-comp-button-icon-only-font-size)}.ax-xs ax-button,ax-button.ax-xs{--ax-comp-button-font-size: .75rem;--ax-comp-button-padding-x: .25rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: .875rem}.ax-sm ax-button,ax-button.ax-sm{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: .5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1rem}.ax-md ax-button,ax-button{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: 1rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: 1.25rem}.ax-lg ax-button,ax-button.ax-lg{--ax-comp-button-font-size: 1.125rem;--ax-comp-button-padding-x: 1.125rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.5rem}.ax-xl ax-button,ax-button.ax-xl{--ax-comp-button-font-size: 1.5rem;--ax-comp-button-padding-x: 1.5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.75rem}ax-button.ax-solid{--ax-comp-button-border-width: 1px}ax-button.ax-solid>button:focus-visible,ax-button.ax-solid>button.ax-state-focus{outline:2px solid;outline-offset:3px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-solid.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-darkest-surface)}ax-button.ax-solid.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-darkest-surface)}ax-button.ax-solid.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-darkest-surface)}ax-button.ax-solid.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-darkest-surface)}ax-button.ax-solid.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-darkest-surface)}ax-button.ax-solid.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-solid.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-darker-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-outline.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-lighter-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-outline.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-outline{--ax-comp-button-border-width: 1px;--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-hover-bg-color: transparent;--ax-comp-button-pressed-bg-color: transparent;--ax-comp-button-focused-bg-color: transparent}ax-button.ax-outline>button:focus-visible,ax-button.ax-outline>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-outline.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-outline.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-outline.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-outline.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-outline.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-twotone.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-darker-surface)}.ax-dark ax-button.ax-twotone.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-lighter-surface)}ax-button.ax-twotone{--ax-comp-button-border-width: 1px}ax-button.ax-twotone>button:focus-visible,ax-button.ax-twotone>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-twotone.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-twotone.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-twotone.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-twotone.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-twotone.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-blank.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-blank.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-darker-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-blank{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-blank>button:focus-visible,ax-button.ax-blank>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-blank.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface)}ax-button.ax-blank.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-blank.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface)}ax-button.ax-blank.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface)}ax-button.ax-blank.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface)}ax-button.ax-link.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-link.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-link{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-link>button:focus-visible,ax-button.ax-link>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-link.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface)}ax-button.ax-link.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface)}ax-button.ax-link.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface)}ax-button.ax-link.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface)}ax-button.ax-link.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface)}ax-button-item.ax-primary{--ax-comp-button-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-primary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-primary-surface)}ax-button-item.ax-secondary{--ax-comp-button-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-secondary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-secondary-surface)}ax-button-item.ax-success{--ax-comp-button-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-success-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-success-surface)}ax-button-item.ax-warning{--ax-comp-button-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-warning-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-warning-surface)}ax-button-item.ax-danger{--ax-comp-button-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-danger-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-danger-surface)}ax-button{position:relative;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;transition-property:background-color,border-color,color,border-width,font-size,height;transition-timing-function:var(--ax-sys-transition-timing-function);transition-duration:var(--ax-sys-transition-duration);color:rgba(var(--ax-comp-button-normal-text-color));background-color:rgba(var(--ax-comp-button-normal-bg-color));border-color:rgba(var(--ax-comp-button-normal-border-color));border-width:var(--ax-comp-button-border-width, 0px);font-family:var(--ax-comp-button-font-family);font-size:var(--ax-comp-button-font-size);font-weight:var(--ax-comp-button-font-weight);border-radius:var(--ax-comp-button-border-radius);height:var(--ax-comp-button-height);line-height:var(--ax-comp-button-height)}ax-button>button{position:relative;display:inline-flex;height:100%;width:100%;align-items:center;justify-content:center;overflow:hidden;border-radius:inherit;outline-color:transparent;-webkit-user-select:none;user-select:none;padding:var(--ax-comp-button-padding-y) var(--ax-comp-button-padding-x)}ax-button>button .ax-button-text{white-space:nowrap;padding:0 var(--ax-comp-button-text-padding-x);font-weight:500}ax-button:hover:not(ax-button:hover.ax-state-disabled,ax-button:hover.ax-state-loading,ax-button:hover.ax-state-selected){color:rgba(var(--ax-comp-button-hover-text-color));background-color:rgba(var(--ax-comp-button-hover-bg-color));border-color:rgba(var(--ax-comp-button-hover-border-color))}ax-button:active:not(ax-button:active.ax-state-disabled,ax-button:active.ax-state-loading,ax-button:active.ax-state-selected){color:rgba(var(--ax-comp-button-pressed-text-color));background-color:rgba(var(--ax-comp-button-pressed-bg-color));border-color:rgba(var(--ax-comp-button-pressed-border-color))}ax-button.ax-state-disabled,ax-button.ax-state-loading{opacity:.5}ax-button.ax-state-disabled>button,ax-button.ax-state-loading>button{cursor:not-allowed}ax-button.ax-button-icon{height:var(--ax-comp-button-height);width:var(--ax-comp-button-height)}ax-button.ax-state-selected{color:rgba(var(--ax-comp-button-selected-text-color));background-color:rgba(var(--ax-comp-button-selected-bg-color));border-color:rgba(var(--ax-comp-button-selected-border-color))}\n"] }]
386
405
  }], propDecorators: { __hostClass: [{
387
406
  type: HostBinding,
388
407
  args: ['class']