@acorex/components 19.8.0-next.1 → 19.8.0-next.11
Sign up to get free protection for your applications and to get access to all the features.
- package/color-box/lib/color-box.component.d.ts +5 -1
- package/color-palette/lib/color-palette-picker.component.d.ts +19 -14
- package/color-palette/lib/color-palette.module.d.ts +2 -1
- package/common/lib/classes/styles.class.d.ts +1 -1
- package/conversation/lib/conversation-input/conversation-input.component.d.ts +3 -2
- package/conversation/lib/conversation-message/conversation-message.component.d.ts +2 -1
- package/conversation/lib/conversation-view/conversation-view.component.d.ts +3 -1
- package/datetime-picker/lib/datetime-picker.component.d.ts +0 -10
- package/datetime-picker/lib/datetime-picker.module.d.ts +2 -1
- package/fesm2022/acorex-components-action-sheet.mjs +2 -2
- package/fesm2022/acorex-components-action-sheet.mjs.map +1 -1
- package/fesm2022/acorex-components-alert.mjs +2 -2
- package/fesm2022/acorex-components-alert.mjs.map +1 -1
- package/fesm2022/acorex-components-audio-wave.mjs +2 -2
- package/fesm2022/acorex-components-audio-wave.mjs.map +1 -1
- package/fesm2022/acorex-components-avatar.mjs +2 -2
- package/fesm2022/acorex-components-avatar.mjs.map +1 -1
- package/fesm2022/acorex-components-badge.mjs +2 -2
- package/fesm2022/acorex-components-badge.mjs.map +1 -1
- package/fesm2022/acorex-components-bottom-navigation.mjs +2 -2
- package/fesm2022/acorex-components-bottom-navigation.mjs.map +1 -1
- package/fesm2022/acorex-components-button.mjs +4 -4
- package/fesm2022/acorex-components-button.mjs.map +1 -1
- package/fesm2022/acorex-components-calendar.mjs +4 -4
- package/fesm2022/acorex-components-calendar.mjs.map +1 -1
- package/fesm2022/acorex-components-check-box.mjs +2 -2
- package/fesm2022/acorex-components-check-box.mjs.map +1 -1
- package/fesm2022/acorex-components-chips.mjs +2 -2
- package/fesm2022/acorex-components-chips.mjs.map +1 -1
- package/fesm2022/acorex-components-circular-progress.mjs +2 -2
- package/fesm2022/acorex-components-circular-progress.mjs.map +1 -1
- package/fesm2022/acorex-components-collapse.mjs +2 -2
- package/fesm2022/acorex-components-collapse.mjs.map +1 -1
- package/fesm2022/acorex-components-color-box.mjs +11 -4
- package/fesm2022/acorex-components-color-box.mjs.map +1 -1
- package/fesm2022/acorex-components-color-palette.mjs +342 -326
- package/fesm2022/acorex-components-color-palette.mjs.map +1 -1
- package/fesm2022/acorex-components-comment.mjs +4 -4
- package/fesm2022/acorex-components-comment.mjs.map +1 -1
- package/fesm2022/acorex-components-common.mjs +1 -1
- package/fesm2022/acorex-components-common.mjs.map +1 -1
- package/fesm2022/acorex-components-conversation.mjs +15 -11
- package/fesm2022/acorex-components-conversation.mjs.map +1 -1
- package/fesm2022/acorex-components-cron-job.mjs +2 -2
- package/fesm2022/acorex-components-cron-job.mjs.map +1 -1
- package/fesm2022/acorex-components-data-pager.mjs +2 -2
- package/fesm2022/acorex-components-data-pager.mjs.map +1 -1
- package/fesm2022/acorex-components-data-table.mjs +4 -4
- package/fesm2022/acorex-components-data-table.mjs.map +1 -1
- package/fesm2022/acorex-components-datetime-box.mjs +0 -1
- package/fesm2022/acorex-components-datetime-box.mjs.map +1 -1
- package/fesm2022/acorex-components-datetime-picker.mjs +17 -23
- package/fesm2022/acorex-components-datetime-picker.mjs.map +1 -1
- package/fesm2022/acorex-components-dialog.mjs +2 -2
- package/fesm2022/acorex-components-dialog.mjs.map +1 -1
- package/fesm2022/acorex-components-dropdown-button.mjs +2 -2
- package/fesm2022/acorex-components-dropdown-button.mjs.map +1 -1
- package/fesm2022/acorex-components-form.mjs +2 -2
- package/fesm2022/acorex-components-form.mjs.map +1 -1
- package/fesm2022/acorex-components-grid-layout-builder.mjs +111 -71
- package/fesm2022/acorex-components-grid-layout-builder.mjs.map +1 -1
- package/fesm2022/acorex-components-image-editor.mjs +2 -2
- package/fesm2022/acorex-components-image-editor.mjs.map +1 -1
- package/fesm2022/acorex-components-json-viewer.mjs +2 -2
- package/fesm2022/acorex-components-json-viewer.mjs.map +1 -1
- package/fesm2022/acorex-components-list.mjs +2 -2
- package/fesm2022/acorex-components-list.mjs.map +1 -1
- package/fesm2022/acorex-components-loading.mjs +2 -2
- package/fesm2022/acorex-components-loading.mjs.map +1 -1
- package/fesm2022/acorex-components-map.mjs +11 -5
- package/fesm2022/acorex-components-map.mjs.map +1 -1
- package/fesm2022/acorex-components-media-viewer.mjs +4 -4
- package/fesm2022/acorex-components-media-viewer.mjs.map +1 -1
- package/fesm2022/acorex-components-menu.mjs +4 -4
- package/fesm2022/acorex-components-menu.mjs.map +1 -1
- package/fesm2022/acorex-components-navbar.mjs +3 -3
- package/fesm2022/acorex-components-navbar.mjs.map +1 -1
- package/fesm2022/acorex-components-notification.mjs +2 -2
- package/fesm2022/acorex-components-notification.mjs.map +1 -1
- package/fesm2022/acorex-components-number-box.mjs +4 -15
- package/fesm2022/acorex-components-number-box.mjs.map +1 -1
- package/fesm2022/acorex-components-otp.mjs +2 -2
- package/fesm2022/acorex-components-otp.mjs.map +1 -1
- package/fesm2022/acorex-components-paint.mjs +4 -4
- package/fesm2022/acorex-components-paint.mjs.map +1 -1
- package/fesm2022/acorex-components-password-box.mjs +4 -10
- package/fesm2022/acorex-components-password-box.mjs.map +1 -1
- package/fesm2022/acorex-components-phone-box.mjs +2 -2
- package/fesm2022/acorex-components-phone-box.mjs.map +1 -1
- package/fesm2022/acorex-components-picker.mjs +128 -233
- package/fesm2022/acorex-components-picker.mjs.map +1 -1
- package/fesm2022/acorex-components-popup.mjs +2 -2
- package/fesm2022/acorex-components-popup.mjs.map +1 -1
- package/fesm2022/acorex-components-progress-bar.mjs +2 -2
- package/fesm2022/acorex-components-progress-bar.mjs.map +1 -1
- package/fesm2022/acorex-components-rail-navigation.mjs +2 -2
- package/fesm2022/acorex-components-rail-navigation.mjs.map +1 -1
- package/fesm2022/acorex-components-range-slider.mjs +2 -2
- package/fesm2022/acorex-components-range-slider.mjs.map +1 -1
- package/fesm2022/acorex-components-rate-picker.mjs +2 -2
- package/fesm2022/acorex-components-rate-picker.mjs.map +1 -1
- package/fesm2022/acorex-components-scheduler.mjs +11 -11
- package/fesm2022/acorex-components-scheduler.mjs.map +1 -1
- package/fesm2022/acorex-components-search-box.mjs +2 -2
- package/fesm2022/acorex-components-search-box.mjs.map +1 -1
- package/fesm2022/acorex-components-select-box.mjs +2 -2
- package/fesm2022/acorex-components-select-box.mjs.map +1 -1
- package/fesm2022/acorex-components-selection-list.mjs +2 -2
- package/fesm2022/acorex-components-selection-list.mjs.map +1 -1
- package/fesm2022/acorex-components-side-menu.mjs +2 -2
- package/fesm2022/acorex-components-side-menu.mjs.map +1 -1
- package/fesm2022/acorex-components-skeleton.mjs +2 -2
- package/fesm2022/acorex-components-skeleton.mjs.map +1 -1
- package/fesm2022/acorex-components-slider.mjs +2 -2
- package/fesm2022/acorex-components-slider.mjs.map +1 -1
- package/fesm2022/acorex-components-step-wizard.mjs +2 -2
- package/fesm2022/acorex-components-step-wizard.mjs.map +1 -1
- package/fesm2022/acorex-components-switch.mjs +2 -2
- package/fesm2022/acorex-components-switch.mjs.map +1 -1
- package/fesm2022/acorex-components-tabs.mjs +2 -2
- package/fesm2022/acorex-components-tabs.mjs.map +1 -1
- package/fesm2022/acorex-components-tag.mjs +2 -2
- package/fesm2022/acorex-components-tag.mjs.map +1 -1
- package/fesm2022/acorex-components-text-area.mjs +4 -15
- package/fesm2022/acorex-components-text-area.mjs.map +1 -1
- package/fesm2022/acorex-components-text-box.mjs +4 -18
- package/fesm2022/acorex-components-text-box.mjs.map +1 -1
- package/fesm2022/acorex-components-time-line.mjs +2 -2
- package/fesm2022/acorex-components-toast.mjs +4 -4
- package/fesm2022/acorex-components-toast.mjs.map +1 -1
- package/fesm2022/acorex-components-toolbar.mjs +2 -2
- package/fesm2022/acorex-components-toolbar.mjs.map +1 -1
- package/fesm2022/acorex-components-tree-view.mjs +2 -2
- package/fesm2022/acorex-components-tree-view.mjs.map +1 -1
- package/fesm2022/acorex-components-uploader.mjs +4 -4
- package/fesm2022/acorex-components-uploader.mjs.map +1 -1
- package/fesm2022/acorex-components-wysiwyg.mjs +6 -6
- package/fesm2022/acorex-components-wysiwyg.mjs.map +1 -1
- package/grid-layout-builder/lib/grid-layout-container.component.d.ts +78 -50
- package/number-box/lib/number-box.component.d.ts +0 -1
- package/package.json +1 -1
- package/paint/lib/paint/paint-view/paint-view.component.d.ts +1 -1
- package/password-box/lib/password-box.component.d.ts +0 -1
- package/picker/index.d.ts +3 -2
- package/picker/lib/picker-container/picker-container.component.d.ts +7 -0
- package/picker/lib/picker-items/picker-items.component.d.ts +20 -0
- package/picker/lib/picker-title/picker-title.component.d.ts +5 -0
- package/picker/lib/picker.module.d.ts +6 -4
- package/range-slider/lib/range-slider.component.d.ts +1 -1
- package/scheduler/lib/scheduler-month-view.component.d.ts +6 -6
- package/text-area/lib/text-area.component.d.ts +0 -1
- package/text-box/lib/text-box.component.d.ts +0 -4
- package/toast/lib/toast.service.d.ts +1 -1
- package/picker/lib/picker-column.directive.d.ts +0 -16
- package/picker/lib/picker.component.d.ts +0 -61
@@ -100,7 +100,7 @@ class AXButtonItemComponent extends classes(MXInteractiveComponent, MXColorCompo
|
|
100
100
|
<ng-content select="ax-suffix"> </ng-content>
|
101
101
|
</div>
|
102
102
|
<ng-content select="ax-dropdown-panel"> </ng-content>
|
103
|
-
`, 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));--ax-comp-button-text-padding-x: .5rem}ax-button ax-prefix{padding-inline-start:var(--ax-comp-button-decorator-padding-x)}ax-button ax-suffix{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-size-ratio: .75;--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-size-ratio: .875;--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-size-ratio: 1;--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-size-ratio: 1.125;--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-size-ratio: 1.125;--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-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-primary-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-700)}ax-button.ax-solid.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-success-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-700)}ax-button.ax-solid.ax-danger{--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-danger-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-700)}ax-button.ax-solid.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-warning-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-700)}ax-button.ax-solid.ax-neutral{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-neutral-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-neutral-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-neutral-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-neutral-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-neutral-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-neutral-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-neutral-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-neutral-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-neutral-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-neutral-700)}ax-button.ax-solid.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-surface-lowest-text-color), .3);--ax-comp-button-border-width: 1px;--ax-comp-button-normal-text-color: var(--ax-sys-surface-lowest-text-color);--ax-comp-button-normal-bg-color: var(--ax-sys-surface-lowest-bg-color);--ax-comp-button-normal-border-color: var(--ax-sys-surface-lowest-border-color);--ax-comp-button-hover-text-color: var(--ax-sys-surface-low-text-color);--ax-comp-button-hover-bg-color: var(--ax-sys-surface-low-bg-color);--ax-comp-button-hover-border-color: var(--ax-sys-surface-low-border-color);--ax-comp-button-pressed-text-color: var(--ax-sys-surface-text-color);--ax-comp-button-pressed-bg-color: var(--ax-sys-surface-bg-color);--ax-comp-button-pressed-border-color: var(--ax-sys-surface-border-color);--ax-comp-button-focused-text-color: var(--ax-sys-surface-high-contrast-text-color);--ax-comp-button-focused-bg-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-focused-border-color: var(--ax-sys-surface-high-text-color);--ax-comp-button-focused-outline-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-selected-text-color: var(--ax-sys-surface-highest-text-color);--ax-comp-button-selected-bg-color: var(--ax-sys-surface-highest-bg-color)}ax-button.ax-solid>button:focus-visible,ax-button.ax-solid>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-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-primary-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-500)}ax-button.ax-outline.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-success-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-500)}ax-button.ax-outline.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-warning-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-500)}ax-button.ax-outline.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-danger-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-500)}ax-button.ax-outline.ax-neutral{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-neutral-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-neutral-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-neutral-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-neutral-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-neutral-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-neutral-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-neutral-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-neutral-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-neutral-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-neutral-500)}ax-button.ax-outline.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-surface-lowest-text-color), .3);--ax-comp-button-normal-text-color: var(--ax-sys-surface-lowest-text-color);--ax-comp-button-normal-border-color: var(--ax-sys-surface-lowest-border-color);--ax-comp-button-hover-text-color: var(--ax-sys-surface-low-text-color);--ax-comp-button-hover-border-color: var(--ax-sys-surface-low-border-color);--ax-comp-button-pressed-text-color: var(--ax-sys-surface-text-color);--ax-comp-button-pressed-border-color: var(--ax-sys-surface-border-color);--ax-comp-button-focused-text-color: var(--ax-sys-surface-high-text-color);--ax-comp-button-focused-border-color: var(--ax-sys-surface-high-border-color);--ax-comp-button-focused-outline-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-selected-text-color: var(--ax-sys-surface-highest-text-color);--ax-comp-button-selected-bg-color: var(--ax-sys-surface-highest-bg-color);--ax-comp-button-selected-border-color: var(--ax-sys-surface-highest-border-color)}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:-4px;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-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-contrast-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-contrast-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-contrast-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-primary-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-500)}ax-button.ax-twotone.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-contrast-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-contrast-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-contrast-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-success-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-500)}ax-button.ax-twotone.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-contrast-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-contrast-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-contrast-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-danger-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-500)}ax-button.ax-twotone.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-contrast-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-contrast-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-contrast-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-warning-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-500)}ax-button.ax-twotone.ax-neutral{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-neutral-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-neutral-contrast-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-neutral-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-neutral-contrast-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-neutral-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-neutral-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-neutral-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-neutral-contrast-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-neutral-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-neutral-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-neutral-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-neutral-500)}ax-button.ax-twotone.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-surface-low-text-color), .3);--ax-comp-button-normal-text-color: var(--ax-sys-surface-low-text-color);--ax-comp-button-normal-bg-color: var(--ax-sys-surface-low-bg-color);--ax-comp-button-hover-text-color: var(--ax-sys-surface-text-color);--ax-comp-button-hover-bg-color: var(--ax-sys-surface-bg-color);--ax-comp-button-pressed-text-color: var(--ax-sys-surface-high-text-color);--ax-comp-button-pressed-bg-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-focused-text-color: var(--ax-sys-surface-high-contrast-text-color);--ax-comp-button-focused-bg-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-selected-text-color: var(--ax-sys-surface-highest-text-color);--ax-comp-button-selected-bg-color: var(--ax-sys-surface-highest-bg-color)}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-blank.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-primary-contrast-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-200)}ax-button.ax-blank.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-success-contrast-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-200)}ax-button.ax-blank.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-warning-contrast-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-200)}ax-button.ax-blank.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-danger-contrast-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-200)}ax-button.ax-blank.ax-neutral{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-neutral-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-neutral-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-neutral-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-neutral-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-neutral-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-neutral-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-neutral-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-neutral-contrast-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-neutral-200)}ax-button.ax-blank.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-surface-text-color), .3);--ax-comp-button-normal-text-color: var(--ax-sys-surface-lowest-text-color);--ax-comp-button-hover-text-color: var(--ax-sys-surface-low-text-color);--ax-comp-button-hover-bg-color: var(--ax-sys-surface-low-bg-color);--ax-comp-button-pressed-bg-color: var(--ax-sys-surface-bg-color);--ax-comp-button-pressed-text-color: var(--ax-sys-surface-text-color);--ax-comp-button-focused-bg-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-focused-text-color: var(--ax-sys-surface-high-text-color);--ax-comp-button-focused-outline-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-selected-text-color: var(--ax-sys-surface-highest-text-color);--ax-comp-button-selected-bg-color: var(--ax-sys-surface-highest-bg-color)}ax-button.ax-blank{--ax-comp-button-normal-bg-color: transparent}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-link.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-primary-contrast-text)}ax-button.ax-link.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-success-contrast-text)}ax-button.ax-link.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-warning-contrast-text)}ax-button.ax-link.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-danger-contrast-text)}ax-button.ax-link.ax-neutral{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-neutral-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-neutral-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-neutral-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-neutral-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-neutral-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-neutral-contrast-text)}ax-button.ax-link.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-surface-text-color), .3);--ax-comp-button-normal-text-color: var(--ax-sys-surface-lowest-text-color);--ax-comp-button-hover-text-color: var(---ax-sys-surface-low-text-color);--ax-comp-button-pressed-text-color: var(--ax-sys-surface-text-color);--ax-comp-button-focused-text-color: var(--ax-sys-surface-high-text-color);--ax-comp-button-focused-outline-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-selected-text-color: var(--ax-sys-surface-highest-text-color);--ax-comp-button-selected-bg-color: var(--ax-sys-surface-highest-bg-color)}ax-button.ax-link{--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-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-item.ax-primary{--ax-comp-button-item-text-color: var(--ax-sys-color-primary-500)}ax-button-item.ax-success{--ax-comp-button-item-text-color: var(--ax-sys-color-success-500)}ax-button-item.ax-danger{--ax-comp-button-item-text-color: var(--ax-sys-color-danger-500)}ax-button-item.ax-warning{--ax-comp-button-item-text-color: var(--ax-sys-color-warning-500)}ax-button-item.ax-neutral{--ax-comp-button-item-text-color: var(--ax-sys-color-neutral-500)}ax-button-item.ax-ghost{--ax-comp-button-item-text-color: var(--ax-sys-surface-text-color)}ax-button-item ax-text,ax-button-item ax-icon{color:rgba(var(--ax-comp-button-item-text-color))}\n"], dependencies: [{ kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
103
|
+
`, 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));--ax-comp-button-text-padding-x: .5rem}ax-button ax-prefix{padding-inline-start:var(--ax-comp-button-decorator-padding-x)}ax-button ax-suffix{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-size-ratio: .75;--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-size-ratio: .875;--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-size-ratio: 1;--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-size-ratio: 1.125;--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-size-ratio: 1.125;--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-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-primary), .3);--ax-comp-button-border-width: 1px;--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-700)}ax-button.ax-solid.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-secondary), .3);--ax-comp-button-border-width: 1px;--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-700);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-700)}ax-button.ax-solid.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-success), .3);--ax-comp-button-border-width: 1px;--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-700)}ax-button.ax-solid.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-danger), .3);--ax-comp-button-border-width: 1px;--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-700)}ax-button.ax-solid.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-warning), .3);--ax-comp-button-border-width: 1px;--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-700)}ax-button.ax-solid.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-contrast-ghost), .3);--ax-comp-button-border-width: 1px;--ax-comp-button-normal-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-normal-bg-color: var(--ax-sys-color-ghost-50);--ax-comp-button-normal-border-color: var(--ax-sys-color-ghost-200);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-hover-bg-color: var(--ax-sys-color-ghost-100);--ax-comp-button-hover-border-color: var(--ax-sys-color-ghost-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-ghost-200);--ax-comp-button-pressed-border-color: var(--ax-sys-color-ghost-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-focused-bg-color: var(--ax-sys-color-ghost-300);--ax-comp-button-focused-outline-color: var(--ax-sys-color-ghost-300);--ax-comp-button-focused-border-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-selected-bg-color: var(--ax-sys-color-ghost-300);--ax-comp-button-selected-border-color: var(--ax-sys-color-ghost-300)}ax-button.ax-solid>button:focus-visible,ax-button.ax-solid>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-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-500)}ax-button.ax-outline.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-500)}ax-button.ax-outline.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-500)}ax-button.ax-outline.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-500)}ax-button.ax-outline.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-500)}ax-button.ax-outline.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-ghost-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-ghost-800);--ax-comp-button-normal-border-color: var(--ax-sys-color-ghost-400);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-hover-border-color: var(--ax-sys-color-ghost-500);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-pressed-border-color: var(--ax-sys-color-ghost-600);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-focused-border-color: var(--ax-sys-color-ghost-600);--ax-comp-button-focused-outline-color: var(--ax-sys-color-ghost-600);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-selected-bg-color: var(--ax-sys-color-ghost-300);--ax-comp-button-selected-border-color: var(--ax-sys-color-ghost-300)}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:-4px;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-on-primary), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-contrast-primary);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-primary);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-primary);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-primary);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-500)}ax-button.ax-twotone.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-secondary), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-contrast-secondary);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-secondary);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-secondary);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-secondary);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-500)}ax-button.ax-twotone.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-success), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-contrast-success);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-success);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-success);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-success);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-500)}ax-button.ax-twotone.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-danger), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-contrast-danger);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-danger);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-danger);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-danger);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-500)}ax-button.ax-twotone.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-warning), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-contrast-warning);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-warning);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-warning);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-warning);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-500)}ax-button.ax-twotone.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-contrast-ghost), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-normal-bg-color: var(--ax-sys-color-ghost-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-hover-bg-color: var(--ax-sys-color-ghost-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-ghost-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-focused-bg-color: var(--ax-sys-color-ghost-300);--ax-comp-button-focused-outline-color: var(--ax-sys-color-ghost-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-selected-bg-color: var(--ax-sys-color-ghost-300)}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-blank.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-primary);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-primary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-200)}ax-button.ax-blank.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-secondary);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-secondary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-200)}ax-button.ax-blank.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-success);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-success);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-200)}ax-button.ax-blank.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-warning);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-warning);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-200)}ax-button.ax-blank.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-danger);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-danger);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-200)}ax-button.ax-blank.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-contrast-ghost), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-ghost-800);--ax-comp-button-hover-bg-color: var(--ax-sys-color-ghost-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-ghost-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-focused-bg-color: var(--ax-sys-color-ghost-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-focused-outline-color: var(--ax-sys-color-ghost-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-selected-bg-color: var(--ax-sys-color-ghost-200)}ax-button.ax-blank{--ax-comp-button-normal-bg-color: transparent}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-link.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-primary)}ax-button.ax-link.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-secondary)}ax-button.ax-link.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-success)}ax-button.ax-link.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-warning)}ax-button.ax-link.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-danger)}ax-button.ax-link.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-contrast-ghost), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-ghost-800);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-focused-outline-color: var(--ax-sys-color-ghost-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-ghost-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-ghost)}ax-button.ax-link{--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-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-item.ax-primary{--ax-comp-button-item-text-color: var(--ax-sys-color-primary-500)}ax-button-item.ax-secondary{--ax-comp-button-item-text-color: var(--ax-sys-color-secondary-500)}ax-button-item.ax-success{--ax-comp-button-item-text-color: var(--ax-sys-color-success-500)}ax-button-item.ax-danger{--ax-comp-button-item-text-color: var(--ax-sys-color-danger-500)}ax-button-item.ax-warning{--ax-comp-button-item-text-color: var(--ax-sys-color-warning-500)}ax-button-item.ax-ghost{--ax-comp-button-item-text-color: var(--ax-sys-color-on-contrast-ghost)}ax-button-item ax-text,ax-button-item ax-icon{color:rgba(var(--ax-comp-button-item-text-color))}\n"], dependencies: [{ kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
104
104
|
}
|
105
105
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXButtonItemComponent, decorators: [{
|
106
106
|
type: Component,
|
@@ -117,7 +117,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
117
117
|
<ng-content select="ax-suffix"> </ng-content>
|
118
118
|
</div>
|
119
119
|
<ng-content select="ax-dropdown-panel"> </ng-content>
|
120
|
-
`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['color', 'disabled'], outputs: ['onClick', 'onFocus', 'onBlur', 'disabledChange'], standalone: false, 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));--ax-comp-button-text-padding-x: .5rem}ax-button ax-prefix{padding-inline-start:var(--ax-comp-button-decorator-padding-x)}ax-button ax-suffix{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-size-ratio: .75;--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-size-ratio: .875;--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-size-ratio: 1;--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-size-ratio: 1.125;--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-size-ratio: 1.125;--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-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-primary-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-700)}ax-button.ax-solid.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-success-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-700)}ax-button.ax-solid.ax-danger{--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-danger-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-700)}ax-button.ax-solid.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-warning-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-700)}ax-button.ax-solid.ax-neutral{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-neutral-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-neutral-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-neutral-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-neutral-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-neutral-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-neutral-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-neutral-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-neutral-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-neutral-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-neutral-700)}ax-button.ax-solid.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-surface-lowest-text-color), .3);--ax-comp-button-border-width: 1px;--ax-comp-button-normal-text-color: var(--ax-sys-surface-lowest-text-color);--ax-comp-button-normal-bg-color: var(--ax-sys-surface-lowest-bg-color);--ax-comp-button-normal-border-color: var(--ax-sys-surface-lowest-border-color);--ax-comp-button-hover-text-color: var(--ax-sys-surface-low-text-color);--ax-comp-button-hover-bg-color: var(--ax-sys-surface-low-bg-color);--ax-comp-button-hover-border-color: var(--ax-sys-surface-low-border-color);--ax-comp-button-pressed-text-color: var(--ax-sys-surface-text-color);--ax-comp-button-pressed-bg-color: var(--ax-sys-surface-bg-color);--ax-comp-button-pressed-border-color: var(--ax-sys-surface-border-color);--ax-comp-button-focused-text-color: var(--ax-sys-surface-high-contrast-text-color);--ax-comp-button-focused-bg-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-focused-border-color: var(--ax-sys-surface-high-text-color);--ax-comp-button-focused-outline-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-selected-text-color: var(--ax-sys-surface-highest-text-color);--ax-comp-button-selected-bg-color: var(--ax-sys-surface-highest-bg-color)}ax-button.ax-solid>button:focus-visible,ax-button.ax-solid>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-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-primary-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-500)}ax-button.ax-outline.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-success-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-500)}ax-button.ax-outline.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-warning-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-500)}ax-button.ax-outline.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-danger-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-500)}ax-button.ax-outline.ax-neutral{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-neutral-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-neutral-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-neutral-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-neutral-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-neutral-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-neutral-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-neutral-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-neutral-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-neutral-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-neutral-500)}ax-button.ax-outline.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-surface-lowest-text-color), .3);--ax-comp-button-normal-text-color: var(--ax-sys-surface-lowest-text-color);--ax-comp-button-normal-border-color: var(--ax-sys-surface-lowest-border-color);--ax-comp-button-hover-text-color: var(--ax-sys-surface-low-text-color);--ax-comp-button-hover-border-color: var(--ax-sys-surface-low-border-color);--ax-comp-button-pressed-text-color: var(--ax-sys-surface-text-color);--ax-comp-button-pressed-border-color: var(--ax-sys-surface-border-color);--ax-comp-button-focused-text-color: var(--ax-sys-surface-high-text-color);--ax-comp-button-focused-border-color: var(--ax-sys-surface-high-border-color);--ax-comp-button-focused-outline-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-selected-text-color: var(--ax-sys-surface-highest-text-color);--ax-comp-button-selected-bg-color: var(--ax-sys-surface-highest-bg-color);--ax-comp-button-selected-border-color: var(--ax-sys-surface-highest-border-color)}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:-4px;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-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-contrast-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-contrast-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-contrast-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-primary-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-500)}ax-button.ax-twotone.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-contrast-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-contrast-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-contrast-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-success-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-500)}ax-button.ax-twotone.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-contrast-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-contrast-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-contrast-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-danger-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-500)}ax-button.ax-twotone.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-contrast-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-contrast-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-contrast-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-warning-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-500)}ax-button.ax-twotone.ax-neutral{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-neutral-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-neutral-contrast-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-neutral-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-neutral-contrast-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-neutral-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-neutral-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-neutral-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-neutral-contrast-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-neutral-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-neutral-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-neutral-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-neutral-500)}ax-button.ax-twotone.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-surface-low-text-color), .3);--ax-comp-button-normal-text-color: var(--ax-sys-surface-low-text-color);--ax-comp-button-normal-bg-color: var(--ax-sys-surface-low-bg-color);--ax-comp-button-hover-text-color: var(--ax-sys-surface-text-color);--ax-comp-button-hover-bg-color: var(--ax-sys-surface-bg-color);--ax-comp-button-pressed-text-color: var(--ax-sys-surface-high-text-color);--ax-comp-button-pressed-bg-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-focused-text-color: var(--ax-sys-surface-high-contrast-text-color);--ax-comp-button-focused-bg-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-selected-text-color: var(--ax-sys-surface-highest-text-color);--ax-comp-button-selected-bg-color: var(--ax-sys-surface-highest-bg-color)}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-blank.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-primary-contrast-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-200)}ax-button.ax-blank.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-success-contrast-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-200)}ax-button.ax-blank.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-warning-contrast-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-200)}ax-button.ax-blank.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-danger-contrast-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-200)}ax-button.ax-blank.ax-neutral{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-neutral-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-neutral-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-neutral-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-neutral-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-neutral-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-neutral-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-neutral-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-neutral-contrast-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-neutral-200)}ax-button.ax-blank.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-surface-text-color), .3);--ax-comp-button-normal-text-color: var(--ax-sys-surface-lowest-text-color);--ax-comp-button-hover-text-color: var(--ax-sys-surface-low-text-color);--ax-comp-button-hover-bg-color: var(--ax-sys-surface-low-bg-color);--ax-comp-button-pressed-bg-color: var(--ax-sys-surface-bg-color);--ax-comp-button-pressed-text-color: var(--ax-sys-surface-text-color);--ax-comp-button-focused-bg-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-focused-text-color: var(--ax-sys-surface-high-text-color);--ax-comp-button-focused-outline-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-selected-text-color: var(--ax-sys-surface-highest-text-color);--ax-comp-button-selected-bg-color: var(--ax-sys-surface-highest-bg-color)}ax-button.ax-blank{--ax-comp-button-normal-bg-color: transparent}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-link.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-primary-contrast-text)}ax-button.ax-link.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-success-contrast-text)}ax-button.ax-link.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-warning-contrast-text)}ax-button.ax-link.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-danger-contrast-text)}ax-button.ax-link.ax-neutral{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-neutral-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-neutral-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-neutral-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-neutral-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-neutral-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-neutral-contrast-text)}ax-button.ax-link.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-surface-text-color), .3);--ax-comp-button-normal-text-color: var(--ax-sys-surface-lowest-text-color);--ax-comp-button-hover-text-color: var(---ax-sys-surface-low-text-color);--ax-comp-button-pressed-text-color: var(--ax-sys-surface-text-color);--ax-comp-button-focused-text-color: var(--ax-sys-surface-high-text-color);--ax-comp-button-focused-outline-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-selected-text-color: var(--ax-sys-surface-highest-text-color);--ax-comp-button-selected-bg-color: var(--ax-sys-surface-highest-bg-color)}ax-button.ax-link{--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-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-item.ax-primary{--ax-comp-button-item-text-color: var(--ax-sys-color-primary-500)}ax-button-item.ax-success{--ax-comp-button-item-text-color: var(--ax-sys-color-success-500)}ax-button-item.ax-danger{--ax-comp-button-item-text-color: var(--ax-sys-color-danger-500)}ax-button-item.ax-warning{--ax-comp-button-item-text-color: var(--ax-sys-color-warning-500)}ax-button-item.ax-neutral{--ax-comp-button-item-text-color: var(--ax-sys-color-neutral-500)}ax-button-item.ax-ghost{--ax-comp-button-item-text-color: var(--ax-sys-surface-text-color)}ax-button-item ax-text,ax-button-item ax-icon{color:rgba(var(--ax-comp-button-item-text-color))}\n"] }]
|
120
|
+
`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['color', 'disabled'], outputs: ['onClick', 'onFocus', 'onBlur', 'disabledChange'], standalone: false, 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));--ax-comp-button-text-padding-x: .5rem}ax-button ax-prefix{padding-inline-start:var(--ax-comp-button-decorator-padding-x)}ax-button ax-suffix{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-size-ratio: .75;--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-size-ratio: .875;--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-size-ratio: 1;--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-size-ratio: 1.125;--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-size-ratio: 1.125;--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-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-primary), .3);--ax-comp-button-border-width: 1px;--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-700)}ax-button.ax-solid.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-secondary), .3);--ax-comp-button-border-width: 1px;--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-700);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-700)}ax-button.ax-solid.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-success), .3);--ax-comp-button-border-width: 1px;--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-700)}ax-button.ax-solid.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-danger), .3);--ax-comp-button-border-width: 1px;--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-700)}ax-button.ax-solid.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-warning), .3);--ax-comp-button-border-width: 1px;--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-700)}ax-button.ax-solid.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-contrast-ghost), .3);--ax-comp-button-border-width: 1px;--ax-comp-button-normal-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-normal-bg-color: var(--ax-sys-color-ghost-50);--ax-comp-button-normal-border-color: var(--ax-sys-color-ghost-200);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-hover-bg-color: var(--ax-sys-color-ghost-100);--ax-comp-button-hover-border-color: var(--ax-sys-color-ghost-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-ghost-200);--ax-comp-button-pressed-border-color: var(--ax-sys-color-ghost-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-focused-bg-color: var(--ax-sys-color-ghost-300);--ax-comp-button-focused-outline-color: var(--ax-sys-color-ghost-300);--ax-comp-button-focused-border-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-selected-bg-color: var(--ax-sys-color-ghost-300);--ax-comp-button-selected-border-color: var(--ax-sys-color-ghost-300)}ax-button.ax-solid>button:focus-visible,ax-button.ax-solid>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-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-500)}ax-button.ax-outline.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-500)}ax-button.ax-outline.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-500)}ax-button.ax-outline.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-500)}ax-button.ax-outline.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-500)}ax-button.ax-outline.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-ghost-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-ghost-800);--ax-comp-button-normal-border-color: var(--ax-sys-color-ghost-400);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-hover-border-color: var(--ax-sys-color-ghost-500);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-pressed-border-color: var(--ax-sys-color-ghost-600);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-focused-border-color: var(--ax-sys-color-ghost-600);--ax-comp-button-focused-outline-color: var(--ax-sys-color-ghost-600);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-selected-bg-color: var(--ax-sys-color-ghost-300);--ax-comp-button-selected-border-color: var(--ax-sys-color-ghost-300)}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:-4px;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-on-primary), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-contrast-primary);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-primary);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-primary);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-primary);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-500)}ax-button.ax-twotone.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-secondary), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-contrast-secondary);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-secondary);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-secondary);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-secondary);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-500)}ax-button.ax-twotone.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-success), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-contrast-success);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-success);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-success);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-success);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-500)}ax-button.ax-twotone.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-danger), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-contrast-danger);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-danger);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-danger);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-danger);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-500)}ax-button.ax-twotone.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-warning), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-contrast-warning);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-warning);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-warning);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-warning);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-500)}ax-button.ax-twotone.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-contrast-ghost), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-normal-bg-color: var(--ax-sys-color-ghost-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-hover-bg-color: var(--ax-sys-color-ghost-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-ghost-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-focused-bg-color: var(--ax-sys-color-ghost-300);--ax-comp-button-focused-outline-color: var(--ax-sys-color-ghost-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-selected-bg-color: var(--ax-sys-color-ghost-300)}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-blank.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-primary);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-primary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-200)}ax-button.ax-blank.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-secondary);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-secondary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-200)}ax-button.ax-blank.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-success);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-success);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-200)}ax-button.ax-blank.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-warning);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-warning);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-200)}ax-button.ax-blank.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-danger);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-danger);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-200)}ax-button.ax-blank.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-contrast-ghost), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-ghost-800);--ax-comp-button-hover-bg-color: var(--ax-sys-color-ghost-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-ghost-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-focused-bg-color: var(--ax-sys-color-ghost-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-focused-outline-color: var(--ax-sys-color-ghost-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-selected-bg-color: var(--ax-sys-color-ghost-200)}ax-button.ax-blank{--ax-comp-button-normal-bg-color: transparent}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-link.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-primary)}ax-button.ax-link.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-secondary)}ax-button.ax-link.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-success)}ax-button.ax-link.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-warning)}ax-button.ax-link.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-danger)}ax-button.ax-link.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-contrast-ghost), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-ghost-800);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-focused-outline-color: var(--ax-sys-color-ghost-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-ghost-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-ghost)}ax-button.ax-link{--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-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-item.ax-primary{--ax-comp-button-item-text-color: var(--ax-sys-color-primary-500)}ax-button-item.ax-secondary{--ax-comp-button-item-text-color: var(--ax-sys-color-secondary-500)}ax-button-item.ax-success{--ax-comp-button-item-text-color: var(--ax-sys-color-success-500)}ax-button-item.ax-danger{--ax-comp-button-item-text-color: var(--ax-sys-color-danger-500)}ax-button-item.ax-warning{--ax-comp-button-item-text-color: var(--ax-sys-color-warning-500)}ax-button-item.ax-ghost{--ax-comp-button-item-text-color: var(--ax-sys-color-on-contrast-ghost)}ax-button-item ax-text,ax-button-item ax-icon{color:rgba(var(--ax-comp-button-item-text-color))}\n"] }]
|
121
121
|
}], propDecorators: { text: [{
|
122
122
|
type: Input
|
123
123
|
}], selected: [{
|
@@ -387,7 +387,7 @@ class AXButtonComponent extends MXButtonBaseComponent {
|
|
387
387
|
{ provide: AXComponent, useExisting: AXButtonComponent },
|
388
388
|
{ provide: AXButtonItemComponent, useExisting: AXButtonComponent },
|
389
389
|
{ provide: AXFocusableComponent, useExisting: AXButtonComponent },
|
390
|
-
], usesInheritance: true, ngImport: i0, template: "<button\n [axRipple]\n [disabled]=\"disabled\"\n [attr.tabindex]=\"tabIndex\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n (click)=\"_handleClick($event)\"\n [attr.type]=\"type()\"\n>\n <ng-content select=\"ax-loading, ax-loading-spinner\"> </ng-content>\n <ng-content select=\"ax-prefix, ax-icon\"> </ng-content>\n <ng-content select=\"ax-content\"> </ng-content>\n\n @if (text && !loadingText()) {\n <span class=\"ax-button-text\">{{ text }}</span>\n }\n @if (loadingText()) {\n <span class=\"ax-button-text\">{{ loadingText() }}</span>\n }\n\n <ng-content select=\"ax-suffix\"> </ng-content>\n <ng-content select=\"ax-dropdown-panel\"> </ng-content>\n <ng-content select=\".tab-content\"> </ng-content>\n\n <ng-content></ng-content>\n</button>\n", styles: ["ax-button{--ax-comp-button-padding-y: 0;--ax-comp-button-border-radius: var(--ax-sys-border-radius);--ax-comp-button-height: calc(var(--ax-sys-size-base) * var(--ax-comp-button-size-ratio));--ax-comp-button-text-padding-x: .5rem}ax-button ax-prefix{padding-inline-start:var(--ax-comp-button-decorator-padding-x)}ax-button ax-suffix{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-size-ratio: .75;--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-size-ratio: .875;--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-size-ratio: 1;--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-size-ratio: 1.125;--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-size-ratio: 1.125;--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-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-primary-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-700)}ax-button.ax-solid.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-success-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-700)}ax-button.ax-solid.ax-danger{--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-danger-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-700)}ax-button.ax-solid.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-warning-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-700)}ax-button.ax-solid.ax-neutral{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-neutral-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-neutral-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-neutral-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-neutral-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-neutral-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-neutral-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-neutral-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-neutral-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-neutral-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-neutral-700)}ax-button.ax-solid.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-surface-lowest-text-color), .3);--ax-comp-button-border-width: 1px;--ax-comp-button-normal-text-color: var(--ax-sys-surface-lowest-text-color);--ax-comp-button-normal-bg-color: var(--ax-sys-surface-lowest-bg-color);--ax-comp-button-normal-border-color: var(--ax-sys-surface-lowest-border-color);--ax-comp-button-hover-text-color: var(--ax-sys-surface-low-text-color);--ax-comp-button-hover-bg-color: var(--ax-sys-surface-low-bg-color);--ax-comp-button-hover-border-color: var(--ax-sys-surface-low-border-color);--ax-comp-button-pressed-text-color: var(--ax-sys-surface-text-color);--ax-comp-button-pressed-bg-color: var(--ax-sys-surface-bg-color);--ax-comp-button-pressed-border-color: var(--ax-sys-surface-border-color);--ax-comp-button-focused-text-color: var(--ax-sys-surface-high-contrast-text-color);--ax-comp-button-focused-bg-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-focused-border-color: var(--ax-sys-surface-high-text-color);--ax-comp-button-focused-outline-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-selected-text-color: var(--ax-sys-surface-highest-text-color);--ax-comp-button-selected-bg-color: var(--ax-sys-surface-highest-bg-color)}ax-button.ax-solid>button:focus-visible,ax-button.ax-solid>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-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-primary-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-500)}ax-button.ax-outline.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-success-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-500)}ax-button.ax-outline.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-warning-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-500)}ax-button.ax-outline.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-danger-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-500)}ax-button.ax-outline.ax-neutral{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-neutral-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-neutral-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-neutral-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-neutral-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-neutral-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-neutral-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-neutral-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-neutral-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-neutral-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-neutral-500)}ax-button.ax-outline.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-surface-lowest-text-color), .3);--ax-comp-button-normal-text-color: var(--ax-sys-surface-lowest-text-color);--ax-comp-button-normal-border-color: var(--ax-sys-surface-lowest-border-color);--ax-comp-button-hover-text-color: var(--ax-sys-surface-low-text-color);--ax-comp-button-hover-border-color: var(--ax-sys-surface-low-border-color);--ax-comp-button-pressed-text-color: var(--ax-sys-surface-text-color);--ax-comp-button-pressed-border-color: var(--ax-sys-surface-border-color);--ax-comp-button-focused-text-color: var(--ax-sys-surface-high-text-color);--ax-comp-button-focused-border-color: var(--ax-sys-surface-high-border-color);--ax-comp-button-focused-outline-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-selected-text-color: var(--ax-sys-surface-highest-text-color);--ax-comp-button-selected-bg-color: var(--ax-sys-surface-highest-bg-color);--ax-comp-button-selected-border-color: var(--ax-sys-surface-highest-border-color)}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:-4px;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-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-contrast-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-contrast-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-contrast-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-primary-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-500)}ax-button.ax-twotone.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-contrast-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-contrast-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-contrast-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-success-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-500)}ax-button.ax-twotone.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-contrast-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-contrast-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-contrast-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-danger-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-500)}ax-button.ax-twotone.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-contrast-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-contrast-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-contrast-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-warning-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-500)}ax-button.ax-twotone.ax-neutral{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-neutral-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-neutral-contrast-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-neutral-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-neutral-contrast-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-neutral-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-neutral-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-neutral-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-neutral-contrast-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-neutral-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-neutral-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-neutral-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-neutral-500)}ax-button.ax-twotone.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-surface-low-text-color), .3);--ax-comp-button-normal-text-color: var(--ax-sys-surface-low-text-color);--ax-comp-button-normal-bg-color: var(--ax-sys-surface-low-bg-color);--ax-comp-button-hover-text-color: var(--ax-sys-surface-text-color);--ax-comp-button-hover-bg-color: var(--ax-sys-surface-bg-color);--ax-comp-button-pressed-text-color: var(--ax-sys-surface-high-text-color);--ax-comp-button-pressed-bg-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-focused-text-color: var(--ax-sys-surface-high-contrast-text-color);--ax-comp-button-focused-bg-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-selected-text-color: var(--ax-sys-surface-highest-text-color);--ax-comp-button-selected-bg-color: var(--ax-sys-surface-highest-bg-color)}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-blank.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-primary-contrast-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-200)}ax-button.ax-blank.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-success-contrast-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-200)}ax-button.ax-blank.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-warning-contrast-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-200)}ax-button.ax-blank.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-danger-contrast-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-200)}ax-button.ax-blank.ax-neutral{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-neutral-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-neutral-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-neutral-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-neutral-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-neutral-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-neutral-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-neutral-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-neutral-contrast-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-neutral-200)}ax-button.ax-blank.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-surface-text-color), .3);--ax-comp-button-normal-text-color: var(--ax-sys-surface-lowest-text-color);--ax-comp-button-hover-text-color: var(--ax-sys-surface-low-text-color);--ax-comp-button-hover-bg-color: var(--ax-sys-surface-low-bg-color);--ax-comp-button-pressed-bg-color: var(--ax-sys-surface-bg-color);--ax-comp-button-pressed-text-color: var(--ax-sys-surface-text-color);--ax-comp-button-focused-bg-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-focused-text-color: var(--ax-sys-surface-high-text-color);--ax-comp-button-focused-outline-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-selected-text-color: var(--ax-sys-surface-highest-text-color);--ax-comp-button-selected-bg-color: var(--ax-sys-surface-highest-bg-color)}ax-button.ax-blank{--ax-comp-button-normal-bg-color: transparent}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-link.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-primary-contrast-text)}ax-button.ax-link.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-success-contrast-text)}ax-button.ax-link.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-warning-contrast-text)}ax-button.ax-link.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-danger-contrast-text)}ax-button.ax-link.ax-neutral{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-neutral-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-neutral-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-neutral-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-neutral-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-neutral-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-neutral-contrast-text)}ax-button.ax-link.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-surface-text-color), .3);--ax-comp-button-normal-text-color: var(--ax-sys-surface-lowest-text-color);--ax-comp-button-hover-text-color: var(---ax-sys-surface-low-text-color);--ax-comp-button-pressed-text-color: var(--ax-sys-surface-text-color);--ax-comp-button-focused-text-color: var(--ax-sys-surface-high-text-color);--ax-comp-button-focused-outline-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-selected-text-color: var(--ax-sys-surface-highest-text-color);--ax-comp-button-selected-bg-color: var(--ax-sys-surface-highest-bg-color)}ax-button.ax-link{--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-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-item.ax-primary{--ax-comp-button-item-text-color: var(--ax-sys-color-primary-500)}ax-button-item.ax-success{--ax-comp-button-item-text-color: var(--ax-sys-color-success-500)}ax-button-item.ax-danger{--ax-comp-button-item-text-color: var(--ax-sys-color-danger-500)}ax-button-item.ax-warning{--ax-comp-button-item-text-color: var(--ax-sys-color-warning-500)}ax-button-item.ax-neutral{--ax-comp-button-item-text-color: var(--ax-sys-color-neutral-500)}ax-button-item.ax-ghost{--ax-comp-button-item-text-color: var(--ax-sys-surface-text-color)}ax-button{position:relative;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);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)}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>button .ax-ripple{background-color:rgba(var(--ax-comp-button-ripple-bg-color))}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:rgba(var(--ax-comp-button-selected-border-color))}\n"], dependencies: [{ kind: "directive", type: i3.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
390
|
+
], usesInheritance: true, ngImport: i0, template: "<button\n [axRipple]\n [disabled]=\"disabled\"\n [attr.tabindex]=\"tabIndex\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n (click)=\"_handleClick($event)\"\n [attr.type]=\"type()\"\n>\n <ng-content select=\"ax-loading, ax-loading-spinner\"> </ng-content>\n <ng-content select=\"ax-prefix, ax-icon\"> </ng-content>\n <ng-content select=\"ax-content\"> </ng-content>\n\n @if (text && !loadingText()) {\n <span class=\"ax-button-text\">{{ text }}</span>\n }\n @if (loadingText()) {\n <span class=\"ax-button-text\">{{ loadingText() }}</span>\n }\n\n <ng-content select=\"ax-suffix\"> </ng-content>\n <ng-content select=\"ax-dropdown-panel\"> </ng-content>\n <ng-content select=\".tab-content\"> </ng-content>\n\n <ng-content></ng-content>\n</button>\n", styles: ["ax-button{--ax-comp-button-padding-y: 0;--ax-comp-button-border-radius: var(--ax-sys-border-radius);--ax-comp-button-height: calc(var(--ax-sys-size-base) * var(--ax-comp-button-size-ratio));--ax-comp-button-text-padding-x: .5rem}ax-button ax-prefix{padding-inline-start:var(--ax-comp-button-decorator-padding-x)}ax-button ax-suffix{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-size-ratio: .75;--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-size-ratio: .875;--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-size-ratio: 1;--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-size-ratio: 1.125;--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-size-ratio: 1.125;--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-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-primary), .3);--ax-comp-button-border-width: 1px;--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-700)}ax-button.ax-solid.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-secondary), .3);--ax-comp-button-border-width: 1px;--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-700);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-700)}ax-button.ax-solid.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-success), .3);--ax-comp-button-border-width: 1px;--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-700)}ax-button.ax-solid.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-danger), .3);--ax-comp-button-border-width: 1px;--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-700)}ax-button.ax-solid.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-warning), .3);--ax-comp-button-border-width: 1px;--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-700)}ax-button.ax-solid.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-contrast-ghost), .3);--ax-comp-button-border-width: 1px;--ax-comp-button-normal-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-normal-bg-color: var(--ax-sys-color-ghost-50);--ax-comp-button-normal-border-color: var(--ax-sys-color-ghost-200);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-hover-bg-color: var(--ax-sys-color-ghost-100);--ax-comp-button-hover-border-color: var(--ax-sys-color-ghost-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-ghost-200);--ax-comp-button-pressed-border-color: var(--ax-sys-color-ghost-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-focused-bg-color: var(--ax-sys-color-ghost-300);--ax-comp-button-focused-outline-color: var(--ax-sys-color-ghost-300);--ax-comp-button-focused-border-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-selected-bg-color: var(--ax-sys-color-ghost-300);--ax-comp-button-selected-border-color: var(--ax-sys-color-ghost-300)}ax-button.ax-solid>button:focus-visible,ax-button.ax-solid>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-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-500)}ax-button.ax-outline.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-500)}ax-button.ax-outline.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-500)}ax-button.ax-outline.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-500)}ax-button.ax-outline.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-500)}ax-button.ax-outline.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-ghost-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-ghost-800);--ax-comp-button-normal-border-color: var(--ax-sys-color-ghost-400);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-hover-border-color: var(--ax-sys-color-ghost-500);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-pressed-border-color: var(--ax-sys-color-ghost-600);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-focused-border-color: var(--ax-sys-color-ghost-600);--ax-comp-button-focused-outline-color: var(--ax-sys-color-ghost-600);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-selected-bg-color: var(--ax-sys-color-ghost-300);--ax-comp-button-selected-border-color: var(--ax-sys-color-ghost-300)}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:-4px;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-on-primary), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-contrast-primary);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-primary);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-primary);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-primary);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-500)}ax-button.ax-twotone.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-secondary), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-contrast-secondary);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-secondary);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-secondary);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-secondary);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-500)}ax-button.ax-twotone.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-success), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-contrast-success);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-success);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-success);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-success);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-500)}ax-button.ax-twotone.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-danger), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-contrast-danger);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-danger);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-danger);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-danger);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-500)}ax-button.ax-twotone.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-warning), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-contrast-warning);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-warning);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-warning);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-warning);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-500)}ax-button.ax-twotone.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-contrast-ghost), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-normal-bg-color: var(--ax-sys-color-ghost-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-hover-bg-color: var(--ax-sys-color-ghost-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-ghost-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-focused-bg-color: var(--ax-sys-color-ghost-300);--ax-comp-button-focused-outline-color: var(--ax-sys-color-ghost-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-selected-bg-color: var(--ax-sys-color-ghost-300)}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-blank.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-primary);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-primary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-200)}ax-button.ax-blank.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-secondary);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-secondary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-200)}ax-button.ax-blank.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-success);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-success);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-200)}ax-button.ax-blank.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-warning);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-warning);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-200)}ax-button.ax-blank.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-danger);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-danger);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-200)}ax-button.ax-blank.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-contrast-ghost), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-ghost-800);--ax-comp-button-hover-bg-color: var(--ax-sys-color-ghost-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-ghost-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-focused-bg-color: var(--ax-sys-color-ghost-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-focused-outline-color: var(--ax-sys-color-ghost-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-selected-bg-color: var(--ax-sys-color-ghost-200)}ax-button.ax-blank{--ax-comp-button-normal-bg-color: transparent}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-link.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-primary)}ax-button.ax-link.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-secondary)}ax-button.ax-link.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-success)}ax-button.ax-link.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-warning)}ax-button.ax-link.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-danger)}ax-button.ax-link.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-contrast-ghost), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-ghost-800);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-focused-outline-color: var(--ax-sys-color-ghost-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-ghost-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-ghost)}ax-button.ax-link{--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-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-item.ax-primary{--ax-comp-button-item-text-color: var(--ax-sys-color-primary-500)}ax-button-item.ax-secondary{--ax-comp-button-item-text-color: var(--ax-sys-color-secondary-500)}ax-button-item.ax-success{--ax-comp-button-item-text-color: var(--ax-sys-color-success-500)}ax-button-item.ax-danger{--ax-comp-button-item-text-color: var(--ax-sys-color-danger-500)}ax-button-item.ax-warning{--ax-comp-button-item-text-color: var(--ax-sys-color-warning-500)}ax-button-item.ax-ghost{--ax-comp-button-item-text-color: var(--ax-sys-color-on-contrast-ghost)}ax-button{position:relative;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);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)}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: i3.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
391
391
|
}
|
392
392
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXButtonComponent, decorators: [{
|
393
393
|
type: Component,
|
@@ -404,7 +404,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
404
404
|
{ provide: AXComponent, useExisting: AXButtonComponent },
|
405
405
|
{ provide: AXButtonItemComponent, useExisting: AXButtonComponent },
|
406
406
|
{ provide: AXFocusableComponent, useExisting: AXButtonComponent },
|
407
|
-
], standalone: false, template: "<button\n [axRipple]\n [disabled]=\"disabled\"\n [attr.tabindex]=\"tabIndex\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n (click)=\"_handleClick($event)\"\n [attr.type]=\"type()\"\n>\n <ng-content select=\"ax-loading, ax-loading-spinner\"> </ng-content>\n <ng-content select=\"ax-prefix, ax-icon\"> </ng-content>\n <ng-content select=\"ax-content\"> </ng-content>\n\n @if (text && !loadingText()) {\n <span class=\"ax-button-text\">{{ text }}</span>\n }\n @if (loadingText()) {\n <span class=\"ax-button-text\">{{ loadingText() }}</span>\n }\n\n <ng-content select=\"ax-suffix\"> </ng-content>\n <ng-content select=\"ax-dropdown-panel\"> </ng-content>\n <ng-content select=\".tab-content\"> </ng-content>\n\n <ng-content></ng-content>\n</button>\n", styles: ["ax-button{--ax-comp-button-padding-y: 0;--ax-comp-button-border-radius: var(--ax-sys-border-radius);--ax-comp-button-height: calc(var(--ax-sys-size-base) * var(--ax-comp-button-size-ratio));--ax-comp-button-text-padding-x: .5rem}ax-button ax-prefix{padding-inline-start:var(--ax-comp-button-decorator-padding-x)}ax-button ax-suffix{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-size-ratio: .75;--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-size-ratio: .875;--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-size-ratio: 1;--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-size-ratio: 1.125;--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-size-ratio: 1.125;--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-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-primary-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-700)}ax-button.ax-solid.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-success-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-700)}ax-button.ax-solid.ax-danger{--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-danger-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-700)}ax-button.ax-solid.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-warning-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-700)}ax-button.ax-solid.ax-neutral{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-neutral-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-neutral-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-neutral-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-neutral-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-neutral-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-neutral-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-neutral-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-neutral-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-neutral-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-neutral-700)}ax-button.ax-solid.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-surface-lowest-text-color), .3);--ax-comp-button-border-width: 1px;--ax-comp-button-normal-text-color: var(--ax-sys-surface-lowest-text-color);--ax-comp-button-normal-bg-color: var(--ax-sys-surface-lowest-bg-color);--ax-comp-button-normal-border-color: var(--ax-sys-surface-lowest-border-color);--ax-comp-button-hover-text-color: var(--ax-sys-surface-low-text-color);--ax-comp-button-hover-bg-color: var(--ax-sys-surface-low-bg-color);--ax-comp-button-hover-border-color: var(--ax-sys-surface-low-border-color);--ax-comp-button-pressed-text-color: var(--ax-sys-surface-text-color);--ax-comp-button-pressed-bg-color: var(--ax-sys-surface-bg-color);--ax-comp-button-pressed-border-color: var(--ax-sys-surface-border-color);--ax-comp-button-focused-text-color: var(--ax-sys-surface-high-contrast-text-color);--ax-comp-button-focused-bg-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-focused-border-color: var(--ax-sys-surface-high-text-color);--ax-comp-button-focused-outline-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-selected-text-color: var(--ax-sys-surface-highest-text-color);--ax-comp-button-selected-bg-color: var(--ax-sys-surface-highest-bg-color)}ax-button.ax-solid>button:focus-visible,ax-button.ax-solid>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-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-primary-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-500)}ax-button.ax-outline.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-success-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-500)}ax-button.ax-outline.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-warning-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-500)}ax-button.ax-outline.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-danger-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-500)}ax-button.ax-outline.ax-neutral{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-neutral-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-neutral-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-neutral-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-neutral-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-neutral-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-neutral-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-neutral-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-neutral-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-neutral-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-neutral-500)}ax-button.ax-outline.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-surface-lowest-text-color), .3);--ax-comp-button-normal-text-color: var(--ax-sys-surface-lowest-text-color);--ax-comp-button-normal-border-color: var(--ax-sys-surface-lowest-border-color);--ax-comp-button-hover-text-color: var(--ax-sys-surface-low-text-color);--ax-comp-button-hover-border-color: var(--ax-sys-surface-low-border-color);--ax-comp-button-pressed-text-color: var(--ax-sys-surface-text-color);--ax-comp-button-pressed-border-color: var(--ax-sys-surface-border-color);--ax-comp-button-focused-text-color: var(--ax-sys-surface-high-text-color);--ax-comp-button-focused-border-color: var(--ax-sys-surface-high-border-color);--ax-comp-button-focused-outline-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-selected-text-color: var(--ax-sys-surface-highest-text-color);--ax-comp-button-selected-bg-color: var(--ax-sys-surface-highest-bg-color);--ax-comp-button-selected-border-color: var(--ax-sys-surface-highest-border-color)}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:-4px;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-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-contrast-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-contrast-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-contrast-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-primary-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-500)}ax-button.ax-twotone.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-contrast-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-contrast-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-contrast-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-success-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-500)}ax-button.ax-twotone.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-contrast-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-contrast-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-contrast-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-danger-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-500)}ax-button.ax-twotone.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-contrast-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-contrast-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-contrast-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-warning-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-500)}ax-button.ax-twotone.ax-neutral{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-neutral-text), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-neutral-contrast-text);--ax-comp-button-normal-bg-color: var(--ax-sys-color-neutral-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-neutral-contrast-text);--ax-comp-button-hover-bg-color: var(--ax-sys-color-neutral-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-neutral-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-neutral-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-neutral-contrast-text);--ax-comp-button-focused-bg-color: var(--ax-sys-color-neutral-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-neutral-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-neutral-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-neutral-500)}ax-button.ax-twotone.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-surface-low-text-color), .3);--ax-comp-button-normal-text-color: var(--ax-sys-surface-low-text-color);--ax-comp-button-normal-bg-color: var(--ax-sys-surface-low-bg-color);--ax-comp-button-hover-text-color: var(--ax-sys-surface-text-color);--ax-comp-button-hover-bg-color: var(--ax-sys-surface-bg-color);--ax-comp-button-pressed-text-color: var(--ax-sys-surface-high-text-color);--ax-comp-button-pressed-bg-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-focused-text-color: var(--ax-sys-surface-high-contrast-text-color);--ax-comp-button-focused-bg-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-selected-text-color: var(--ax-sys-surface-highest-text-color);--ax-comp-button-selected-bg-color: var(--ax-sys-surface-highest-bg-color)}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-blank.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-primary-contrast-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-200)}ax-button.ax-blank.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-success-contrast-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-200)}ax-button.ax-blank.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-warning-contrast-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-200)}ax-button.ax-blank.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-danger-contrast-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-200)}ax-button.ax-blank.ax-neutral{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-neutral-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-neutral-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-neutral-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-neutral-contrast-text);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-neutral-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-neutral-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-neutral-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-neutral-contrast-text);--ax-comp-button-selected-bg-color: var(--ax-sys-color-neutral-200)}ax-button.ax-blank.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-surface-text-color), .3);--ax-comp-button-normal-text-color: var(--ax-sys-surface-lowest-text-color);--ax-comp-button-hover-text-color: var(--ax-sys-surface-low-text-color);--ax-comp-button-hover-bg-color: var(--ax-sys-surface-low-bg-color);--ax-comp-button-pressed-bg-color: var(--ax-sys-surface-bg-color);--ax-comp-button-pressed-text-color: var(--ax-sys-surface-text-color);--ax-comp-button-focused-bg-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-focused-text-color: var(--ax-sys-surface-high-text-color);--ax-comp-button-focused-outline-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-selected-text-color: var(--ax-sys-surface-highest-text-color);--ax-comp-button-selected-bg-color: var(--ax-sys-surface-highest-bg-color)}ax-button.ax-blank{--ax-comp-button-normal-bg-color: transparent}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-link.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-primary-contrast-text)}ax-button.ax-link.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-success-contrast-text)}ax-button.ax-link.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-warning-contrast-text)}ax-button.ax-link.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-danger-contrast-text)}ax-button.ax-link.ax-neutral{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-neutral-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-neutral-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-neutral-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-neutral-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-neutral-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-neutral-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-neutral-contrast-text)}ax-button.ax-link.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-surface-text-color), .3);--ax-comp-button-normal-text-color: var(--ax-sys-surface-lowest-text-color);--ax-comp-button-hover-text-color: var(---ax-sys-surface-low-text-color);--ax-comp-button-pressed-text-color: var(--ax-sys-surface-text-color);--ax-comp-button-focused-text-color: var(--ax-sys-surface-high-text-color);--ax-comp-button-focused-outline-color: var(--ax-sys-surface-high-bg-color);--ax-comp-button-selected-text-color: var(--ax-sys-surface-highest-text-color);--ax-comp-button-selected-bg-color: var(--ax-sys-surface-highest-bg-color)}ax-button.ax-link{--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-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-item.ax-primary{--ax-comp-button-item-text-color: var(--ax-sys-color-primary-500)}ax-button-item.ax-success{--ax-comp-button-item-text-color: var(--ax-sys-color-success-500)}ax-button-item.ax-danger{--ax-comp-button-item-text-color: var(--ax-sys-color-danger-500)}ax-button-item.ax-warning{--ax-comp-button-item-text-color: var(--ax-sys-color-warning-500)}ax-button-item.ax-neutral{--ax-comp-button-item-text-color: var(--ax-sys-color-neutral-500)}ax-button-item.ax-ghost{--ax-comp-button-item-text-color: var(--ax-sys-surface-text-color)}ax-button{position:relative;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);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)}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>button .ax-ripple{background-color:rgba(var(--ax-comp-button-ripple-bg-color))}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:rgba(var(--ax-comp-button-selected-border-color))}\n"] }]
|
407
|
+
], standalone: false, template: "<button\n [axRipple]\n [disabled]=\"disabled\"\n [attr.tabindex]=\"tabIndex\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n (click)=\"_handleClick($event)\"\n [attr.type]=\"type()\"\n>\n <ng-content select=\"ax-loading, ax-loading-spinner\"> </ng-content>\n <ng-content select=\"ax-prefix, ax-icon\"> </ng-content>\n <ng-content select=\"ax-content\"> </ng-content>\n\n @if (text && !loadingText()) {\n <span class=\"ax-button-text\">{{ text }}</span>\n }\n @if (loadingText()) {\n <span class=\"ax-button-text\">{{ loadingText() }}</span>\n }\n\n <ng-content select=\"ax-suffix\"> </ng-content>\n <ng-content select=\"ax-dropdown-panel\"> </ng-content>\n <ng-content select=\".tab-content\"> </ng-content>\n\n <ng-content></ng-content>\n</button>\n", styles: ["ax-button{--ax-comp-button-padding-y: 0;--ax-comp-button-border-radius: var(--ax-sys-border-radius);--ax-comp-button-height: calc(var(--ax-sys-size-base) * var(--ax-comp-button-size-ratio));--ax-comp-button-text-padding-x: .5rem}ax-button ax-prefix{padding-inline-start:var(--ax-comp-button-decorator-padding-x)}ax-button ax-suffix{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-size-ratio: .75;--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-size-ratio: .875;--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-size-ratio: 1;--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-size-ratio: 1.125;--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-size-ratio: 1.125;--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-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-primary), .3);--ax-comp-button-border-width: 1px;--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-700)}ax-button.ax-solid.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-secondary), .3);--ax-comp-button-border-width: 1px;--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-700);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-700)}ax-button.ax-solid.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-success), .3);--ax-comp-button-border-width: 1px;--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-700)}ax-button.ax-solid.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-danger), .3);--ax-comp-button-border-width: 1px;--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-700)}ax-button.ax-solid.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-warning), .3);--ax-comp-button-border-width: 1px;--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-700)}ax-button.ax-solid.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-contrast-ghost), .3);--ax-comp-button-border-width: 1px;--ax-comp-button-normal-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-normal-bg-color: var(--ax-sys-color-ghost-50);--ax-comp-button-normal-border-color: var(--ax-sys-color-ghost-200);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-hover-bg-color: var(--ax-sys-color-ghost-100);--ax-comp-button-hover-border-color: var(--ax-sys-color-ghost-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-ghost-200);--ax-comp-button-pressed-border-color: var(--ax-sys-color-ghost-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-focused-bg-color: var(--ax-sys-color-ghost-300);--ax-comp-button-focused-outline-color: var(--ax-sys-color-ghost-300);--ax-comp-button-focused-border-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-selected-bg-color: var(--ax-sys-color-ghost-300);--ax-comp-button-selected-border-color: var(--ax-sys-color-ghost-300)}ax-button.ax-solid>button:focus-visible,ax-button.ax-solid>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-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-500)}ax-button.ax-outline.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-500)}ax-button.ax-outline.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-500)}ax-button.ax-outline.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-500)}ax-button.ax-outline.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-500);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-600);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-500);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-500)}ax-button.ax-outline.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-ghost-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-ghost-800);--ax-comp-button-normal-border-color: var(--ax-sys-color-ghost-400);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-hover-border-color: var(--ax-sys-color-ghost-500);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-pressed-border-color: var(--ax-sys-color-ghost-600);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-focused-border-color: var(--ax-sys-color-ghost-600);--ax-comp-button-focused-outline-color: var(--ax-sys-color-ghost-600);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-selected-bg-color: var(--ax-sys-color-ghost-300);--ax-comp-button-selected-border-color: var(--ax-sys-color-ghost-300)}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:-4px;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-on-primary), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-contrast-primary);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-primary);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-primary);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-primary);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-500)}ax-button.ax-twotone.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-secondary), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-contrast-secondary);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-secondary);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-secondary);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-secondary);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-500)}ax-button.ax-twotone.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-success), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-contrast-success);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-success);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-success);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-success);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-500)}ax-button.ax-twotone.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-danger), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-contrast-danger);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-danger);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-danger);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-danger);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-500)}ax-button.ax-twotone.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-warning), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-contrast-warning);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-warning);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-warning);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-warning);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-500)}ax-button.ax-twotone.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-contrast-ghost), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-normal-bg-color: var(--ax-sys-color-ghost-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-hover-bg-color: var(--ax-sys-color-ghost-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-ghost-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-focused-bg-color: var(--ax-sys-color-ghost-300);--ax-comp-button-focused-outline-color: var(--ax-sys-color-ghost-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-selected-bg-color: var(--ax-sys-color-ghost-300)}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-blank.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-primary);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-primary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-200)}ax-button.ax-blank.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-secondary);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-secondary);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-200)}ax-button.ax-blank.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-success);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-success);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-200)}ax-button.ax-blank.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-warning);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-warning);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-200)}ax-button.ax-blank.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-danger);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-danger);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-200)}ax-button.ax-blank.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-contrast-ghost), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-ghost-800);--ax-comp-button-hover-bg-color: var(--ax-sys-color-ghost-100);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-ghost-200);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-focused-bg-color: var(--ax-sys-color-ghost-300);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-focused-outline-color: var(--ax-sys-color-ghost-300);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-selected-bg-color: var(--ax-sys-color-ghost-200)}ax-button.ax-blank{--ax-comp-button-normal-bg-color: transparent}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-link.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-primary)}ax-button.ax-link.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-secondary)}ax-button.ax-link.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-success)}ax-button.ax-link.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-warning)}ax-button.ax-link.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-500), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-500);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-600);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-700);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-danger)}ax-button.ax-link.ax-ghost{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-contrast-ghost), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-ghost-800);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-contrast-ghost);--ax-comp-button-focused-outline-color: var(--ax-sys-color-ghost-700);--ax-comp-button-selected-bg-color: var(--ax-sys-color-ghost-200);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-contrast-ghost)}ax-button.ax-link{--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-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-item.ax-primary{--ax-comp-button-item-text-color: var(--ax-sys-color-primary-500)}ax-button-item.ax-secondary{--ax-comp-button-item-text-color: var(--ax-sys-color-secondary-500)}ax-button-item.ax-success{--ax-comp-button-item-text-color: var(--ax-sys-color-success-500)}ax-button-item.ax-danger{--ax-comp-button-item-text-color: var(--ax-sys-color-danger-500)}ax-button-item.ax-warning{--ax-comp-button-item-text-color: var(--ax-sys-color-warning-500)}ax-button-item.ax-ghost{--ax-comp-button-item-text-color: var(--ax-sys-color-on-contrast-ghost)}ax-button{position:relative;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);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)}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"] }]
|
408
408
|
}], propDecorators: { __hostClass: [{
|
409
409
|
type: HostBinding,
|
410
410
|
args: ['class']
|