@acorex/components 20.2.0-next.0 → 20.2.0-next.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/data-table/index.d.ts +16 -2
  2. package/fesm2022/acorex-components-button.mjs +11 -8
  3. package/fesm2022/acorex-components-button.mjs.map +1 -1
  4. package/fesm2022/acorex-components-data-pager.mjs +35 -43
  5. package/fesm2022/acorex-components-data-pager.mjs.map +1 -1
  6. package/fesm2022/acorex-components-data-table.mjs +29 -12
  7. package/fesm2022/acorex-components-data-table.mjs.map +1 -1
  8. package/fesm2022/acorex-components-dropdown.mjs +2 -2
  9. package/fesm2022/acorex-components-dropdown.mjs.map +1 -1
  10. package/fesm2022/acorex-components-rrule.mjs +293 -0
  11. package/fesm2022/acorex-components-rrule.mjs.map +1 -0
  12. package/fesm2022/acorex-components-select-box.mjs +2 -2
  13. package/fesm2022/acorex-components-select-box.mjs.map +1 -1
  14. package/package.json +11 -6
  15. package/rrule/README.md +3 -0
  16. package/rrule/index.d.ts +80 -0
package/fesm2022/acorex-components-button.mjs CHANGED
@@ -2,9 +2,12 @@ import { MXInteractiveComponent, MXColorComponent, AXComponent, AXClosableCompon
2
2
  import { AXDecoratorGenericComponent, AXDecoratorIconComponent, AXDecoratorModule } from '@acorex/components/decorators';
3
3
  import * as i0 from '@angular/core';
4
4
  import { EventEmitter, HostBinding, HostListener, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, input, afterNextRender, ContentChildren, computed, contentChild, model, NgModule } from '@angular/core';
5
+ import * as i2 from '@acorex/core/translation';
6
+ import { AXTranslationModule } from '@acorex/core/translation';
7
+ import * as i1 from '@angular/common';
8
+ import { CommonModule } from '@angular/common';
5
9
  import { classes } from 'polytype';
6
10
  import { AXLoadingComponent, AXLoadingModule } from '@acorex/components/loading';
7
- import { CommonModule } from '@angular/common';
8
11
 
9
12
  /**
10
13
  * Represents a button item with optional content like icons, text, and dropdowns.
@@ -91,14 +94,14 @@ class AXButtonItemComponent extends classes(MXInteractiveComponent, MXColorCompo
91
94
  <ng-content select="ax-loading"> </ng-content>
92
95
  <ng-content select="ax-icon"> </ng-content>
93
96
  @if (text) {
94
- <ax-text>{{ text }}</ax-text>
97
+ <ax-text>{{ text | translate | async }}</ax-text>
95
98
  }
96
99
  </div>
97
100
  <div class="ax-action-item-suffix">
98
101
  <ng-content select="ax-suffix"> </ng-content>
99
102
  </div>
100
103
  <ng-content select="ax-dropdown-panel"> </ng-content>
101
- `, isInline: true, styles: ["ax-button{--ax-comp-button-padding-y: 0;--ax-comp-button-border-radius: var(--ax-sys-border-radius);--ax-comp-button-height: calc(var(--ax-sys-size-base) * var(--ax-comp-button-size-ratio, 1));--ax-comp-button-text-padding-x: .5rem}ax-button ax-prefix{display:flex;padding-inline-start:var(--ax-comp-button-decorator-padding-x)}ax-button ax-suffix{display:flex;padding-inline-end:var(--ax-comp-button-decorator-padding-x)}ax-button.ax-button-icon{--ax-comp-button-decorator-padding-x: 0 !important;font-size:var(--ax-comp-button-icon-only-font-size)}.ax-xs ax-button,ax-button.ax-xs{--ax-comp-button-font-size: .75rem;--ax-comp-button-padding-x: .25rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: .875rem}.ax-sm ax-button,ax-button.ax-sm{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: .5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1rem}.ax-md ax-button,ax-button{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: 1rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: 1.25rem}.ax-lg ax-button,ax-button.ax-lg{--ax-comp-button-font-size: 1.125rem;--ax-comp-button-padding-x: 1.125rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.5rem}.ax-xl ax-button,ax-button.ax-xl{--ax-comp-button-font-size: 1.5rem;--ax-comp-button-padding-x: 1.5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.75rem}ax-button.ax-solid{--ax-comp-button-border-width: 1px}ax-button.ax-solid>button:focus-visible,ax-button.ax-solid>button.ax-state-focus{outline:2px solid;outline-offset:3px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-solid.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-darkest-surface)}ax-button.ax-solid.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-darkest-surface)}ax-button.ax-solid.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-darkest-surface)}ax-button.ax-solid.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-darkest-surface)}ax-button.ax-solid.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-darkest-surface)}ax-button.ax-solid.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-darkest-surface)}ax-button.ax-solid.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-darkest-surface)}ax-button.ax-solid.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-darkest-surface)}ax-button.ax-solid.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-darkest-surface)}ax-button.ax-solid.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-darkest-surface)}ax-button.ax-solid.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accnt6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-darkest-surface)}ax-button.ax-solid.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-darkest-surface)}ax-button.ax-solid.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-solid.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-outline.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-outline.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-outline{--ax-comp-button-border-width: 1px;--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-hover-bg-color: transparent;--ax-comp-button-pressed-bg-color: transparent;--ax-comp-button-focused-bg-color: transparent}ax-button.ax-outline>button:focus-visible,ax-button.ax-outline>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-outline.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-outline.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-outline.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-outline.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-outline.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-outline.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-outline.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-outline.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-outline.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-outline.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-outline.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-outline.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-surface)}ax-button.ax-twotone.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-darker-surface)}.ax-dark ax-button.ax-twotone.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-lighter-surface)}ax-button.ax-twotone{--ax-comp-button-border-width: 1px}ax-button.ax-twotone>button:focus-visible,ax-button.ax-twotone>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-twotone.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-twotone.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-twotone.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-twotone.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-twotone.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-twotone.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-twotone.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-twotone.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-twotone.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-twotone.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-twotone.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accnt6-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accnt6-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-twotone.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-surface)}ax-button.ax-blank.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-blank.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-blank{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-blank>button:focus-visible,ax-button.ax-blank>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-blank.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface)}ax-button.ax-blank.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-blank.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface)}ax-button.ax-blank.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface)}ax-button.ax-blank.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface)}ax-button.ax-blank.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-blank.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-blank.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-blank.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-blank.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-blank.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-blank.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface)}ax-button.ax-link.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-link.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-link{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-link>button:focus-visible,ax-button.ax-link>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-link.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface)}ax-button.ax-link.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface)}ax-button.ax-link.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface)}ax-button.ax-link.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface)}ax-button.ax-link.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface)}ax-button.ax-link.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface)}ax-button.ax-link.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface)}ax-button.ax-link.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface)}ax-button.ax-link.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface)}ax-button.ax-link.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface)}ax-button.ax-link.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface)}ax-button.ax-link.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface)}ax-button-item.ax-primary{--ax-comp-button-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-primary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-primary-surface)}ax-button-item.ax-secondary{--ax-comp-button-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-secondary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-secondary-surface)}ax-button-item.ax-success{--ax-comp-button-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-success-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-success-surface)}ax-button-item.ax-warning{--ax-comp-button-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-warning-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-warning-surface)}ax-button-item.ax-danger{--ax-comp-button-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-danger-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-danger-surface)}ax-button-item.ax-accent1{--ax-comp-button-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent1-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent1-surface)}ax-button-item.ax-accent2{--ax-comp-button-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent2-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent2-surface)}ax-button-item.ax-accent3{--ax-comp-button-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent3-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent3-surface)}ax-button-item.ax-accent4{--ax-comp-button-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent4-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent4-surface)}ax-button-item.ax-accent5{--ax-comp-button-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent5-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent5-surface)}ax-button-item.ax-accnt6{--ax-comp-button-item-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accnt6-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accnt6-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accnt6-surface)}ax-button-item.ax-accent7{--ax-comp-button-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent7-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent7-surface)}ax-button-item{background-color:rgba(var(--ax-comp-button-item-bg-color));color:rgba(var(--ax-comp-button-item-text-color))}ax-button-item.ax-state-selected{background-color:rgba(var(--ax-comp-button-item-selected-bg-color, var(--ax-sys-color-surface)));color:rgba(var(--ax-comp-button-item-selected-text-color))}ax-button-item:hover:not(.ax-state-selected){background-color:rgba(var(--ax-comp-button-item-hover-bg-color, var(--ax-sys-color-surface)))!important;color:rgba(var(--ax-comp-button-item-hover-text-color))}\n"], dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
104
+ `, isInline: true, styles: ["ax-button{--ax-comp-button-padding-y: 0;--ax-comp-button-border-radius: var(--ax-sys-border-radius);--ax-comp-button-height: calc(var(--ax-sys-size-base) * var(--ax-comp-button-size-ratio, 1));--ax-comp-button-text-padding-x: .5rem}ax-button ax-prefix{display:flex;padding-inline-start:var(--ax-comp-button-decorator-padding-x)}ax-button ax-suffix{display:flex;padding-inline-end:var(--ax-comp-button-decorator-padding-x)}ax-button.ax-button-icon{--ax-comp-button-decorator-padding-x: 0 !important;font-size:var(--ax-comp-button-icon-only-font-size)}.ax-xs ax-button,ax-button.ax-xs{--ax-comp-button-font-size: .75rem;--ax-comp-button-padding-x: .25rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: .875rem}.ax-sm ax-button,ax-button.ax-sm{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: .5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1rem}.ax-md ax-button,ax-button{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: 1rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: 1.25rem}.ax-lg ax-button,ax-button.ax-lg{--ax-comp-button-font-size: 1.125rem;--ax-comp-button-padding-x: 1.125rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.5rem}.ax-xl ax-button,ax-button.ax-xl{--ax-comp-button-font-size: 1.5rem;--ax-comp-button-padding-x: 1.5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.75rem}ax-button.ax-solid{--ax-comp-button-border-width: 1px}ax-button.ax-solid>button:focus-visible,ax-button.ax-solid>button.ax-state-focus{outline:2px solid;outline-offset:3px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-solid.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-darkest-surface)}ax-button.ax-solid.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-darkest-surface)}ax-button.ax-solid.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-darkest-surface)}ax-button.ax-solid.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-darkest-surface)}ax-button.ax-solid.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-darkest-surface)}ax-button.ax-solid.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-darkest-surface)}ax-button.ax-solid.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-darkest-surface)}ax-button.ax-solid.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-darkest-surface)}ax-button.ax-solid.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-darkest-surface)}ax-button.ax-solid.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-darkest-surface)}ax-button.ax-solid.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accnt6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-darkest-surface)}ax-button.ax-solid.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-darkest-surface)}ax-button.ax-solid.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-solid.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-outline.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-outline.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-outline{--ax-comp-button-border-width: 1px;--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-hover-bg-color: transparent;--ax-comp-button-pressed-bg-color: transparent;--ax-comp-button-focused-bg-color: transparent}ax-button.ax-outline>button:focus-visible,ax-button.ax-outline>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-outline.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-outline.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-outline.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-outline.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-outline.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-outline.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-outline.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-outline.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-outline.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-outline.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-outline.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-outline.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-surface)}ax-button.ax-twotone.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-darker-surface)}.ax-dark ax-button.ax-twotone.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-lighter-surface)}ax-button.ax-twotone{--ax-comp-button-border-width: 1px}ax-button.ax-twotone>button:focus-visible,ax-button.ax-twotone>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-twotone.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-twotone.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-twotone.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-twotone.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-twotone.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-twotone.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-twotone.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-twotone.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-twotone.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-twotone.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-twotone.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accnt6-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accnt6-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-twotone.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-surface)}ax-button.ax-blank.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-blank.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-blank{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-blank>button:focus-visible,ax-button.ax-blank>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-blank.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface)}ax-button.ax-blank.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-blank.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface)}ax-button.ax-blank.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface)}ax-button.ax-blank.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface)}ax-button.ax-blank.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-blank.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-blank.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-blank.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-blank.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-blank.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-blank.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface)}ax-button.ax-link.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-link.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-link{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-link>button:focus-visible,ax-button.ax-link>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-link.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface)}ax-button.ax-link.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface)}ax-button.ax-link.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface)}ax-button.ax-link.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface)}ax-button.ax-link.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface)}ax-button.ax-link.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface)}ax-button.ax-link.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface)}ax-button.ax-link.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface)}ax-button.ax-link.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface)}ax-button.ax-link.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface)}ax-button.ax-link.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface)}ax-button.ax-link.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface)}ax-button-item.ax-primary{--ax-comp-button-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-primary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-primary-surface)}ax-button-item.ax-secondary{--ax-comp-button-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-secondary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-secondary-surface)}ax-button-item.ax-success{--ax-comp-button-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-success-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-success-surface)}ax-button-item.ax-warning{--ax-comp-button-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-warning-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-warning-surface)}ax-button-item.ax-danger{--ax-comp-button-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-danger-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-danger-surface)}ax-button-item.ax-accent1{--ax-comp-button-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent1-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent1-surface)}ax-button-item.ax-accent2{--ax-comp-button-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent2-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent2-surface)}ax-button-item.ax-accent3{--ax-comp-button-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent3-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent3-surface)}ax-button-item.ax-accent4{--ax-comp-button-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent4-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent4-surface)}ax-button-item.ax-accent5{--ax-comp-button-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent5-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent5-surface)}ax-button-item.ax-accnt6{--ax-comp-button-item-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accnt6-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accnt6-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accnt6-surface)}ax-button-item.ax-accent7{--ax-comp-button-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent7-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent7-surface)}ax-button-item{background-color:rgba(var(--ax-comp-button-item-bg-color));color:rgba(var(--ax-comp-button-item-text-color))}ax-button-item.ax-state-selected{background-color:rgba(var(--ax-comp-button-item-selected-bg-color, var(--ax-sys-color-surface)));color:rgba(var(--ax-comp-button-item-selected-text-color))}ax-button-item:hover:not(.ax-state-selected){background-color:rgba(var(--ax-comp-button-item-hover-bg-color, var(--ax-sys-color-surface)))!important;color:rgba(var(--ax-comp-button-item-hover-text-color))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
102
105
  }
103
106
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXButtonItemComponent, decorators: [{
104
107
  type: Component,
@@ -108,14 +111,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
108
111
  <ng-content select="ax-loading"> </ng-content>
109
112
  <ng-content select="ax-icon"> </ng-content>
110
113
  @if (text) {
111
- <ax-text>{{ text }}</ax-text>
114
+ <ax-text>{{ text | translate | async }}</ax-text>
112
115
  }
113
116
  </div>
114
117
  <div class="ax-action-item-suffix">
115
118
  <ng-content select="ax-suffix"> </ng-content>
116
119
  </div>
117
120
  <ng-content select="ax-dropdown-panel"> </ng-content>
118
- `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['color', 'disabled'], outputs: ['onClick', 'onFocus', 'onBlur', 'disabledChange'], imports: [AXDecoratorGenericComponent], providers: [{ provide: AXComponent, useExisting: AXButtonItemComponent }], styles: ["ax-button{--ax-comp-button-padding-y: 0;--ax-comp-button-border-radius: var(--ax-sys-border-radius);--ax-comp-button-height: calc(var(--ax-sys-size-base) * var(--ax-comp-button-size-ratio, 1));--ax-comp-button-text-padding-x: .5rem}ax-button ax-prefix{display:flex;padding-inline-start:var(--ax-comp-button-decorator-padding-x)}ax-button ax-suffix{display:flex;padding-inline-end:var(--ax-comp-button-decorator-padding-x)}ax-button.ax-button-icon{--ax-comp-button-decorator-padding-x: 0 !important;font-size:var(--ax-comp-button-icon-only-font-size)}.ax-xs ax-button,ax-button.ax-xs{--ax-comp-button-font-size: .75rem;--ax-comp-button-padding-x: .25rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: .875rem}.ax-sm ax-button,ax-button.ax-sm{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: .5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1rem}.ax-md ax-button,ax-button{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: 1rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: 1.25rem}.ax-lg ax-button,ax-button.ax-lg{--ax-comp-button-font-size: 1.125rem;--ax-comp-button-padding-x: 1.125rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.5rem}.ax-xl ax-button,ax-button.ax-xl{--ax-comp-button-font-size: 1.5rem;--ax-comp-button-padding-x: 1.5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.75rem}ax-button.ax-solid{--ax-comp-button-border-width: 1px}ax-button.ax-solid>button:focus-visible,ax-button.ax-solid>button.ax-state-focus{outline:2px solid;outline-offset:3px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-solid.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-darkest-surface)}ax-button.ax-solid.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-darkest-surface)}ax-button.ax-solid.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-darkest-surface)}ax-button.ax-solid.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-darkest-surface)}ax-button.ax-solid.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-darkest-surface)}ax-button.ax-solid.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-darkest-surface)}ax-button.ax-solid.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-darkest-surface)}ax-button.ax-solid.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-darkest-surface)}ax-button.ax-solid.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-darkest-surface)}ax-button.ax-solid.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-darkest-surface)}ax-button.ax-solid.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accnt6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-darkest-surface)}ax-button.ax-solid.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-darkest-surface)}ax-button.ax-solid.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-solid.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-outline.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-outline.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-outline{--ax-comp-button-border-width: 1px;--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-hover-bg-color: transparent;--ax-comp-button-pressed-bg-color: transparent;--ax-comp-button-focused-bg-color: transparent}ax-button.ax-outline>button:focus-visible,ax-button.ax-outline>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-outline.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-outline.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-outline.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-outline.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-outline.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-outline.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-outline.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-outline.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-outline.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-outline.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-outline.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-outline.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-surface)}ax-button.ax-twotone.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-darker-surface)}.ax-dark ax-button.ax-twotone.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-lighter-surface)}ax-button.ax-twotone{--ax-comp-button-border-width: 1px}ax-button.ax-twotone>button:focus-visible,ax-button.ax-twotone>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-twotone.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-twotone.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-twotone.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-twotone.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-twotone.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-twotone.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-twotone.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-twotone.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-twotone.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-twotone.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-twotone.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accnt6-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accnt6-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-twotone.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-surface)}ax-button.ax-blank.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-blank.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-blank{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-blank>button:focus-visible,ax-button.ax-blank>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-blank.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface)}ax-button.ax-blank.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-blank.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface)}ax-button.ax-blank.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface)}ax-button.ax-blank.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface)}ax-button.ax-blank.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-blank.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-blank.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-blank.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-blank.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-blank.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-blank.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface)}ax-button.ax-link.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-link.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-link{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-link>button:focus-visible,ax-button.ax-link>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-link.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface)}ax-button.ax-link.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface)}ax-button.ax-link.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface)}ax-button.ax-link.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface)}ax-button.ax-link.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface)}ax-button.ax-link.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface)}ax-button.ax-link.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface)}ax-button.ax-link.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface)}ax-button.ax-link.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface)}ax-button.ax-link.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface)}ax-button.ax-link.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface)}ax-button.ax-link.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface)}ax-button-item.ax-primary{--ax-comp-button-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-primary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-primary-surface)}ax-button-item.ax-secondary{--ax-comp-button-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-secondary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-secondary-surface)}ax-button-item.ax-success{--ax-comp-button-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-success-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-success-surface)}ax-button-item.ax-warning{--ax-comp-button-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-warning-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-warning-surface)}ax-button-item.ax-danger{--ax-comp-button-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-danger-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-danger-surface)}ax-button-item.ax-accent1{--ax-comp-button-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent1-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent1-surface)}ax-button-item.ax-accent2{--ax-comp-button-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent2-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent2-surface)}ax-button-item.ax-accent3{--ax-comp-button-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent3-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent3-surface)}ax-button-item.ax-accent4{--ax-comp-button-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent4-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent4-surface)}ax-button-item.ax-accent5{--ax-comp-button-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent5-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent5-surface)}ax-button-item.ax-accnt6{--ax-comp-button-item-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accnt6-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accnt6-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accnt6-surface)}ax-button-item.ax-accent7{--ax-comp-button-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent7-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent7-surface)}ax-button-item{background-color:rgba(var(--ax-comp-button-item-bg-color));color:rgba(var(--ax-comp-button-item-text-color))}ax-button-item.ax-state-selected{background-color:rgba(var(--ax-comp-button-item-selected-bg-color, var(--ax-sys-color-surface)));color:rgba(var(--ax-comp-button-item-selected-text-color))}ax-button-item:hover:not(.ax-state-selected){background-color:rgba(var(--ax-comp-button-item-hover-bg-color, var(--ax-sys-color-surface)))!important;color:rgba(var(--ax-comp-button-item-hover-text-color))}\n"] }]
121
+ `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['color', 'disabled'], outputs: ['onClick', 'onFocus', 'onBlur', 'disabledChange'], imports: [CommonModule, AXDecoratorGenericComponent, AXTranslationModule], providers: [{ provide: AXComponent, useExisting: AXButtonItemComponent }], styles: ["ax-button{--ax-comp-button-padding-y: 0;--ax-comp-button-border-radius: var(--ax-sys-border-radius);--ax-comp-button-height: calc(var(--ax-sys-size-base) * var(--ax-comp-button-size-ratio, 1));--ax-comp-button-text-padding-x: .5rem}ax-button ax-prefix{display:flex;padding-inline-start:var(--ax-comp-button-decorator-padding-x)}ax-button ax-suffix{display:flex;padding-inline-end:var(--ax-comp-button-decorator-padding-x)}ax-button.ax-button-icon{--ax-comp-button-decorator-padding-x: 0 !important;font-size:var(--ax-comp-button-icon-only-font-size)}.ax-xs ax-button,ax-button.ax-xs{--ax-comp-button-font-size: .75rem;--ax-comp-button-padding-x: .25rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: .875rem}.ax-sm ax-button,ax-button.ax-sm{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: .5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1rem}.ax-md ax-button,ax-button{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: 1rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: 1.25rem}.ax-lg ax-button,ax-button.ax-lg{--ax-comp-button-font-size: 1.125rem;--ax-comp-button-padding-x: 1.125rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.5rem}.ax-xl ax-button,ax-button.ax-xl{--ax-comp-button-font-size: 1.5rem;--ax-comp-button-padding-x: 1.5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.75rem}ax-button.ax-solid{--ax-comp-button-border-width: 1px}ax-button.ax-solid>button:focus-visible,ax-button.ax-solid>button.ax-state-focus{outline:2px solid;outline-offset:3px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-solid.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-darkest-surface)}ax-button.ax-solid.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-darkest-surface)}ax-button.ax-solid.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-darkest-surface)}ax-button.ax-solid.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-darkest-surface)}ax-button.ax-solid.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-darkest-surface)}ax-button.ax-solid.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-darkest-surface)}ax-button.ax-solid.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-darkest-surface)}ax-button.ax-solid.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-darkest-surface)}ax-button.ax-solid.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-darkest-surface)}ax-button.ax-solid.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-darkest-surface)}ax-button.ax-solid.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accnt6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-darkest-surface)}ax-button.ax-solid.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-darkest-surface)}ax-button.ax-solid.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-solid.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-outline.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-outline.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-outline{--ax-comp-button-border-width: 1px;--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-hover-bg-color: transparent;--ax-comp-button-pressed-bg-color: transparent;--ax-comp-button-focused-bg-color: transparent}ax-button.ax-outline>button:focus-visible,ax-button.ax-outline>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-outline.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-outline.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-outline.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-outline.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-outline.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-outline.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-outline.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-outline.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-outline.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-outline.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-outline.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-outline.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-surface)}ax-button.ax-twotone.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-darker-surface)}.ax-dark ax-button.ax-twotone.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-lighter-surface)}ax-button.ax-twotone{--ax-comp-button-border-width: 1px}ax-button.ax-twotone>button:focus-visible,ax-button.ax-twotone>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-twotone.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-twotone.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-twotone.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-twotone.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-twotone.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-twotone.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-twotone.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-twotone.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-twotone.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-twotone.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-twotone.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accnt6-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accnt6-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-twotone.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-surface)}ax-button.ax-blank.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-blank.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-blank{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-blank>button:focus-visible,ax-button.ax-blank>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-blank.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface)}ax-button.ax-blank.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-blank.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface)}ax-button.ax-blank.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface)}ax-button.ax-blank.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface)}ax-button.ax-blank.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-blank.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-blank.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-blank.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-blank.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-blank.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-blank.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface)}ax-button.ax-link.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-link.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-link{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-link>button:focus-visible,ax-button.ax-link>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-link.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface)}ax-button.ax-link.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface)}ax-button.ax-link.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface)}ax-button.ax-link.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface)}ax-button.ax-link.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface)}ax-button.ax-link.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface)}ax-button.ax-link.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface)}ax-button.ax-link.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface)}ax-button.ax-link.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface)}ax-button.ax-link.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface)}ax-button.ax-link.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface)}ax-button.ax-link.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface)}ax-button-item.ax-primary{--ax-comp-button-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-primary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-primary-surface)}ax-button-item.ax-secondary{--ax-comp-button-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-secondary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-secondary-surface)}ax-button-item.ax-success{--ax-comp-button-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-success-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-success-surface)}ax-button-item.ax-warning{--ax-comp-button-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-warning-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-warning-surface)}ax-button-item.ax-danger{--ax-comp-button-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-danger-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-danger-surface)}ax-button-item.ax-accent1{--ax-comp-button-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent1-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent1-surface)}ax-button-item.ax-accent2{--ax-comp-button-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent2-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent2-surface)}ax-button-item.ax-accent3{--ax-comp-button-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent3-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent3-surface)}ax-button-item.ax-accent4{--ax-comp-button-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent4-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent4-surface)}ax-button-item.ax-accent5{--ax-comp-button-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent5-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent5-surface)}ax-button-item.ax-accnt6{--ax-comp-button-item-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accnt6-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accnt6-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accnt6-surface)}ax-button-item.ax-accent7{--ax-comp-button-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent7-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent7-surface)}ax-button-item{background-color:rgba(var(--ax-comp-button-item-bg-color));color:rgba(var(--ax-comp-button-item-text-color))}ax-button-item.ax-state-selected{background-color:rgba(var(--ax-comp-button-item-selected-bg-color, var(--ax-sys-color-surface)));color:rgba(var(--ax-comp-button-item-selected-text-color))}ax-button-item:hover:not(.ax-state-selected){background-color:rgba(var(--ax-comp-button-item-hover-bg-color, var(--ax-sys-color-surface)))!important;color:rgba(var(--ax-comp-button-item-hover-text-color))}\n"] }]
119
122
  }], propDecorators: { text: [{
120
123
  type: Input
121
124
  }], selected: [{
@@ -390,7 +393,7 @@ class AXButtonComponent extends MXButtonBaseComponent {
390
393
  { provide: AXComponent, useExisting: AXButtonComponent },
391
394
  { provide: AXButtonItemComponent, useExisting: AXButtonComponent },
392
395
  { provide: AXFocusableComponent, useExisting: AXButtonComponent },
393
- ], queries: [{ propertyName: "loadingIcon", first: true, predicate: AXLoadingComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\n [axRipple]\n [disabled]=\"disabled\"\n [attr.tabindex]=\"tabIndex\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n (click)=\"_handleClick($event)\"\n [attr.type]=\"type()\"\n>\n <ng-content select=\"ax-loading, ax-loading-spinner\"> </ng-content>\n\n @if (showIcon()) {\n <ng-content select=\"ax-prefix, ax-icon\"> </ng-content>\n }\n\n <ng-content select=\"ax-content\"> </ng-content>\n\n @if (text && !loadingText() && !iconOnly()) {\n <span class=\"ax-button-text\">{{ text }}</span>\n }\n\n @if (loadingText()) {\n <span class=\"ax-button-text\">{{ loadingText() }}</span>\n }\n\n <ng-content select=\"ax-suffix\"> </ng-content>\n <ng-content select=\"ax-dropdown-panel\"> </ng-content>\n <ng-content select=\".tab-content\"> </ng-content>\n\n <ng-content></ng-content>\n</button>\n", styles: ["ax-button{--ax-comp-button-padding-y: 0;--ax-comp-button-border-radius: var(--ax-sys-border-radius);--ax-comp-button-height: calc(var(--ax-sys-size-base) * var(--ax-comp-button-size-ratio, 1));--ax-comp-button-text-padding-x: .5rem}ax-button ax-prefix{display:flex;padding-inline-start:var(--ax-comp-button-decorator-padding-x)}ax-button ax-suffix{display:flex;padding-inline-end:var(--ax-comp-button-decorator-padding-x)}ax-button.ax-button-icon{--ax-comp-button-decorator-padding-x: 0 !important;font-size:var(--ax-comp-button-icon-only-font-size)}.ax-xs ax-button,ax-button.ax-xs{--ax-comp-button-font-size: .75rem;--ax-comp-button-padding-x: .25rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: .875rem}.ax-sm ax-button,ax-button.ax-sm{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: .5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1rem}.ax-md ax-button,ax-button{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: 1rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: 1.25rem}.ax-lg ax-button,ax-button.ax-lg{--ax-comp-button-font-size: 1.125rem;--ax-comp-button-padding-x: 1.125rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.5rem}.ax-xl ax-button,ax-button.ax-xl{--ax-comp-button-font-size: 1.5rem;--ax-comp-button-padding-x: 1.5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.75rem}ax-button.ax-solid{--ax-comp-button-border-width: 1px}ax-button.ax-solid>button:focus-visible,ax-button.ax-solid>button.ax-state-focus{outline:2px solid;outline-offset:3px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-solid.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-darkest-surface)}ax-button.ax-solid.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-darkest-surface)}ax-button.ax-solid.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-darkest-surface)}ax-button.ax-solid.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-darkest-surface)}ax-button.ax-solid.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-darkest-surface)}ax-button.ax-solid.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-darkest-surface)}ax-button.ax-solid.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-darkest-surface)}ax-button.ax-solid.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-darkest-surface)}ax-button.ax-solid.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-darkest-surface)}ax-button.ax-solid.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-darkest-surface)}ax-button.ax-solid.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accnt6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-darkest-surface)}ax-button.ax-solid.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-darkest-surface)}ax-button.ax-solid.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-solid.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-outline.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-outline.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-outline{--ax-comp-button-border-width: 1px;--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-hover-bg-color: transparent;--ax-comp-button-pressed-bg-color: transparent;--ax-comp-button-focused-bg-color: transparent}ax-button.ax-outline>button:focus-visible,ax-button.ax-outline>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-outline.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-outline.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-outline.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-outline.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-outline.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-outline.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-outline.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-outline.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-outline.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-outline.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-outline.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-outline.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-surface)}ax-button.ax-twotone.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-darker-surface)}.ax-dark ax-button.ax-twotone.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-lighter-surface)}ax-button.ax-twotone{--ax-comp-button-border-width: 1px}ax-button.ax-twotone>button:focus-visible,ax-button.ax-twotone>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-twotone.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-twotone.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-twotone.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-twotone.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-twotone.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-twotone.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-twotone.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-twotone.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-twotone.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-twotone.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-twotone.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accnt6-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accnt6-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-twotone.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-surface)}ax-button.ax-blank.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-blank.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-blank{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-blank>button:focus-visible,ax-button.ax-blank>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-blank.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface)}ax-button.ax-blank.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-blank.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface)}ax-button.ax-blank.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface)}ax-button.ax-blank.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface)}ax-button.ax-blank.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-blank.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-blank.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-blank.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-blank.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-blank.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-blank.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface)}ax-button.ax-link.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-link.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-link{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-link>button:focus-visible,ax-button.ax-link>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-link.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface)}ax-button.ax-link.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface)}ax-button.ax-link.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface)}ax-button.ax-link.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface)}ax-button.ax-link.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface)}ax-button.ax-link.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface)}ax-button.ax-link.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface)}ax-button.ax-link.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface)}ax-button.ax-link.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface)}ax-button.ax-link.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface)}ax-button.ax-link.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface)}ax-button.ax-link.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface)}ax-button-item.ax-primary{--ax-comp-button-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-primary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-primary-surface)}ax-button-item.ax-secondary{--ax-comp-button-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-secondary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-secondary-surface)}ax-button-item.ax-success{--ax-comp-button-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-success-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-success-surface)}ax-button-item.ax-warning{--ax-comp-button-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-warning-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-warning-surface)}ax-button-item.ax-danger{--ax-comp-button-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-danger-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-danger-surface)}ax-button-item.ax-accent1{--ax-comp-button-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent1-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent1-surface)}ax-button-item.ax-accent2{--ax-comp-button-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent2-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent2-surface)}ax-button-item.ax-accent3{--ax-comp-button-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent3-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent3-surface)}ax-button-item.ax-accent4{--ax-comp-button-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent4-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent4-surface)}ax-button-item.ax-accent5{--ax-comp-button-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent5-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent5-surface)}ax-button-item.ax-accnt6{--ax-comp-button-item-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accnt6-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accnt6-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accnt6-surface)}ax-button-item.ax-accent7{--ax-comp-button-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent7-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent7-surface)}ax-button{position:relative;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;transition-property:background-color,border-color,color;transition-timing-function:var(--ax-sys-transition-timing-function);transition-duration:var(--ax-sys-transition-duration);color:rgba(var(--ax-comp-button-normal-text-color));background-color:rgba(var(--ax-comp-button-normal-bg-color));border-color:rgba(var(--ax-comp-button-normal-border-color));border-width:var(--ax-comp-button-border-width, 0px);font-family:var(--ax-comp-button-font-family);font-size:var(--ax-comp-button-font-size);font-weight:var(--ax-comp-button-font-weight);border-radius:var(--ax-comp-button-border-radius);height:var(--ax-comp-button-height);line-height:var(--ax-comp-button-height)}ax-button>button{position:relative;display:inline-flex;height:100%;width:100%;align-items:center;justify-content:center;overflow:hidden;border-radius:inherit;outline-color:transparent;-webkit-user-select:none;user-select:none;padding:var(--ax-comp-button-padding-y) var(--ax-comp-button-padding-x)}ax-button>button .ax-button-text{white-space:nowrap;padding:0 var(--ax-comp-button-text-padding-x);font-weight:500}ax-button:hover:not(ax-button:hover.ax-state-disabled,ax-button:hover.ax-state-loading,ax-button:hover.ax-state-selected){color:rgba(var(--ax-comp-button-hover-text-color));background-color:rgba(var(--ax-comp-button-hover-bg-color));border-color:rgba(var(--ax-comp-button-hover-border-color))}ax-button:active:not(ax-button:active.ax-state-disabled,ax-button:active.ax-state-loading,ax-button:active.ax-state-selected){color:rgba(var(--ax-comp-button-pressed-text-color));background-color:rgba(var(--ax-comp-button-pressed-bg-color));border-color:rgba(var(--ax-comp-button-pressed-border-color))}ax-button.ax-state-disabled,ax-button.ax-state-loading{opacity:.5}ax-button.ax-state-disabled>button,ax-button.ax-state-loading>button{cursor:not-allowed}ax-button.ax-button-icon{height:var(--ax-comp-button-height);width:var(--ax-comp-button-height)}ax-button.ax-state-selected{color:rgba(var(--ax-comp-button-selected-text-color));background-color:rgba(var(--ax-comp-button-selected-bg-color));border-color:rgba(var(--ax-comp-button-selected-border-color))}\n"], dependencies: [{ kind: "directive", type: AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
396
+ ], queries: [{ propertyName: "loadingIcon", first: true, predicate: AXLoadingComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\n [axRipple]\n [disabled]=\"disabled\"\n [attr.tabindex]=\"tabIndex\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n (click)=\"_handleClick($event)\"\n [attr.type]=\"type()\"\n>\n <ng-content select=\"ax-loading, ax-loading-spinner\"> </ng-content>\n\n @if (showIcon()) {\n <ng-content select=\"ax-prefix, ax-icon\"> </ng-content>\n }\n\n <ng-content select=\"ax-content\"> </ng-content>\n\n @if (text && !loadingText() && !iconOnly()) {\n <span class=\"ax-button-text\">{{ text | translate | async }}</span>\n }\n\n @if (loadingText()) {\n <span class=\"ax-button-text\">{{ loadingText() }}</span>\n }\n\n <ng-content select=\"ax-suffix\"> </ng-content>\n <ng-content select=\"ax-dropdown-panel\"> </ng-content>\n <ng-content select=\".tab-content\"> </ng-content>\n\n <ng-content></ng-content>\n</button>\n", styles: ["ax-button{--ax-comp-button-padding-y: 0;--ax-comp-button-border-radius: var(--ax-sys-border-radius);--ax-comp-button-height: calc(var(--ax-sys-size-base) * var(--ax-comp-button-size-ratio, 1));--ax-comp-button-text-padding-x: .5rem}ax-button ax-prefix{display:flex;padding-inline-start:var(--ax-comp-button-decorator-padding-x)}ax-button ax-suffix{display:flex;padding-inline-end:var(--ax-comp-button-decorator-padding-x)}ax-button.ax-button-icon{--ax-comp-button-decorator-padding-x: 0 !important;font-size:var(--ax-comp-button-icon-only-font-size)}.ax-xs ax-button,ax-button.ax-xs{--ax-comp-button-font-size: .75rem;--ax-comp-button-padding-x: .25rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: .875rem}.ax-sm ax-button,ax-button.ax-sm{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: .5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1rem}.ax-md ax-button,ax-button{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: 1rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: 1.25rem}.ax-lg ax-button,ax-button.ax-lg{--ax-comp-button-font-size: 1.125rem;--ax-comp-button-padding-x: 1.125rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.5rem}.ax-xl ax-button,ax-button.ax-xl{--ax-comp-button-font-size: 1.5rem;--ax-comp-button-padding-x: 1.5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.75rem}ax-button.ax-solid{--ax-comp-button-border-width: 1px}ax-button.ax-solid>button:focus-visible,ax-button.ax-solid>button.ax-state-focus{outline:2px solid;outline-offset:3px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-solid.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-darkest-surface)}ax-button.ax-solid.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-darkest-surface)}ax-button.ax-solid.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-darkest-surface)}ax-button.ax-solid.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-darkest-surface)}ax-button.ax-solid.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-darkest-surface)}ax-button.ax-solid.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-darkest-surface)}ax-button.ax-solid.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-darkest-surface)}ax-button.ax-solid.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-darkest-surface)}ax-button.ax-solid.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-darkest-surface)}ax-button.ax-solid.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-darkest-surface)}ax-button.ax-solid.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accnt6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-darkest-surface)}ax-button.ax-solid.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-darkest-surface)}ax-button.ax-solid.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-solid.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-outline.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-outline.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-outline{--ax-comp-button-border-width: 1px;--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-hover-bg-color: transparent;--ax-comp-button-pressed-bg-color: transparent;--ax-comp-button-focused-bg-color: transparent}ax-button.ax-outline>button:focus-visible,ax-button.ax-outline>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-outline.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-outline.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-outline.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-outline.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-outline.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-outline.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-outline.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-outline.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-outline.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-outline.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-outline.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-outline.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-surface)}ax-button.ax-twotone.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-darker-surface)}.ax-dark ax-button.ax-twotone.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-lighter-surface)}ax-button.ax-twotone{--ax-comp-button-border-width: 1px}ax-button.ax-twotone>button:focus-visible,ax-button.ax-twotone>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-twotone.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-twotone.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-twotone.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-twotone.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-twotone.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-twotone.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-twotone.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-twotone.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-twotone.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-twotone.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-twotone.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accnt6-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accnt6-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-twotone.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-surface)}ax-button.ax-blank.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-blank.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-blank{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-blank>button:focus-visible,ax-button.ax-blank>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-blank.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface)}ax-button.ax-blank.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-blank.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface)}ax-button.ax-blank.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface)}ax-button.ax-blank.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface)}ax-button.ax-blank.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-blank.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-blank.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-blank.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-blank.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-blank.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-blank.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface)}ax-button.ax-link.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-link.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-link{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-link>button:focus-visible,ax-button.ax-link>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-link.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface)}ax-button.ax-link.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface)}ax-button.ax-link.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface)}ax-button.ax-link.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface)}ax-button.ax-link.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface)}ax-button.ax-link.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface)}ax-button.ax-link.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface)}ax-button.ax-link.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface)}ax-button.ax-link.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface)}ax-button.ax-link.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface)}ax-button.ax-link.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface)}ax-button.ax-link.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface)}ax-button-item.ax-primary{--ax-comp-button-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-primary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-primary-surface)}ax-button-item.ax-secondary{--ax-comp-button-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-secondary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-secondary-surface)}ax-button-item.ax-success{--ax-comp-button-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-success-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-success-surface)}ax-button-item.ax-warning{--ax-comp-button-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-warning-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-warning-surface)}ax-button-item.ax-danger{--ax-comp-button-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-danger-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-danger-surface)}ax-button-item.ax-accent1{--ax-comp-button-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent1-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent1-surface)}ax-button-item.ax-accent2{--ax-comp-button-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent2-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent2-surface)}ax-button-item.ax-accent3{--ax-comp-button-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent3-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent3-surface)}ax-button-item.ax-accent4{--ax-comp-button-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent4-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent4-surface)}ax-button-item.ax-accent5{--ax-comp-button-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent5-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent5-surface)}ax-button-item.ax-accnt6{--ax-comp-button-item-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accnt6-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accnt6-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accnt6-surface)}ax-button-item.ax-accent7{--ax-comp-button-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent7-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent7-surface)}ax-button{position:relative;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;transition-property:background-color,border-color,color;transition-timing-function:var(--ax-sys-transition-timing-function);transition-duration:var(--ax-sys-transition-duration);color:rgba(var(--ax-comp-button-normal-text-color));background-color:rgba(var(--ax-comp-button-normal-bg-color));border-color:rgba(var(--ax-comp-button-normal-border-color));border-width:var(--ax-comp-button-border-width, 0px);font-family:var(--ax-comp-button-font-family);font-size:var(--ax-comp-button-font-size);font-weight:var(--ax-comp-button-font-weight);border-radius:var(--ax-comp-button-border-radius);height:var(--ax-comp-button-height);line-height:var(--ax-comp-button-height)}ax-button>button{position:relative;display:inline-flex;height:100%;width:100%;align-items:center;justify-content:center;overflow:hidden;border-radius:inherit;outline-color:transparent;-webkit-user-select:none;user-select:none;padding:var(--ax-comp-button-padding-y) var(--ax-comp-button-padding-x)}ax-button>button .ax-button-text{white-space:nowrap;padding:0 var(--ax-comp-button-text-padding-x);font-weight:500}ax-button:hover:not(ax-button:hover.ax-state-disabled,ax-button:hover.ax-state-loading,ax-button:hover.ax-state-selected){color:rgba(var(--ax-comp-button-hover-text-color));background-color:rgba(var(--ax-comp-button-hover-bg-color));border-color:rgba(var(--ax-comp-button-hover-border-color))}ax-button:active:not(ax-button:active.ax-state-disabled,ax-button:active.ax-state-loading,ax-button:active.ax-state-selected){color:rgba(var(--ax-comp-button-pressed-text-color));background-color:rgba(var(--ax-comp-button-pressed-bg-color));border-color:rgba(var(--ax-comp-button-pressed-border-color))}ax-button.ax-state-disabled,ax-button.ax-state-loading{opacity:.5}ax-button.ax-state-disabled>button,ax-button.ax-state-loading>button{cursor:not-allowed}ax-button.ax-button-icon{height:var(--ax-comp-button-height);width:var(--ax-comp-button-height)}ax-button.ax-state-selected{color:rgba(var(--ax-comp-button-selected-text-color));background-color:rgba(var(--ax-comp-button-selected-bg-color));border-color:rgba(var(--ax-comp-button-selected-border-color))}\n"], dependencies: [{ kind: "directive", type: AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
394
397
  }
395
398
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXButtonComponent, decorators: [{
396
399
  type: Component,
@@ -407,7 +410,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
407
410
  { provide: AXComponent, useExisting: AXButtonComponent },
408
411
  { provide: AXButtonItemComponent, useExisting: AXButtonComponent },
409
412
  { provide: AXFocusableComponent, useExisting: AXButtonComponent },
410
- ], imports: [AXRippleDirective], template: "<button\n [axRipple]\n [disabled]=\"disabled\"\n [attr.tabindex]=\"tabIndex\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n (click)=\"_handleClick($event)\"\n [attr.type]=\"type()\"\n>\n <ng-content select=\"ax-loading, ax-loading-spinner\"> </ng-content>\n\n @if (showIcon()) {\n <ng-content select=\"ax-prefix, ax-icon\"> </ng-content>\n }\n\n <ng-content select=\"ax-content\"> </ng-content>\n\n @if (text && !loadingText() && !iconOnly()) {\n <span class=\"ax-button-text\">{{ text }}</span>\n }\n\n @if (loadingText()) {\n <span class=\"ax-button-text\">{{ loadingText() }}</span>\n }\n\n <ng-content select=\"ax-suffix\"> </ng-content>\n <ng-content select=\"ax-dropdown-panel\"> </ng-content>\n <ng-content select=\".tab-content\"> </ng-content>\n\n <ng-content></ng-content>\n</button>\n", styles: ["ax-button{--ax-comp-button-padding-y: 0;--ax-comp-button-border-radius: var(--ax-sys-border-radius);--ax-comp-button-height: calc(var(--ax-sys-size-base) * var(--ax-comp-button-size-ratio, 1));--ax-comp-button-text-padding-x: .5rem}ax-button ax-prefix{display:flex;padding-inline-start:var(--ax-comp-button-decorator-padding-x)}ax-button ax-suffix{display:flex;padding-inline-end:var(--ax-comp-button-decorator-padding-x)}ax-button.ax-button-icon{--ax-comp-button-decorator-padding-x: 0 !important;font-size:var(--ax-comp-button-icon-only-font-size)}.ax-xs ax-button,ax-button.ax-xs{--ax-comp-button-font-size: .75rem;--ax-comp-button-padding-x: .25rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: .875rem}.ax-sm ax-button,ax-button.ax-sm{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: .5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1rem}.ax-md ax-button,ax-button{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: 1rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: 1.25rem}.ax-lg ax-button,ax-button.ax-lg{--ax-comp-button-font-size: 1.125rem;--ax-comp-button-padding-x: 1.125rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.5rem}.ax-xl ax-button,ax-button.ax-xl{--ax-comp-button-font-size: 1.5rem;--ax-comp-button-padding-x: 1.5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.75rem}ax-button.ax-solid{--ax-comp-button-border-width: 1px}ax-button.ax-solid>button:focus-visible,ax-button.ax-solid>button.ax-state-focus{outline:2px solid;outline-offset:3px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-solid.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-darkest-surface)}ax-button.ax-solid.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-darkest-surface)}ax-button.ax-solid.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-darkest-surface)}ax-button.ax-solid.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-darkest-surface)}ax-button.ax-solid.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-darkest-surface)}ax-button.ax-solid.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-darkest-surface)}ax-button.ax-solid.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-darkest-surface)}ax-button.ax-solid.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-darkest-surface)}ax-button.ax-solid.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-darkest-surface)}ax-button.ax-solid.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-darkest-surface)}ax-button.ax-solid.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accnt6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-darkest-surface)}ax-button.ax-solid.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-darkest-surface)}ax-button.ax-solid.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-solid.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-outline.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-outline.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-outline{--ax-comp-button-border-width: 1px;--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-hover-bg-color: transparent;--ax-comp-button-pressed-bg-color: transparent;--ax-comp-button-focused-bg-color: transparent}ax-button.ax-outline>button:focus-visible,ax-button.ax-outline>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-outline.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-outline.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-outline.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-outline.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-outline.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-outline.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-outline.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-outline.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-outline.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-outline.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-outline.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-outline.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-surface)}ax-button.ax-twotone.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-darker-surface)}.ax-dark ax-button.ax-twotone.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-lighter-surface)}ax-button.ax-twotone{--ax-comp-button-border-width: 1px}ax-button.ax-twotone>button:focus-visible,ax-button.ax-twotone>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-twotone.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-twotone.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-twotone.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-twotone.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-twotone.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-twotone.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-twotone.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-twotone.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-twotone.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-twotone.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-twotone.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accnt6-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accnt6-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-twotone.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-surface)}ax-button.ax-blank.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-blank.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-blank{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-blank>button:focus-visible,ax-button.ax-blank>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-blank.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface)}ax-button.ax-blank.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-blank.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface)}ax-button.ax-blank.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface)}ax-button.ax-blank.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface)}ax-button.ax-blank.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-blank.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-blank.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-blank.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-blank.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-blank.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-blank.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface)}ax-button.ax-link.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-link.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-link{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-link>button:focus-visible,ax-button.ax-link>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-link.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface)}ax-button.ax-link.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface)}ax-button.ax-link.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface)}ax-button.ax-link.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface)}ax-button.ax-link.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface)}ax-button.ax-link.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface)}ax-button.ax-link.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface)}ax-button.ax-link.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface)}ax-button.ax-link.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface)}ax-button.ax-link.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface)}ax-button.ax-link.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface)}ax-button.ax-link.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface)}ax-button-item.ax-primary{--ax-comp-button-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-primary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-primary-surface)}ax-button-item.ax-secondary{--ax-comp-button-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-secondary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-secondary-surface)}ax-button-item.ax-success{--ax-comp-button-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-success-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-success-surface)}ax-button-item.ax-warning{--ax-comp-button-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-warning-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-warning-surface)}ax-button-item.ax-danger{--ax-comp-button-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-danger-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-danger-surface)}ax-button-item.ax-accent1{--ax-comp-button-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent1-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent1-surface)}ax-button-item.ax-accent2{--ax-comp-button-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent2-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent2-surface)}ax-button-item.ax-accent3{--ax-comp-button-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent3-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent3-surface)}ax-button-item.ax-accent4{--ax-comp-button-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent4-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent4-surface)}ax-button-item.ax-accent5{--ax-comp-button-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent5-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent5-surface)}ax-button-item.ax-accnt6{--ax-comp-button-item-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accnt6-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accnt6-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accnt6-surface)}ax-button-item.ax-accent7{--ax-comp-button-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent7-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent7-surface)}ax-button{position:relative;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;transition-property:background-color,border-color,color;transition-timing-function:var(--ax-sys-transition-timing-function);transition-duration:var(--ax-sys-transition-duration);color:rgba(var(--ax-comp-button-normal-text-color));background-color:rgba(var(--ax-comp-button-normal-bg-color));border-color:rgba(var(--ax-comp-button-normal-border-color));border-width:var(--ax-comp-button-border-width, 0px);font-family:var(--ax-comp-button-font-family);font-size:var(--ax-comp-button-font-size);font-weight:var(--ax-comp-button-font-weight);border-radius:var(--ax-comp-button-border-radius);height:var(--ax-comp-button-height);line-height:var(--ax-comp-button-height)}ax-button>button{position:relative;display:inline-flex;height:100%;width:100%;align-items:center;justify-content:center;overflow:hidden;border-radius:inherit;outline-color:transparent;-webkit-user-select:none;user-select:none;padding:var(--ax-comp-button-padding-y) var(--ax-comp-button-padding-x)}ax-button>button .ax-button-text{white-space:nowrap;padding:0 var(--ax-comp-button-text-padding-x);font-weight:500}ax-button:hover:not(ax-button:hover.ax-state-disabled,ax-button:hover.ax-state-loading,ax-button:hover.ax-state-selected){color:rgba(var(--ax-comp-button-hover-text-color));background-color:rgba(var(--ax-comp-button-hover-bg-color));border-color:rgba(var(--ax-comp-button-hover-border-color))}ax-button:active:not(ax-button:active.ax-state-disabled,ax-button:active.ax-state-loading,ax-button:active.ax-state-selected){color:rgba(var(--ax-comp-button-pressed-text-color));background-color:rgba(var(--ax-comp-button-pressed-bg-color));border-color:rgba(var(--ax-comp-button-pressed-border-color))}ax-button.ax-state-disabled,ax-button.ax-state-loading{opacity:.5}ax-button.ax-state-disabled>button,ax-button.ax-state-loading>button{cursor:not-allowed}ax-button.ax-button-icon{height:var(--ax-comp-button-height);width:var(--ax-comp-button-height)}ax-button.ax-state-selected{color:rgba(var(--ax-comp-button-selected-text-color));background-color:rgba(var(--ax-comp-button-selected-bg-color));border-color:rgba(var(--ax-comp-button-selected-border-color))}\n"] }]
413
+ ], imports: [AXRippleDirective, AXTranslationModule, CommonModule], template: "<button\n [axRipple]\n [disabled]=\"disabled\"\n [attr.tabindex]=\"tabIndex\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n (click)=\"_handleClick($event)\"\n [attr.type]=\"type()\"\n>\n <ng-content select=\"ax-loading, ax-loading-spinner\"> </ng-content>\n\n @if (showIcon()) {\n <ng-content select=\"ax-prefix, ax-icon\"> </ng-content>\n }\n\n <ng-content select=\"ax-content\"> </ng-content>\n\n @if (text && !loadingText() && !iconOnly()) {\n <span class=\"ax-button-text\">{{ text | translate | async }}</span>\n }\n\n @if (loadingText()) {\n <span class=\"ax-button-text\">{{ loadingText() }}</span>\n }\n\n <ng-content select=\"ax-suffix\"> </ng-content>\n <ng-content select=\"ax-dropdown-panel\"> </ng-content>\n <ng-content select=\".tab-content\"> </ng-content>\n\n <ng-content></ng-content>\n</button>\n", styles: ["ax-button{--ax-comp-button-padding-y: 0;--ax-comp-button-border-radius: var(--ax-sys-border-radius);--ax-comp-button-height: calc(var(--ax-sys-size-base) * var(--ax-comp-button-size-ratio, 1));--ax-comp-button-text-padding-x: .5rem}ax-button ax-prefix{display:flex;padding-inline-start:var(--ax-comp-button-decorator-padding-x)}ax-button ax-suffix{display:flex;padding-inline-end:var(--ax-comp-button-decorator-padding-x)}ax-button.ax-button-icon{--ax-comp-button-decorator-padding-x: 0 !important;font-size:var(--ax-comp-button-icon-only-font-size)}.ax-xs ax-button,ax-button.ax-xs{--ax-comp-button-font-size: .75rem;--ax-comp-button-padding-x: .25rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: .875rem}.ax-sm ax-button,ax-button.ax-sm{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: .5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1rem}.ax-md ax-button,ax-button{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: 1rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: 1.25rem}.ax-lg ax-button,ax-button.ax-lg{--ax-comp-button-font-size: 1.125rem;--ax-comp-button-padding-x: 1.125rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.5rem}.ax-xl ax-button,ax-button.ax-xl{--ax-comp-button-font-size: 1.5rem;--ax-comp-button-padding-x: 1.5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.75rem}ax-button.ax-solid{--ax-comp-button-border-width: 1px}ax-button.ax-solid>button:focus-visible,ax-button.ax-solid>button.ax-state-focus{outline:2px solid;outline-offset:3px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-solid.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-darkest-surface)}ax-button.ax-solid.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-darkest-surface)}ax-button.ax-solid.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-darkest-surface)}ax-button.ax-solid.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-darkest-surface)}ax-button.ax-solid.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-darkest-surface)}ax-button.ax-solid.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-darkest-surface)}ax-button.ax-solid.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-darkest-surface)}ax-button.ax-solid.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-darkest-surface)}ax-button.ax-solid.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-darkest-surface)}ax-button.ax-solid.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-darkest-surface)}ax-button.ax-solid.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accnt6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-darkest-surface)}ax-button.ax-solid.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-darkest-surface)}ax-button.ax-solid.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-solid.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-outline.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-outline.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-outline{--ax-comp-button-border-width: 1px;--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-hover-bg-color: transparent;--ax-comp-button-pressed-bg-color: transparent;--ax-comp-button-focused-bg-color: transparent}ax-button.ax-outline>button:focus-visible,ax-button.ax-outline>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-outline.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-outline.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-outline.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-outline.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-outline.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-outline.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-outline.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-outline.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-outline.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-outline.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-outline.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-outline.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-surface)}ax-button.ax-twotone.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-darker-surface)}.ax-dark ax-button.ax-twotone.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-lighter-surface)}ax-button.ax-twotone{--ax-comp-button-border-width: 1px}ax-button.ax-twotone>button:focus-visible,ax-button.ax-twotone>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-twotone.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-twotone.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-twotone.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-twotone.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-twotone.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-twotone.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent1-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-twotone.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent2-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-twotone.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent3-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-twotone.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent4-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-twotone.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent5-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-twotone.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accnt6-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accnt6-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-twotone.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-accent7-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-accent7-surface)}ax-button.ax-blank.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-blank.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-blank{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-blank>button:focus-visible,ax-button.ax-blank>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-blank.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface)}ax-button.ax-blank.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-blank.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface)}ax-button.ax-blank.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface)}ax-button.ax-blank.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface)}ax-button.ax-blank.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent1-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent1-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent1-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent1-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface)}ax-button.ax-blank.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent2-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent2-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent2-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent2-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface)}ax-button.ax-blank.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent3-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent3-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent3-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent3-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface)}ax-button.ax-blank.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent4-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent4-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent4-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent4-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface)}ax-button.ax-blank.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent5-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent5-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent5-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent5-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface)}ax-button.ax-blank.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accnt6-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accnt6-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accnt6-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accnt6-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accnt6-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface)}ax-button.ax-blank.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-accent7-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-accent7-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-accent7-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-accent7-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface)}ax-button.ax-link.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-link.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-link{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-link>button:focus-visible,ax-button.ax-link>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-link.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface)}ax-button.ax-link.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface)}ax-button.ax-link.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface)}ax-button.ax-link.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface)}ax-button.ax-link.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface)}ax-button.ax-link.ax-accent1{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent1-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent1-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent1-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent1-surface)}ax-button.ax-link.ax-accent2{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent2-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent2-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent2-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent2-surface)}ax-button.ax-link.ax-accent3{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent3-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent3-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent3-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent3-surface)}ax-button.ax-link.ax-accent4{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent4-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent4-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent4-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent4-surface)}ax-button.ax-link.ax-accent5{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent5-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent5-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent5-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent5-surface)}ax-button.ax-link.ax-accnt6{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accnt6-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accnt6-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accnt6-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accnt6-surface)}ax-button.ax-link.ax-accent7{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-accent7-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-accent7-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-accent7-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-accent7-surface)}ax-button-item.ax-primary{--ax-comp-button-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-primary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-primary-surface)}ax-button-item.ax-secondary{--ax-comp-button-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-secondary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-secondary-surface)}ax-button-item.ax-success{--ax-comp-button-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-success-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-success-surface)}ax-button-item.ax-warning{--ax-comp-button-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-warning-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-warning-surface)}ax-button-item.ax-danger{--ax-comp-button-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-danger-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-danger-surface)}ax-button-item.ax-accent1{--ax-comp-button-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent1-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent1-surface)}ax-button-item.ax-accent2{--ax-comp-button-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent2-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent2-surface)}ax-button-item.ax-accent3{--ax-comp-button-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent3-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent3-surface)}ax-button-item.ax-accent4{--ax-comp-button-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent4-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent4-surface)}ax-button-item.ax-accent5{--ax-comp-button-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent5-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent5-surface)}ax-button-item.ax-accnt6{--ax-comp-button-item-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accnt6-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accnt6-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accnt6-surface)}ax-button-item.ax-accent7{--ax-comp-button-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-accent7-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-accent7-surface)}ax-button{position:relative;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;transition-property:background-color,border-color,color;transition-timing-function:var(--ax-sys-transition-timing-function);transition-duration:var(--ax-sys-transition-duration);color:rgba(var(--ax-comp-button-normal-text-color));background-color:rgba(var(--ax-comp-button-normal-bg-color));border-color:rgba(var(--ax-comp-button-normal-border-color));border-width:var(--ax-comp-button-border-width, 0px);font-family:var(--ax-comp-button-font-family);font-size:var(--ax-comp-button-font-size);font-weight:var(--ax-comp-button-font-weight);border-radius:var(--ax-comp-button-border-radius);height:var(--ax-comp-button-height);line-height:var(--ax-comp-button-height)}ax-button>button{position:relative;display:inline-flex;height:100%;width:100%;align-items:center;justify-content:center;overflow:hidden;border-radius:inherit;outline-color:transparent;-webkit-user-select:none;user-select:none;padding:var(--ax-comp-button-padding-y) var(--ax-comp-button-padding-x)}ax-button>button .ax-button-text{white-space:nowrap;padding:0 var(--ax-comp-button-text-padding-x);font-weight:500}ax-button:hover:not(ax-button:hover.ax-state-disabled,ax-button:hover.ax-state-loading,ax-button:hover.ax-state-selected){color:rgba(var(--ax-comp-button-hover-text-color));background-color:rgba(var(--ax-comp-button-hover-bg-color));border-color:rgba(var(--ax-comp-button-hover-border-color))}ax-button:active:not(ax-button:active.ax-state-disabled,ax-button:active.ax-state-loading,ax-button:active.ax-state-selected){color:rgba(var(--ax-comp-button-pressed-text-color));background-color:rgba(var(--ax-comp-button-pressed-bg-color));border-color:rgba(var(--ax-comp-button-pressed-border-color))}ax-button.ax-state-disabled,ax-button.ax-state-loading{opacity:.5}ax-button.ax-state-disabled>button,ax-button.ax-state-loading>button{cursor:not-allowed}ax-button.ax-button-icon{height:var(--ax-comp-button-height);width:var(--ax-comp-button-height)}ax-button.ax-state-selected{color:rgba(var(--ax-comp-button-selected-text-color));background-color:rgba(var(--ax-comp-button-selected-bg-color));border-color:rgba(var(--ax-comp-button-selected-border-color))}\n"] }]
411
414
  }], propDecorators: { __hostClass: [{
412
415
  type: HostBinding,
413
416
  args: ['class']
@@ -418,7 +421,7 @@ const MODULES = [CommonModule, AXCommonModule, AXDecoratorModule, AXLoadingModul
418
421
  class AXButtonModule {
419
422
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
420
423
  static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: AXButtonModule, imports: [CommonModule, AXCommonModule, AXDecoratorModule, AXLoadingModule, AXRippleDirective, AXButtonComponent, AXButtonItemComponent, AXButtonItemListComponent], exports: [AXButtonComponent, AXButtonItemComponent, AXButtonItemListComponent] }); }
421
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXButtonModule, imports: [CommonModule, AXCommonModule, AXDecoratorModule, AXLoadingModule, AXButtonItemComponent, AXButtonItemListComponent] }); }
424
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXButtonModule, imports: [CommonModule, AXCommonModule, AXDecoratorModule, AXLoadingModule, COMPONENT] }); }
422
425
  }
423
426
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXButtonModule, decorators: [{
424
427
  type: NgModule,