@acorex/components 20.2.0-next.2 → 20.2.0-next.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/action-sheet/index.d.ts +57 -10
- package/alert/index.d.ts +2 -4
- package/autocomplete/index.d.ts +7 -2
- package/avatar/index.d.ts +12 -6
- package/badge/index.d.ts +1 -2
- package/bottom-navigation/index.d.ts +10 -2
- package/breadcrumbs/index.d.ts +17 -4
- package/button/index.d.ts +56 -17
- package/button-group/index.d.ts +8 -5
- package/calendar/index.d.ts +28 -16
- package/check-box/index.d.ts +2 -5
- package/chips/index.d.ts +1 -2
- package/circular-progress/index.d.ts +23 -18
- package/collapse/index.d.ts +7 -6
- package/color-box/index.d.ts +5 -8
- package/color-palette/index.d.ts +19 -24
- package/comment/index.d.ts +8 -8
- package/conversation/index.d.ts +1 -0
- package/cron-job/index.d.ts +5 -4
- package/data-list/README.md +356 -0
- package/data-list/index.d.ts +102 -0
- package/data-pager/index.d.ts +10 -5
- package/datetime-box/index.d.ts +2 -7
- package/datetime-input/index.d.ts +2 -4
- package/datetime-picker/index.d.ts +9 -10
- package/dropdown/index.d.ts +41 -0
- package/fesm2022/acorex-components-accordion.mjs +10 -10
- package/fesm2022/acorex-components-accordion.mjs.map +1 -1
- package/fesm2022/acorex-components-action-sheet.mjs +78 -48
- package/fesm2022/acorex-components-action-sheet.mjs.map +1 -1
- package/fesm2022/acorex-components-alert.mjs +12 -14
- package/fesm2022/acorex-components-alert.mjs.map +1 -1
- package/fesm2022/acorex-components-audio-wave.mjs +7 -7
- package/fesm2022/acorex-components-audio-wave.mjs.map +1 -1
- package/fesm2022/acorex-components-autocomplete.mjs +32 -10
- package/fesm2022/acorex-components-autocomplete.mjs.map +1 -1
- package/fesm2022/acorex-components-avatar.mjs +23 -18
- package/fesm2022/acorex-components-avatar.mjs.map +1 -1
- package/fesm2022/acorex-components-badge.mjs +9 -10
- package/fesm2022/acorex-components-badge.mjs.map +1 -1
- package/fesm2022/acorex-components-bottom-navigation.mjs +17 -13
- package/fesm2022/acorex-components-bottom-navigation.mjs.map +1 -1
- package/fesm2022/acorex-components-breadcrumbs.mjs +36 -20
- package/fesm2022/acorex-components-breadcrumbs.mjs.map +1 -1
- package/fesm2022/acorex-components-button-group.mjs +31 -22
- package/fesm2022/acorex-components-button-group.mjs.map +1 -1
- package/fesm2022/acorex-components-button.mjs +77 -34
- package/fesm2022/acorex-components-button.mjs.map +1 -1
- package/fesm2022/acorex-components-calendar.mjs +100 -53
- package/fesm2022/acorex-components-calendar.mjs.map +1 -1
- package/fesm2022/acorex-components-check-box.mjs +11 -13
- package/fesm2022/acorex-components-check-box.mjs.map +1 -1
- package/fesm2022/acorex-components-chips.mjs +9 -10
- package/fesm2022/acorex-components-chips.mjs.map +1 -1
- package/fesm2022/acorex-components-circular-progress.mjs +31 -26
- package/fesm2022/acorex-components-circular-progress.mjs.map +1 -1
- package/fesm2022/acorex-components-collapse.mjs +20 -18
- package/fesm2022/acorex-components-collapse.mjs.map +1 -1
- package/fesm2022/acorex-components-color-box.mjs +34 -30
- package/fesm2022/acorex-components-color-box.mjs.map +1 -1
- package/fesm2022/acorex-components-color-palette.mjs +55 -75
- package/fesm2022/acorex-components-color-palette.mjs.map +1 -1
- package/fesm2022/acorex-components-comment.mjs +38 -38
- package/fesm2022/acorex-components-comment.mjs.map +1 -1
- package/fesm2022/acorex-components-conversation.mjs +58 -52
- package/fesm2022/acorex-components-conversation.mjs.map +1 -1
- package/fesm2022/acorex-components-cron-job.mjs +54 -48
- package/fesm2022/acorex-components-cron-job.mjs.map +1 -1
- package/fesm2022/acorex-components-data-list.mjs +386 -0
- package/fesm2022/acorex-components-data-list.mjs.map +1 -0
- package/fesm2022/acorex-components-data-pager.mjs +41 -36
- package/fesm2022/acorex-components-data-pager.mjs.map +1 -1
- package/fesm2022/acorex-components-data-table.mjs +40 -40
- package/fesm2022/acorex-components-data-table.mjs.map +1 -1
- package/fesm2022/acorex-components-datetime-box.mjs +22 -31
- package/fesm2022/acorex-components-datetime-box.mjs.map +1 -1
- package/fesm2022/acorex-components-datetime-input.mjs +17 -14
- package/fesm2022/acorex-components-datetime-input.mjs.map +1 -1
- package/fesm2022/acorex-components-datetime-picker.mjs +98 -45
- package/fesm2022/acorex-components-datetime-picker.mjs.map +1 -1
- package/fesm2022/acorex-components-decorators.mjs +25 -25
- package/fesm2022/acorex-components-decorators.mjs.map +1 -1
- package/fesm2022/acorex-components-dialog.mjs +12 -12
- package/fesm2022/acorex-components-dialog.mjs.map +1 -1
- package/fesm2022/acorex-components-drawer-2.mjs +10 -10
- package/fesm2022/acorex-components-drawer-2.mjs.map +1 -1
- package/fesm2022/acorex-components-drawer.mjs +13 -13
- package/fesm2022/acorex-components-drawer.mjs.map +1 -1
- package/fesm2022/acorex-components-dropdown-button.mjs +9 -9
- package/fesm2022/acorex-components-dropdown-button.mjs.map +1 -1
- package/fesm2022/acorex-components-dropdown.mjs +57 -13
- package/fesm2022/acorex-components-dropdown.mjs.map +1 -1
- package/fesm2022/acorex-components-file-explorer.mjs +25 -25
- package/fesm2022/acorex-components-file-explorer.mjs.map +1 -1
- package/fesm2022/acorex-components-flow-chart.mjs +40 -16
- package/fesm2022/acorex-components-flow-chart.mjs.map +1 -1
- package/fesm2022/acorex-components-form.mjs +26 -17
- package/fesm2022/acorex-components-form.mjs.map +1 -1
- package/fesm2022/acorex-components-grid-layout-builder.mjs +10 -10
- package/fesm2022/acorex-components-grid-layout-builder.mjs.map +1 -1
- package/fesm2022/acorex-components-image-editor.mjs +40 -34
- package/fesm2022/acorex-components-image-editor.mjs.map +1 -1
- package/fesm2022/acorex-components-image.mjs +7 -7
- package/fesm2022/acorex-components-image.mjs.map +1 -1
- package/fesm2022/acorex-components-json-viewer.mjs +8 -8
- package/fesm2022/acorex-components-json-viewer.mjs.map +1 -1
- package/fesm2022/acorex-components-kanban.mjs +11 -7
- package/fesm2022/acorex-components-kanban.mjs.map +1 -1
- package/fesm2022/acorex-components-kbd.mjs +20 -13
- package/fesm2022/acorex-components-kbd.mjs.map +1 -1
- package/fesm2022/acorex-components-label.mjs +9 -9
- package/fesm2022/acorex-components-label.mjs.map +1 -1
- package/fesm2022/acorex-components-list.mjs +27 -19
- package/fesm2022/acorex-components-list.mjs.map +1 -1
- package/fesm2022/acorex-components-loading-dialog.mjs +40 -22
- package/fesm2022/acorex-components-loading-dialog.mjs.map +1 -1
- package/fesm2022/acorex-components-loading.mjs +76 -18
- package/fesm2022/acorex-components-loading.mjs.map +1 -1
- package/fesm2022/acorex-components-map.mjs +534 -115
- package/fesm2022/acorex-components-map.mjs.map +1 -1
- package/fesm2022/acorex-components-media-viewer.mjs +37 -37
- package/fesm2022/acorex-components-media-viewer.mjs.map +1 -1
- package/fesm2022/acorex-components-menu.mjs +48 -22
- package/fesm2022/acorex-components-menu.mjs.map +1 -1
- package/fesm2022/{acorex-components-modal-acorex-components-modal-C4zx7OP6.mjs → acorex-components-modal-acorex-components-modal-yzX5PZMM.mjs} +101 -22
- package/fesm2022/acorex-components-modal-acorex-components-modal-yzX5PZMM.mjs.map +1 -0
- package/fesm2022/{acorex-components-modal-modal-content.component-DfhgA_WL.mjs → acorex-components-modal-modal-content.component-Bt8c43qi.mjs} +5 -5
- package/fesm2022/{acorex-components-modal-modal-content.component-DfhgA_WL.mjs.map → acorex-components-modal-modal-content.component-Bt8c43qi.mjs.map} +1 -1
- package/fesm2022/acorex-components-modal.mjs +1 -1
- package/fesm2022/acorex-components-navbar.mjs +13 -8
- package/fesm2022/acorex-components-navbar.mjs.map +1 -1
- package/fesm2022/acorex-components-notification.mjs +16 -13
- package/fesm2022/acorex-components-notification.mjs.map +1 -1
- package/fesm2022/acorex-components-number-box-2.mjs +13 -7
- package/fesm2022/acorex-components-number-box-2.mjs.map +1 -1
- package/fesm2022/acorex-components-number-box.mjs +16 -10
- package/fesm2022/acorex-components-number-box.mjs.map +1 -1
- package/fesm2022/acorex-components-otp.mjs +9 -9
- package/fesm2022/acorex-components-otp.mjs.map +1 -1
- package/fesm2022/acorex-components-page.mjs +10 -10
- package/fesm2022/acorex-components-page.mjs.map +1 -1
- package/fesm2022/acorex-components-paint.mjs +31 -25
- package/fesm2022/acorex-components-paint.mjs.map +1 -1
- package/fesm2022/acorex-components-password-box.mjs +20 -14
- package/fesm2022/acorex-components-password-box.mjs.map +1 -1
- package/fesm2022/acorex-components-pdf-reader.mjs +7 -7
- package/fesm2022/acorex-components-pdf-reader.mjs.map +1 -1
- package/fesm2022/acorex-components-phone-box.mjs +22 -13
- package/fesm2022/acorex-components-phone-box.mjs.map +1 -1
- package/fesm2022/acorex-components-picker.mjs +26 -16
- package/fesm2022/acorex-components-picker.mjs.map +1 -1
- package/fesm2022/acorex-components-popover.mjs +8 -13
- package/fesm2022/acorex-components-popover.mjs.map +1 -1
- package/fesm2022/acorex-components-popup.mjs +10 -10
- package/fesm2022/acorex-components-popup.mjs.map +1 -1
- package/fesm2022/acorex-components-progress-bar.mjs +8 -8
- package/fesm2022/acorex-components-progress-bar.mjs.map +1 -1
- package/fesm2022/acorex-components-qrcode.mjs +7 -7
- package/fesm2022/acorex-components-qrcode.mjs.map +1 -1
- package/fesm2022/acorex-components-query-builder.mjs +7 -7
- package/fesm2022/acorex-components-query-builder.mjs.map +1 -1
- package/fesm2022/acorex-components-radio.mjs +8 -8
- package/fesm2022/acorex-components-radio.mjs.map +1 -1
- package/fesm2022/acorex-components-rail-navigation.mjs +24 -13
- package/fesm2022/acorex-components-rail-navigation.mjs.map +1 -1
- package/fesm2022/acorex-components-range-slider.mjs +9 -9
- package/fesm2022/acorex-components-range-slider.mjs.map +1 -1
- package/fesm2022/acorex-components-rate-picker.mjs +7 -7
- package/fesm2022/acorex-components-rate-picker.mjs.map +1 -1
- package/fesm2022/acorex-components-rest-api-generator.mjs +22 -22
- package/fesm2022/acorex-components-rest-api-generator.mjs.map +1 -1
- package/fesm2022/acorex-components-result.mjs +7 -7
- package/fesm2022/acorex-components-result.mjs.map +1 -1
- package/fesm2022/acorex-components-routing-progress.mjs +7 -7
- package/fesm2022/acorex-components-routing-progress.mjs.map +1 -1
- package/fesm2022/acorex-components-rrule.mjs +6 -6
- package/fesm2022/acorex-components-rrule.mjs.map +1 -1
- package/fesm2022/acorex-components-scheduler.mjs +173 -85
- package/fesm2022/acorex-components-scheduler.mjs.map +1 -1
- package/fesm2022/acorex-components-scss.mjs +4 -4
- package/fesm2022/acorex-components-scss.mjs.map +1 -1
- package/fesm2022/acorex-components-search-box.mjs +13 -7
- package/fesm2022/acorex-components-search-box.mjs.map +1 -1
- package/fesm2022/acorex-components-select-box.mjs +117 -38
- package/fesm2022/acorex-components-select-box.mjs.map +1 -1
- package/fesm2022/acorex-components-selection-list-2.mjs +12 -9
- package/fesm2022/acorex-components-selection-list-2.mjs.map +1 -1
- package/fesm2022/acorex-components-selection-list.mjs +14 -11
- package/fesm2022/acorex-components-selection-list.mjs.map +1 -1
- package/fesm2022/acorex-components-side-menu.mjs +98 -43
- package/fesm2022/acorex-components-side-menu.mjs.map +1 -1
- package/fesm2022/acorex-components-skeleton.mjs +7 -7
- package/fesm2022/acorex-components-skeleton.mjs.map +1 -1
- package/fesm2022/acorex-components-slider.mjs +9 -9
- package/fesm2022/acorex-components-slider.mjs.map +1 -1
- package/fesm2022/acorex-components-sliding-item.mjs +14 -14
- package/fesm2022/acorex-components-sliding-item.mjs.map +1 -1
- package/fesm2022/acorex-components-step-wizard.mjs +13 -13
- package/fesm2022/acorex-components-step-wizard.mjs.map +1 -1
- package/fesm2022/acorex-components-switch.mjs +12 -12
- package/fesm2022/acorex-components-switch.mjs.map +1 -1
- package/fesm2022/acorex-components-tabs.mjs +20 -18
- package/fesm2022/acorex-components-tabs.mjs.map +1 -1
- package/fesm2022/acorex-components-tag-box.mjs +39 -21
- package/fesm2022/acorex-components-tag-box.mjs.map +1 -1
- package/fesm2022/acorex-components-tag.mjs +8 -8
- package/fesm2022/acorex-components-tag.mjs.map +1 -1
- package/fesm2022/acorex-components-text-area.mjs +16 -10
- package/fesm2022/acorex-components-text-area.mjs.map +1 -1
- package/fesm2022/acorex-components-text-box.mjs +19 -13
- package/fesm2022/acorex-components-text-box.mjs.map +1 -1
- package/fesm2022/acorex-components-time-duration.mjs +41 -65
- package/fesm2022/acorex-components-time-duration.mjs.map +1 -1
- package/fesm2022/acorex-components-time-line.mjs +10 -10
- package/fesm2022/acorex-components-time-line.mjs.map +1 -1
- package/fesm2022/acorex-components-toast.mjs +12 -12
- package/fesm2022/acorex-components-toast.mjs.map +1 -1
- package/fesm2022/acorex-components-toolbar.mjs +7 -7
- package/fesm2022/acorex-components-toolbar.mjs.map +1 -1
- package/fesm2022/acorex-components-tooltip.mjs +14 -13
- package/fesm2022/acorex-components-tooltip.mjs.map +1 -1
- package/fesm2022/acorex-components-tree-view.mjs +11 -11
- package/fesm2022/acorex-components-tree-view.mjs.map +1 -1
- package/fesm2022/acorex-components-uploader.mjs +22 -22
- package/fesm2022/acorex-components-uploader.mjs.map +1 -1
- package/fesm2022/acorex-components-video-player.mjs +7 -7
- package/fesm2022/acorex-components-video-player.mjs.map +1 -1
- package/fesm2022/acorex-components-wysiwyg.mjs +65 -61
- package/fesm2022/acorex-components-wysiwyg.mjs.map +1 -1
- package/flow-chart/index.d.ts +24 -0
- package/form/index.d.ts +4 -0
- package/image-editor/index.d.ts +1 -0
- package/json-viewer/index.d.ts +3 -3
- package/kanban/index.d.ts +7 -3
- package/kbd/index.d.ts +10 -3
- package/list/index.d.ts +14 -7
- package/loading/index.d.ts +58 -1
- package/loading-dialog/index.d.ts +29 -11
- package/map/index.d.ts +119 -6
- package/menu/index.d.ts +19 -0
- package/modal/index.d.ts +43 -0
- package/navbar/index.d.ts +6 -1
- package/number-box/index.d.ts +1 -0
- package/number-box-2/index.d.ts +1 -0
- package/package.json +14 -6
- package/paint/index.d.ts +2 -1
- package/password-box/index.d.ts +7 -6
- package/phone-box/index.d.ts +11 -8
- package/picker/index.d.ts +10 -8
- package/popover/index.d.ts +1 -1
- package/radio/index.d.ts +1 -1
- package/rail-navigation/index.d.ts +11 -0
- package/rate-picker/index.d.ts +1 -1
- package/scheduler/index.d.ts +186 -98
- package/search-box/index.d.ts +1 -0
- package/select-box/index.d.ts +32 -8
- package/side-menu/index.d.ts +16 -7
- package/tag-box/index.d.ts +3 -2
- package/text-area/index.d.ts +1 -0
- package/text-box/index.d.ts +1 -0
- package/time-duration/index.d.ts +3 -1
- package/tooltip/index.d.ts +3 -2
- package/wysiwyg/index.d.ts +1 -5
- package/fesm2022/acorex-components-modal-acorex-components-modal-C4zx7OP6.mjs.map +0 -1
@@ -1,5 +1,5 @@
|
|
1
|
-
import { MXInteractiveComponent, MXColorComponent, AXComponent, AXClosableComponent, MXButtonBaseComponent, AXRippleDirective, AXFocusableComponent
|
2
|
-
import { AXDecoratorGenericComponent, AXDecoratorIconComponent
|
1
|
+
import { MXInteractiveComponent, MXColorComponent, AXComponent, AXClosableComponent, MXButtonBaseComponent, AXRippleDirective, AXFocusableComponent } from '@acorex/cdk/common';
|
2
|
+
import { AXDecoratorGenericComponent, AXDecoratorIconComponent } from '@acorex/components/decorators';
|
3
3
|
import * as i0 from '@angular/core';
|
4
4
|
import { EventEmitter, HostBinding, HostListener, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, input, afterNextRender, ContentChildren, computed, contentChild, model, NgModule } from '@angular/core';
|
5
5
|
import * as i2 from '@acorex/core/translation';
|
@@ -7,7 +7,7 @@ import { AXTranslationModule } from '@acorex/core/translation';
|
|
7
7
|
import * as i1 from '@angular/common';
|
8
8
|
import { CommonModule } from '@angular/common';
|
9
9
|
import { classes } from 'polytype';
|
10
|
-
import { AXLoadingComponent
|
10
|
+
import { AXLoadingComponent } from '@acorex/components/loading';
|
11
11
|
|
12
12
|
/**
|
13
13
|
* Represents a button item with optional content like icons, text, and dropdowns.
|
@@ -29,7 +29,9 @@ class AXButtonItemComponent extends classes(MXInteractiveComponent, MXColorCompo
|
|
29
29
|
*/
|
30
30
|
this.onClick = new EventEmitter();
|
31
31
|
/**
|
32
|
-
*
|
32
|
+
* Sets the tabindex attribute for keyboard navigation.
|
33
|
+
*
|
34
|
+
* @ignore
|
33
35
|
*/
|
34
36
|
this.tabindex = '0';
|
35
37
|
}
|
@@ -47,7 +49,11 @@ class AXButtonItemComponent extends classes(MXInteractiveComponent, MXColorCompo
|
|
47
49
|
this.cdr.markForCheck();
|
48
50
|
}
|
49
51
|
/**
|
50
|
-
*
|
52
|
+
* Handles click events on the button item host element.
|
53
|
+
* Emits the onClick event if the component is not disabled.
|
54
|
+
*
|
55
|
+
* @param e - The mouse event that triggered the click.
|
56
|
+
* @ignore
|
51
57
|
*/
|
52
58
|
__hostClick(e) {
|
53
59
|
if (!this.disabled) {
|
@@ -59,19 +65,31 @@ class AXButtonItemComponent extends classes(MXInteractiveComponent, MXColorCompo
|
|
59
65
|
}
|
60
66
|
}
|
61
67
|
/**
|
62
|
-
*
|
68
|
+
* Handles focus events on the button item host element.
|
69
|
+
* Emits the onFocus event.
|
70
|
+
*
|
71
|
+
* @param e - The focus event that was triggered.
|
72
|
+
* @ignore
|
63
73
|
*/
|
64
74
|
__hostFocus(e) {
|
65
75
|
this.emitOnFocusEvent(e);
|
66
76
|
}
|
67
77
|
/**
|
68
|
-
*
|
78
|
+
* Handles blur events on the button item host element.
|
79
|
+
* Emits the onBlur event.
|
80
|
+
*
|
81
|
+
* @param e - The blur event that was triggered.
|
82
|
+
* @ignore
|
69
83
|
*/
|
70
84
|
__hostBlur(e) {
|
71
85
|
this.emitOnBlurEvent(e);
|
72
86
|
}
|
73
87
|
/**
|
74
|
-
*
|
88
|
+
* Generates the CSS classes for the button item host element.
|
89
|
+
* Includes classes for icon-only state, disabled state, selected state, divided state, and color.
|
90
|
+
*
|
91
|
+
* @returns string - The space-separated CSS class names.
|
92
|
+
* @ignore
|
75
93
|
*/
|
76
94
|
get __hostClass() {
|
77
95
|
const cssClasses = {
|
@@ -87,8 +105,8 @@ class AXButtonItemComponent extends classes(MXInteractiveComponent, MXColorCompo
|
|
87
105
|
.map((c) => c[0])
|
88
106
|
.join(' ');
|
89
107
|
}
|
90
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.
|
91
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.
|
108
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXButtonItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
109
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXButtonItemComponent, isStandalone: true, selector: "ax-button-item", inputs: { color: "color", disabled: "disabled", text: "text", selected: "selected", divided: "divided", data: "data", name: "name" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur", disabledChange: "disabledChange" }, host: { listeners: { "click": "__hostClick($event)", "focus": "__hostFocus($event)", "blur": "__hostBlur($event)" }, properties: { "class": "this.__hostClass", "attr.tabindex": "this.tabindex" } }, providers: [{ provide: AXComponent, useExisting: AXButtonItemComponent }], usesInheritance: true, ngImport: i0, template: `
|
92
110
|
<div class="ax-action-item-prefix">
|
93
111
|
<ng-content select="ax-prefix"> </ng-content>
|
94
112
|
<ng-content select="ax-loading"> </ng-content>
|
@@ -101,9 +119,9 @@ class AXButtonItemComponent extends classes(MXInteractiveComponent, MXColorCompo
|
|
101
119
|
<ng-content select="ax-suffix"> </ng-content>
|
102
120
|
</div>
|
103
121
|
<ng-content select="ax-dropdown-panel"> </ng-content>
|
104
|
-
`, isInline: true, 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-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-darkest-surface)}ax-button.ax-solid.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-darkest-surface)}ax-button.ax-solid.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-darkest-surface)}ax-button.ax-solid.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-darkest-surface)}ax-button.ax-solid.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-darkest-surface)}ax-button.ax-solid.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accnt6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-darkest-surface)}ax-button.ax-solid.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-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-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-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-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-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-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-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-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-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-outline.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-outline.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-outline.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-outline.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-outline.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-outline.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-outline.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-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-twotone.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-twotone.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-twotone.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-twotone.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-twotone.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-twotone.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accnt6-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accnt6-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-twotone.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-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-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-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-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-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-blank.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-blank.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-blank.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-blank.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-blank.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-blank.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-blank.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-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.ax-link.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface)}ax-button.ax-link.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface)}ax-button.ax-link.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface)}ax-button.ax-link.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface)}ax-button.ax-link.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface)}ax-button.ax-link.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface)}ax-button.ax-link.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-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-item.ax-accent1{--ax-comp-button-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent1-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent1-surface)}ax-button-item.ax-accent2{--ax-comp-button-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent2-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent2-surface)}ax-button-item.ax-accent3{--ax-comp-button-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent3-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent3-surface)}ax-button-item.ax-accent4{--ax-comp-button-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent4-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent4-surface)}ax-button-item.ax-accent5{--ax-comp-button-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent5-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent5-surface)}ax-button-item.ax-accnt6{--ax-comp-button-item-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accnt6-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accnt6-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accnt6-surface)}ax-button-item.ax-accent7{--ax-comp-button-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent7-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent7-surface)}ax-button-item{background-color:rgba(var(--ax-comp-button-item-bg-color));color:rgba(var(--ax-comp-button-item-text-color))}ax-button-item.ax-state-selected{background-color:rgba(var(--ax-comp-button-item-selected-bg-color, var(--ax-sys-color-surface)));color:rgba(var(--ax-comp-button-item-selected-text-color))}ax-button-item:hover:not(.ax-state-selected){background-color:rgba(var(--ax-comp-button-item-hover-bg-color, var(--ax-sys-color-surface)))!important;color:rgba(var(--ax-comp-button-item-hover-text-color))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
122
|
+
`, isInline: true, 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-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-darkest-surface)}ax-button.ax-solid.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-darkest-surface)}ax-button.ax-solid.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-darkest-surface)}ax-button.ax-solid.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-darkest-surface)}ax-button.ax-solid.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-darkest-surface)}ax-button.ax-solid.ax-accent6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent6-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent6-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent6-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent6-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent6-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent6-darkest-surface)}ax-button.ax-solid.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-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-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-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-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-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-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-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-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-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-outline.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-outline.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-outline.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-outline.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-outline.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-outline.ax-accent6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent6-surface)}ax-button.ax-outline.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-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-twotone.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-twotone.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-twotone.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-twotone.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-twotone.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-twotone.ax-accent6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent6-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent6-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent6-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent6-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent6-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent6-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent6-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent6-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent6-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent6-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent6-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent6-surface)}ax-button.ax-twotone.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-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-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-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-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-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-blank.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-blank.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-blank.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-blank.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-blank.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-blank.ax-accent6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent6-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent6-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent6-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent6-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent6-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent6-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent6-surface)}ax-button.ax-blank.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-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.ax-link.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface)}ax-button.ax-link.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface)}ax-button.ax-link.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface)}ax-button.ax-link.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface)}ax-button.ax-link.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface)}ax-button.ax-link.ax-accent6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent6-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent6-surface)}ax-button.ax-link.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-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-item.ax-accent1{--ax-comp-button-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent1-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent1-surface)}ax-button-item.ax-accent2{--ax-comp-button-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent2-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent2-surface)}ax-button-item.ax-accent3{--ax-comp-button-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent3-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent3-surface)}ax-button-item.ax-accent4{--ax-comp-button-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent4-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent4-surface)}ax-button-item.ax-accent5{--ax-comp-button-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent5-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent5-surface)}ax-button-item.ax-accent6{--ax-comp-button-item-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent6-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent6-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent6-surface)}ax-button-item.ax-accent7{--ax-comp-button-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent7-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent7-surface)}ax-button-item{background-color:rgba(var(--ax-comp-button-item-bg-color));color:rgba(var(--ax-comp-button-item-text-color))}ax-button-item.ax-state-selected{background-color:rgba(var(--ax-comp-button-item-selected-bg-color, var(--ax-sys-color-surface)));color:rgba(var(--ax-comp-button-item-selected-text-color))}ax-button-item:hover:not(.ax-state-selected){background-color:rgba(var(--ax-comp-button-item-hover-bg-color, var(--ax-sys-color-surface)))!important;color:rgba(var(--ax-comp-button-item-hover-text-color))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
105
123
|
}
|
106
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.
|
124
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXButtonItemComponent, decorators: [{
|
107
125
|
type: Component,
|
108
126
|
args: [{ selector: 'ax-button-item', template: `
|
109
127
|
<div class="ax-action-item-prefix">
|
@@ -118,7 +136,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
118
136
|
<ng-content select="ax-suffix"> </ng-content>
|
119
137
|
</div>
|
120
138
|
<ng-content select="ax-dropdown-panel"> </ng-content>
|
121
|
-
`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['color', 'disabled'], outputs: ['onClick', 'onFocus', 'onBlur', 'disabledChange'], imports: [CommonModule, AXDecoratorGenericComponent, AXTranslationModule], providers: [{ provide: AXComponent, useExisting: AXButtonItemComponent }], 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-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-darkest-surface)}ax-button.ax-solid.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-darkest-surface)}ax-button.ax-solid.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-darkest-surface)}ax-button.ax-solid.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-darkest-surface)}ax-button.ax-solid.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-darkest-surface)}ax-button.ax-solid.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accnt6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-darkest-surface)}ax-button.ax-solid.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-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-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-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-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-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-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-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-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-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-outline.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-outline.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-outline.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-outline.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-outline.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-outline.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-outline.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-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-twotone.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-twotone.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-twotone.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-twotone.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-twotone.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-twotone.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accnt6-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accnt6-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-twotone.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-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-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-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-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-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-blank.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-blank.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-blank.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-blank.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-blank.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-blank.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-blank.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-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.ax-link.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface)}ax-button.ax-link.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface)}ax-button.ax-link.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface)}ax-button.ax-link.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface)}ax-button.ax-link.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface)}ax-button.ax-link.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface)}ax-button.ax-link.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-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-item.ax-accent1{--ax-comp-button-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent1-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent1-surface)}ax-button-item.ax-accent2{--ax-comp-button-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent2-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent2-surface)}ax-button-item.ax-accent3{--ax-comp-button-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent3-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent3-surface)}ax-button-item.ax-accent4{--ax-comp-button-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent4-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent4-surface)}ax-button-item.ax-accent5{--ax-comp-button-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent5-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent5-surface)}ax-button-item.ax-accnt6{--ax-comp-button-item-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accnt6-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accnt6-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accnt6-surface)}ax-button-item.ax-accent7{--ax-comp-button-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent7-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent7-surface)}ax-button-item{background-color:rgba(var(--ax-comp-button-item-bg-color));color:rgba(var(--ax-comp-button-item-text-color))}ax-button-item.ax-state-selected{background-color:rgba(var(--ax-comp-button-item-selected-bg-color, var(--ax-sys-color-surface)));color:rgba(var(--ax-comp-button-item-selected-text-color))}ax-button-item:hover:not(.ax-state-selected){background-color:rgba(var(--ax-comp-button-item-hover-bg-color, var(--ax-sys-color-surface)))!important;color:rgba(var(--ax-comp-button-item-hover-text-color))}\n"] }]
|
139
|
+
`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['color', 'disabled'], outputs: ['onClick', 'onFocus', 'onBlur', 'disabledChange'], imports: [CommonModule, AXDecoratorGenericComponent, AXTranslationModule], providers: [{ provide: AXComponent, useExisting: AXButtonItemComponent }], 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-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-darkest-surface)}ax-button.ax-solid.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-darkest-surface)}ax-button.ax-solid.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-darkest-surface)}ax-button.ax-solid.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-darkest-surface)}ax-button.ax-solid.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-darkest-surface)}ax-button.ax-solid.ax-accent6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent6-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent6-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent6-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent6-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent6-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent6-darkest-surface)}ax-button.ax-solid.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-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-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-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-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-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-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-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-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-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-outline.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-outline.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-outline.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-outline.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-outline.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-outline.ax-accent6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent6-surface)}ax-button.ax-outline.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-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-twotone.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-twotone.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-twotone.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-twotone.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-twotone.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-twotone.ax-accent6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent6-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent6-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent6-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent6-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent6-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent6-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent6-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent6-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent6-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent6-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent6-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent6-surface)}ax-button.ax-twotone.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-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-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-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-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-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-blank.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-blank.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-blank.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-blank.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-blank.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-blank.ax-accent6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent6-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent6-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent6-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent6-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent6-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent6-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent6-surface)}ax-button.ax-blank.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-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.ax-link.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface)}ax-button.ax-link.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface)}ax-button.ax-link.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface)}ax-button.ax-link.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface)}ax-button.ax-link.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface)}ax-button.ax-link.ax-accent6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent6-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent6-surface)}ax-button.ax-link.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-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-item.ax-accent1{--ax-comp-button-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent1-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent1-surface)}ax-button-item.ax-accent2{--ax-comp-button-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent2-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent2-surface)}ax-button-item.ax-accent3{--ax-comp-button-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent3-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent3-surface)}ax-button-item.ax-accent4{--ax-comp-button-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent4-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent4-surface)}ax-button-item.ax-accent5{--ax-comp-button-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent5-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent5-surface)}ax-button-item.ax-accent6{--ax-comp-button-item-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent6-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent6-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent6-surface)}ax-button-item.ax-accent7{--ax-comp-button-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent7-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent7-surface)}ax-button-item{background-color:rgba(var(--ax-comp-button-item-bg-color));color:rgba(var(--ax-comp-button-item-text-color))}ax-button-item.ax-state-selected{background-color:rgba(var(--ax-comp-button-item-selected-bg-color, var(--ax-sys-color-surface)));color:rgba(var(--ax-comp-button-item-selected-text-color))}ax-button-item:hover:not(.ax-state-selected){background-color:rgba(var(--ax-comp-button-item-hover-bg-color, var(--ax-sys-color-surface)))!important;color:rgba(var(--ax-comp-button-item-hover-text-color))}\n"] }]
|
122
140
|
}], propDecorators: { text: [{
|
123
141
|
type: Input
|
124
142
|
}], selected: [{
|
@@ -155,7 +173,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
155
173
|
*/
|
156
174
|
class AXButtonItemListComponent extends MXInteractiveComponent {
|
157
175
|
/**
|
158
|
-
*
|
176
|
+
* Initializes the button item list component.
|
177
|
+
* Sets up content change detection and initializes content after the next render.
|
178
|
+
*
|
179
|
+
* @ignore
|
159
180
|
*/
|
160
181
|
constructor() {
|
161
182
|
super();
|
@@ -181,7 +202,10 @@ class AXButtonItemListComponent extends MXInteractiveComponent {
|
|
181
202
|
});
|
182
203
|
}
|
183
204
|
/**
|
184
|
-
*
|
205
|
+
* Initializes the content of the button item list.
|
206
|
+
* Binds events and properties to content button items and marks for change detection.
|
207
|
+
*
|
208
|
+
* @ignore
|
185
209
|
*/
|
186
210
|
_initContents() {
|
187
211
|
this._bindEvents();
|
@@ -189,7 +213,10 @@ class AXButtonItemListComponent extends MXInteractiveComponent {
|
|
189
213
|
this.cdr.markForCheck();
|
190
214
|
}
|
191
215
|
/**
|
192
|
-
*
|
216
|
+
* Binds click events to content button items.
|
217
|
+
* Subscribes to onClick events of child button items if not already subscribed.
|
218
|
+
*
|
219
|
+
* @ignore
|
193
220
|
*/
|
194
221
|
_bindEvents() {
|
195
222
|
this._contentButtons?.forEach((b) => {
|
@@ -200,7 +227,10 @@ class AXButtonItemListComponent extends MXInteractiveComponent {
|
|
200
227
|
});
|
201
228
|
}
|
202
229
|
/**
|
203
|
-
*
|
230
|
+
* Binds properties to content button items.
|
231
|
+
* Sets the disabled state of child button items based on the parent's disabled state.
|
232
|
+
*
|
233
|
+
* @ignore
|
204
234
|
*/
|
205
235
|
_bindProps() {
|
206
236
|
this._contentButtons?.forEach((b) => {
|
@@ -208,14 +238,22 @@ class AXButtonItemListComponent extends MXInteractiveComponent {
|
|
208
238
|
});
|
209
239
|
}
|
210
240
|
/**
|
211
|
-
*
|
241
|
+
* Handles click events from button items.
|
242
|
+
* Closes the parent component if available and emits the item click event.
|
243
|
+
*
|
244
|
+
* @param e - The click event from the button item.
|
245
|
+
* @ignore
|
212
246
|
*/
|
213
247
|
_handleOnItemClick(e) {
|
214
248
|
this.parent?.close();
|
215
249
|
this._emitOnItemClickEvent(e, e.component);
|
216
250
|
}
|
217
251
|
/**
|
218
|
-
*
|
252
|
+
* Emits the onItemClick event with details about the clicked item.
|
253
|
+
*
|
254
|
+
* @param e - The click event from the button item.
|
255
|
+
* @param item - The button item component that was clicked.
|
256
|
+
* @ignore
|
219
257
|
*/
|
220
258
|
_emitOnItemClickEvent(e, item) {
|
221
259
|
this.onItemClick.emit({
|
@@ -228,19 +266,24 @@ class AXButtonItemListComponent extends MXInteractiveComponent {
|
|
228
266
|
});
|
229
267
|
}
|
230
268
|
/**
|
231
|
-
*
|
269
|
+
* Generates the CSS classes for the button item list host element.
|
270
|
+
* Includes classes for action list and vertical layout.
|
271
|
+
*
|
272
|
+
* @returns string - The space-separated CSS class names.
|
273
|
+
* @ignore
|
232
274
|
*/
|
233
275
|
get __hostClass() {
|
234
276
|
return `ax-action-list ax-action-list-vertical`;
|
235
277
|
}
|
236
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.
|
237
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.
|
278
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXButtonItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
279
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXButtonItemListComponent, isStandalone: true, selector: "ax-button-item-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onItemClick: "onItemClick" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXButtonItemListComponent }], queries: [{ propertyName: "_contentButtons", predicate: AXButtonItemComponent }], usesInheritance: true, ngImport: i0, template: `
|
238
280
|
@for (item of items(); track item.name) {
|
239
281
|
<ax-button-item
|
240
282
|
[text]="item.text"
|
241
283
|
[name]="item.name"
|
242
284
|
[disabled]="item.disabled"
|
243
285
|
[color]="item.color"
|
286
|
+
[selected]="item.selected"
|
244
287
|
(onClick)="_handleOnItemClick($event)"
|
245
288
|
>
|
246
289
|
@if (item.icon) {
|
@@ -256,7 +299,7 @@ class AXButtonItemListComponent extends MXInteractiveComponent {
|
|
256
299
|
<ng-content></ng-content>
|
257
300
|
`, isInline: true, styles: ["ax-button-item-list.ax-action-list{padding-block:var(--ax-comp-button-item-list-padding-block, .25rem)}\n"], dependencies: [{ kind: "component", type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
258
301
|
}
|
259
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.
|
302
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXButtonItemListComponent, decorators: [{
|
260
303
|
type: Component,
|
261
304
|
args: [{ selector: 'ax-button-item-list', template: `
|
262
305
|
@for (item of items(); track item.name) {
|
@@ -265,6 +308,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
265
308
|
[name]="item.name"
|
266
309
|
[disabled]="item.disabled"
|
267
310
|
[color]="item.color"
|
311
|
+
[selected]="item.selected"
|
268
312
|
(onClick)="_handleOnItemClick($event)"
|
269
313
|
>
|
270
314
|
@if (item.icon) {
|
@@ -388,14 +432,14 @@ class AXButtonComponent extends MXButtonBaseComponent {
|
|
388
432
|
blur() {
|
389
433
|
this.getButton().classList.remove('ax-state-focus');
|
390
434
|
}
|
391
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.
|
392
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.
|
435
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
436
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", 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: [
|
393
437
|
{ provide: AXComponent, useExisting: AXButtonComponent },
|
394
438
|
{ provide: AXButtonItemComponent, useExisting: AXButtonComponent },
|
395
439
|
{ provide: AXFocusableComponent, useExisting: AXButtonComponent },
|
396
|
-
], 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 | translate | async }}</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-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-darkest-surface)}ax-button.ax-solid.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-darkest-surface)}ax-button.ax-solid.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-darkest-surface)}ax-button.ax-solid.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-darkest-surface)}ax-button.ax-solid.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-darkest-surface)}ax-button.ax-solid.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accnt6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-darkest-surface)}ax-button.ax-solid.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-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-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-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-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-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-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-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-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-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-outline.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-outline.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-outline.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-outline.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-outline.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-outline.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-outline.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-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-twotone.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-twotone.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-twotone.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-twotone.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-twotone.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-twotone.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accnt6-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accnt6-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-twotone.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-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-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-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-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-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-blank.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-blank.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-blank.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-blank.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-blank.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-blank.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-blank.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-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.ax-link.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface)}ax-button.ax-link.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface)}ax-button.ax-link.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface)}ax-button.ax-link.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface)}ax-button.ax-link.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface)}ax-button.ax-link.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface)}ax-button.ax-link.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-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-item.ax-accent1{--ax-comp-button-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent1-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent1-surface)}ax-button-item.ax-accent2{--ax-comp-button-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent2-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent2-surface)}ax-button-item.ax-accent3{--ax-comp-button-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent3-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent3-surface)}ax-button-item.ax-accent4{--ax-comp-button-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent4-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent4-surface)}ax-button-item.ax-accent5{--ax-comp-button-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent5-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent5-surface)}ax-button-item.ax-accnt6{--ax-comp-button-item-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accnt6-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accnt6-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accnt6-surface)}ax-button-item.ax-accent7{--ax-comp-button-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent7-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent7-surface)}ax-button{position:relative;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;transition-property:background-color,border-color,color;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"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
440
|
+
], 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 | translate | async }}</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-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-darkest-surface)}ax-button.ax-solid.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-darkest-surface)}ax-button.ax-solid.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-darkest-surface)}ax-button.ax-solid.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-darkest-surface)}ax-button.ax-solid.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-darkest-surface)}ax-button.ax-solid.ax-accent6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent6-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent6-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent6-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent6-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent6-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent6-darkest-surface)}ax-button.ax-solid.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-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-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-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-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-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-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-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-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-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-outline.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-outline.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-outline.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-outline.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-outline.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-outline.ax-accent6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent6-surface)}ax-button.ax-outline.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-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-twotone.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-twotone.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-twotone.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-twotone.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-twotone.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-twotone.ax-accent6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent6-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent6-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent6-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent6-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent6-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent6-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent6-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent6-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent6-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent6-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent6-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent6-surface)}ax-button.ax-twotone.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-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-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-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-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-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-blank.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-blank.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-blank.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-blank.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-blank.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-blank.ax-accent6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent6-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent6-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent6-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent6-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent6-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent6-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent6-surface)}ax-button.ax-blank.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-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.ax-link.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface)}ax-button.ax-link.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface)}ax-button.ax-link.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface)}ax-button.ax-link.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface)}ax-button.ax-link.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface)}ax-button.ax-link.ax-accent6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent6-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent6-surface)}ax-button.ax-link.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-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-item.ax-accent1{--ax-comp-button-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent1-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent1-surface)}ax-button-item.ax-accent2{--ax-comp-button-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent2-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent2-surface)}ax-button-item.ax-accent3{--ax-comp-button-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent3-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent3-surface)}ax-button-item.ax-accent4{--ax-comp-button-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent4-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent4-surface)}ax-button-item.ax-accent5{--ax-comp-button-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent5-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent5-surface)}ax-button-item.ax-accent6{--ax-comp-button-item-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent6-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent6-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent6-surface)}ax-button-item.ax-accent7{--ax-comp-button-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent7-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent7-surface)}ax-button{position:relative;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;transition-property:background-color,border-color,color;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"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
397
441
|
}
|
398
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.
|
442
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXButtonComponent, decorators: [{
|
399
443
|
type: Component,
|
400
444
|
args: [{ selector: 'ax-button', inputs: ['disabled', 'size', 'tabIndex', 'color', 'look', 'text', 'toggleable', 'selected'], outputs: [
|
401
445
|
'onBlur',
|
@@ -410,23 +454,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
410
454
|
{ provide: AXComponent, useExisting: AXButtonComponent },
|
411
455
|
{ provide: AXButtonItemComponent, useExisting: AXButtonComponent },
|
412
456
|
{ provide: AXFocusableComponent, useExisting: AXButtonComponent },
|
413
|
-
], imports: [AXRippleDirective, AXTranslationModule, CommonModule], 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 | translate | async }}</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-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-darkest-surface)}ax-button.ax-solid.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-darkest-surface)}ax-button.ax-solid.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-darkest-surface)}ax-button.ax-solid.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-darkest-surface)}ax-button.ax-solid.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-darkest-surface)}ax-button.ax-solid.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accnt6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-darkest-surface)}ax-button.ax-solid.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-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-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-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-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-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-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-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-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-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-outline.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-outline.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-outline.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-outline.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-outline.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-outline.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-outline.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-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-twotone.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-twotone.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-twotone.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-twotone.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-twotone.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-twotone.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accnt6-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accnt6-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-twotone.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-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-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-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-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-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-blank.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-blank.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-blank.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-blank.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-blank.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-blank.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-blank.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-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.ax-link.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface)}ax-button.ax-link.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface)}ax-button.ax-link.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface)}ax-button.ax-link.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface)}ax-button.ax-link.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface)}ax-button.ax-link.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface)}ax-button.ax-link.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-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-item.ax-accent1{--ax-comp-button-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent1-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent1-surface)}ax-button-item.ax-accent2{--ax-comp-button-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent2-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent2-surface)}ax-button-item.ax-accent3{--ax-comp-button-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent3-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent3-surface)}ax-button-item.ax-accent4{--ax-comp-button-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent4-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent4-surface)}ax-button-item.ax-accent5{--ax-comp-button-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent5-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent5-surface)}ax-button-item.ax-accnt6{--ax-comp-button-item-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accnt6-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accnt6-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accnt6-surface)}ax-button-item.ax-accent7{--ax-comp-button-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent7-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent7-surface)}ax-button{position:relative;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;transition-property:background-color,border-color,color;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"] }]
|
457
|
+
], imports: [AXRippleDirective, AXTranslationModule, CommonModule], 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 | translate | async }}</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-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-darkest-surface)}ax-button.ax-solid.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-darkest-surface)}ax-button.ax-solid.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-darkest-surface)}ax-button.ax-solid.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-darkest-surface)}ax-button.ax-solid.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-darkest-surface)}ax-button.ax-solid.ax-accent6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent6-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent6-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent6-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent6-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent6-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent6-darkest-surface)}ax-button.ax-solid.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-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-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-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-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-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-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-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-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-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-outline.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-outline.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-outline.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-outline.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-outline.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-outline.ax-accent6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent6-surface)}ax-button.ax-outline.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-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-twotone.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-twotone.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-twotone.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-twotone.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-twotone.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-twotone.ax-accent6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent6-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent6-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent6-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent6-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent6-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent6-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent6-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent6-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent6-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent6-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent6-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent6-surface)}ax-button.ax-twotone.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-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-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-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-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-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-blank.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-blank.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-blank.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-blank.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-blank.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-blank.ax-accent6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent6-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent6-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent6-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent6-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent6-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent6-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent6-surface)}ax-button.ax-blank.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-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.ax-link.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface)}ax-button.ax-link.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface)}ax-button.ax-link.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface)}ax-button.ax-link.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface)}ax-button.ax-link.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface)}ax-button.ax-link.ax-accent6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent6-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent6-surface)}ax-button.ax-link.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-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-item.ax-accent1{--ax-comp-button-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent1-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent1-surface)}ax-button-item.ax-accent2{--ax-comp-button-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent2-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent2-surface)}ax-button-item.ax-accent3{--ax-comp-button-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent3-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent3-surface)}ax-button-item.ax-accent4{--ax-comp-button-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent4-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent4-surface)}ax-button-item.ax-accent5{--ax-comp-button-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent5-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent5-surface)}ax-button-item.ax-accent6{--ax-comp-button-item-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent6-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent6-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent6-surface)}ax-button-item.ax-accent7{--ax-comp-button-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent7-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent7-surface)}ax-button{position:relative;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;transition-property:background-color,border-color,color;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"] }]
|
414
458
|
}], propDecorators: { __hostClass: [{
|
415
459
|
type: HostBinding,
|
416
460
|
args: ['class']
|
417
461
|
}] } });
|
418
462
|
|
419
463
|
const COMPONENT = [AXButtonComponent, AXButtonItemComponent, AXButtonItemListComponent];
|
420
|
-
const MODULES = [CommonModule, AXCommonModule, AXDecoratorModule, AXLoadingModule, AXRippleDirective];
|
421
464
|
class AXButtonModule {
|
422
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.
|
423
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.
|
424
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.
|
465
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
466
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.8", ngImport: i0, type: AXButtonModule, imports: [AXButtonComponent, AXButtonItemComponent, AXButtonItemListComponent], exports: [AXButtonComponent, AXButtonItemComponent, AXButtonItemListComponent] }); }
|
467
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXButtonModule, imports: [COMPONENT] }); }
|
425
468
|
}
|
426
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.
|
469
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXButtonModule, decorators: [{
|
427
470
|
type: NgModule,
|
428
471
|
args: [{
|
429
|
-
imports: [
|
472
|
+
imports: [...COMPONENT],
|
430
473
|
exports: [...COMPONENT],
|
431
474
|
providers: [],
|
432
475
|
}]
|