@acorex/components 19.15.0-next.8 → 20.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/accordion/README.md +3 -0
- package/accordion/index.d.ts +41 -0
- package/action-sheet/index.d.ts +126 -4
- package/alert/index.d.ts +93 -2
- package/audio-wave/index.d.ts +143 -3
- package/autocomplete/index.d.ts +123 -2
- package/avatar/index.d.ts +52 -3
- package/badge/index.d.ts +27 -2
- package/bottom-navigation/index.d.ts +67 -3
- package/breadcrumbs/index.d.ts +56 -4
- package/button/index.d.ts +230 -5
- package/button-group/index.d.ts +166 -3
- package/calendar/index.d.ts +367 -4
- package/check-box/index.d.ts +74 -2
- package/chips/index.d.ts +37 -2
- package/circular-progress/index.d.ts +73 -2
- package/collapse/index.d.ts +173 -3
- package/color-box/index.d.ts +72 -2
- package/color-palette/index.d.ts +293 -7
- package/comment/index.d.ts +107 -9
- package/conversation/index.d.ts +656 -18
- package/cron-job/index.d.ts +329 -8
- package/data-pager/index.d.ts +416 -9
- package/data-table/index.d.ts +1060 -11
- package/datetime-box/index.d.ts +112 -2
- package/datetime-input/index.d.ts +135 -2
- package/datetime-picker/index.d.ts +147 -3
- package/decorators/index.d.ts +129 -8
- package/dialog/index.d.ts +122 -4
- package/drawer/index.d.ts +86 -3
- package/drawer-2/README.md +3 -0
- package/drawer-2/index.d.ts +48 -0
- package/dropdown/index.d.ts +243 -4
- package/dropdown-button/index.d.ts +82 -2
- package/fesm2022/acorex-components-accordion.mjs +118 -0
- package/fesm2022/acorex-components-accordion.mjs.map +1 -0
- package/fesm2022/acorex-components-action-sheet.mjs +20 -27
- package/fesm2022/acorex-components-action-sheet.mjs.map +1 -1
- package/fesm2022/acorex-components-alert.mjs +9 -9
- package/fesm2022/acorex-components-alert.mjs.map +1 -1
- package/fesm2022/acorex-components-audio-wave.mjs +8 -8
- package/fesm2022/acorex-components-audio-wave.mjs.map +1 -1
- package/fesm2022/acorex-components-autocomplete.mjs +7 -7
- package/fesm2022/acorex-components-autocomplete.mjs.map +1 -1
- package/fesm2022/acorex-components-avatar.mjs +11 -11
- package/fesm2022/acorex-components-avatar.mjs.map +1 -1
- package/fesm2022/acorex-components-badge.mjs +9 -8
- package/fesm2022/acorex-components-badge.mjs.map +1 -1
- package/fesm2022/acorex-components-bottom-navigation.mjs +12 -12
- package/fesm2022/acorex-components-bottom-navigation.mjs.map +1 -1
- package/fesm2022/acorex-components-breadcrumbs.mjs +15 -21
- package/fesm2022/acorex-components-breadcrumbs.mjs.map +1 -1
- package/fesm2022/acorex-components-button-group.mjs +10 -10
- package/fesm2022/acorex-components-button-group.mjs.map +1 -1
- package/fesm2022/acorex-components-button.mjs +21 -27
- package/fesm2022/acorex-components-button.mjs.map +1 -1
- package/fesm2022/acorex-components-calendar.mjs +28 -22
- package/fesm2022/acorex-components-calendar.mjs.map +1 -1
- package/fesm2022/acorex-components-check-box.mjs +9 -9
- package/fesm2022/acorex-components-check-box.mjs.map +1 -1
- package/fesm2022/acorex-components-chips.mjs +8 -8
- package/fesm2022/acorex-components-chips.mjs.map +1 -1
- package/fesm2022/acorex-components-circular-progress.mjs +8 -8
- package/fesm2022/acorex-components-circular-progress.mjs.map +1 -1
- package/fesm2022/acorex-components-collapse.mjs +17 -25
- package/fesm2022/acorex-components-collapse.mjs.map +1 -1
- package/fesm2022/acorex-components-color-box.mjs +9 -11
- package/fesm2022/acorex-components-color-box.mjs.map +1 -1
- package/fesm2022/acorex-components-color-palette.mjs +59 -63
- package/fesm2022/acorex-components-color-palette.mjs.map +1 -1
- package/fesm2022/acorex-components-comment.mjs +31 -31
- package/fesm2022/acorex-components-comment.mjs.map +1 -1
- package/fesm2022/acorex-components-conversation.mjs +119 -151
- package/fesm2022/acorex-components-conversation.mjs.map +1 -1
- package/fesm2022/acorex-components-cron-job.mjs +64 -64
- package/fesm2022/acorex-components-cron-job.mjs.map +1 -1
- package/fesm2022/acorex-components-data-pager.mjs +44 -50
- package/fesm2022/acorex-components-data-pager.mjs.map +1 -1
- package/fesm2022/acorex-components-data-table.mjs +49 -49
- package/fesm2022/acorex-components-data-table.mjs.map +1 -1
- package/fesm2022/acorex-components-datetime-box.mjs +10 -22
- package/fesm2022/acorex-components-datetime-box.mjs.map +1 -1
- package/fesm2022/acorex-components-datetime-input.mjs +12 -9
- package/fesm2022/acorex-components-datetime-input.mjs.map +1 -1
- package/fesm2022/acorex-components-datetime-picker.mjs +10 -16
- package/fesm2022/acorex-components-datetime-picker.mjs.map +1 -1
- package/fesm2022/acorex-components-decorators.mjs +34 -51
- package/fesm2022/acorex-components-decorators.mjs.map +1 -1
- package/fesm2022/acorex-components-dialog.mjs +19 -26
- package/fesm2022/acorex-components-dialog.mjs.map +1 -1
- package/fesm2022/acorex-components-drawer-2.mjs +120 -0
- package/fesm2022/acorex-components-drawer-2.mjs.map +1 -0
- package/fesm2022/acorex-components-drawer.mjs +149 -60
- package/fesm2022/acorex-components-drawer.mjs.map +1 -1
- package/fesm2022/acorex-components-dropdown-button.mjs +9 -9
- package/fesm2022/acorex-components-dropdown-button.mjs.map +1 -1
- package/fesm2022/acorex-components-dropdown.mjs +14 -14
- package/fesm2022/acorex-components-dropdown.mjs.map +1 -1
- package/fesm2022/acorex-components-file-explorer.mjs +27 -28
- package/fesm2022/acorex-components-file-explorer.mjs.map +1 -1
- package/fesm2022/acorex-components-flow-chart.mjs +16 -16
- package/fesm2022/acorex-components-flow-chart.mjs.map +1 -1
- package/fesm2022/acorex-components-form.mjs +25 -30
- package/fesm2022/acorex-components-form.mjs.map +1 -1
- package/fesm2022/acorex-components-grid-layout-builder.mjs +10 -10
- package/fesm2022/acorex-components-grid-layout-builder.mjs.map +1 -1
- package/fesm2022/acorex-components-image-editor.mjs +39 -40
- package/fesm2022/acorex-components-image-editor.mjs.map +1 -1
- package/fesm2022/acorex-components-image.mjs +10 -10
- package/fesm2022/acorex-components-image.mjs.map +1 -1
- package/fesm2022/acorex-components-json-viewer.mjs +7 -7
- package/fesm2022/acorex-components-json-viewer.mjs.map +1 -1
- package/fesm2022/acorex-components-kbd.mjs +10 -10
- package/fesm2022/acorex-components-kbd.mjs.map +1 -1
- package/fesm2022/acorex-components-label.mjs +9 -9
- package/fesm2022/acorex-components-label.mjs.map +1 -1
- package/fesm2022/acorex-components-list.mjs +11 -21
- package/fesm2022/acorex-components-list.mjs.map +1 -1
- package/fesm2022/acorex-components-loading-dialog.mjs +18 -25
- package/fesm2022/acorex-components-loading-dialog.mjs.map +1 -1
- package/fesm2022/acorex-components-loading.mjs +23 -23
- package/fesm2022/acorex-components-loading.mjs.map +1 -1
- package/fesm2022/acorex-components-map.mjs +700 -193
- package/fesm2022/acorex-components-map.mjs.map +1 -1
- package/fesm2022/acorex-components-media-viewer.mjs +39 -43
- package/fesm2022/acorex-components-media-viewer.mjs.map +1 -1
- package/fesm2022/acorex-components-menu.mjs +41 -26
- package/fesm2022/acorex-components-menu.mjs.map +1 -1
- package/fesm2022/{acorex-components-modal-acorex-components-modal-CJ3M9U7p.mjs → acorex-components-modal-acorex-components-modal-DTLjJam5.mjs} +21 -21
- package/fesm2022/acorex-components-modal-acorex-components-modal-DTLjJam5.mjs.map +1 -0
- package/fesm2022/{acorex-components-modal-modal-content.component-Ef5XWxUb.mjs → acorex-components-modal-modal-content.component-CsxuUsLE.mjs} +5 -5
- package/fesm2022/acorex-components-modal-modal-content.component-CsxuUsLE.mjs.map +1 -0
- package/fesm2022/acorex-components-modal.mjs +1 -1
- package/fesm2022/acorex-components-navbar.mjs +7 -7
- package/fesm2022/acorex-components-navbar.mjs.map +1 -1
- package/fesm2022/acorex-components-notification.mjs +19 -23
- package/fesm2022/acorex-components-notification.mjs.map +1 -1
- package/fesm2022/acorex-components-number-box.mjs +7 -7
- package/fesm2022/acorex-components-number-box.mjs.map +1 -1
- package/fesm2022/acorex-components-otp.mjs +7 -7
- package/fesm2022/acorex-components-otp.mjs.map +1 -1
- package/fesm2022/acorex-components-page.mjs +10 -10
- package/fesm2022/acorex-components-page.mjs.map +1 -1
- package/fesm2022/acorex-components-paint.mjs +29 -29
- package/fesm2022/acorex-components-paint.mjs.map +1 -1
- package/fesm2022/acorex-components-password-box.mjs +12 -12
- package/fesm2022/acorex-components-password-box.mjs.map +1 -1
- package/fesm2022/acorex-components-pdf-reader.mjs +7 -7
- package/fesm2022/acorex-components-pdf-reader.mjs.map +1 -1
- package/fesm2022/acorex-components-phone-box.mjs +7 -7
- package/fesm2022/acorex-components-phone-box.mjs.map +1 -1
- package/fesm2022/acorex-components-picker.mjs +13 -13
- package/fesm2022/acorex-components-picker.mjs.map +1 -1
- package/fesm2022/acorex-components-popover.mjs +11 -11
- package/fesm2022/acorex-components-popover.mjs.map +1 -1
- package/fesm2022/acorex-components-popup.mjs +22 -39
- package/fesm2022/acorex-components-popup.mjs.map +1 -1
- package/fesm2022/acorex-components-progress-bar.mjs +8 -8
- package/fesm2022/acorex-components-progress-bar.mjs.map +1 -1
- package/fesm2022/acorex-components-qrcode.mjs +7 -7
- package/fesm2022/acorex-components-qrcode.mjs.map +1 -1
- package/fesm2022/acorex-components-query-builder.mjs +9 -10
- package/fesm2022/acorex-components-query-builder.mjs.map +1 -1
- package/fesm2022/acorex-components-radio.mjs +7 -7
- package/fesm2022/acorex-components-radio.mjs.map +1 -1
- package/fesm2022/acorex-components-rail-navigation.mjs +13 -13
- package/fesm2022/acorex-components-rail-navigation.mjs.map +1 -1
- package/fesm2022/acorex-components-range-slider.mjs +9 -9
- package/fesm2022/acorex-components-range-slider.mjs.map +1 -1
- package/fesm2022/acorex-components-rate-picker.mjs +7 -7
- package/fesm2022/acorex-components-rate-picker.mjs.map +1 -1
- package/fesm2022/acorex-components-rest-api-generator.mjs +26 -26
- package/fesm2022/acorex-components-rest-api-generator.mjs.map +1 -1
- package/fesm2022/acorex-components-result.mjs +8 -8
- package/fesm2022/acorex-components-result.mjs.map +1 -1
- package/fesm2022/acorex-components-routing-progress.mjs +13 -14
- package/fesm2022/acorex-components-routing-progress.mjs.map +1 -1
- package/fesm2022/acorex-components-scheduler.mjs +192 -146
- package/fesm2022/acorex-components-scheduler.mjs.map +1 -1
- package/fesm2022/acorex-components-scss.mjs +4 -4
- package/fesm2022/acorex-components-scss.mjs.map +1 -1
- package/fesm2022/acorex-components-search-box.mjs +12 -21
- package/fesm2022/acorex-components-search-box.mjs.map +1 -1
- package/fesm2022/acorex-components-select-box.mjs +7 -7
- package/fesm2022/acorex-components-select-box.mjs.map +1 -1
- package/fesm2022/acorex-components-selection-list-2.mjs +163 -0
- package/fesm2022/acorex-components-selection-list-2.mjs.map +1 -0
- package/fesm2022/acorex-components-selection-list.mjs +9 -9
- package/fesm2022/acorex-components-selection-list.mjs.map +1 -1
- package/fesm2022/acorex-components-side-menu.mjs +28 -21
- package/fesm2022/acorex-components-side-menu.mjs.map +1 -1
- package/fesm2022/acorex-components-skeleton.mjs +7 -7
- package/fesm2022/acorex-components-skeleton.mjs.map +1 -1
- package/fesm2022/acorex-components-slider.mjs +14 -15
- package/fesm2022/acorex-components-slider.mjs.map +1 -1
- package/fesm2022/acorex-components-sliding-item.mjs +14 -14
- package/fesm2022/acorex-components-sliding-item.mjs.map +1 -1
- package/fesm2022/acorex-components-step-wizard.mjs +18 -18
- package/fesm2022/acorex-components-step-wizard.mjs.map +1 -1
- package/fesm2022/acorex-components-switch.mjs +12 -12
- package/fesm2022/acorex-components-switch.mjs.map +1 -1
- package/fesm2022/acorex-components-tabs.mjs +17 -17
- package/fesm2022/acorex-components-tabs.mjs.map +1 -1
- package/fesm2022/acorex-components-tag-box.mjs +7 -7
- package/fesm2022/acorex-components-tag-box.mjs.map +1 -1
- package/fesm2022/acorex-components-tag.mjs +8 -8
- package/fesm2022/acorex-components-tag.mjs.map +1 -1
- package/fesm2022/acorex-components-text-area.mjs +7 -7
- package/fesm2022/acorex-components-text-area.mjs.map +1 -1
- package/fesm2022/acorex-components-text-box.mjs +10 -10
- package/fesm2022/acorex-components-text-box.mjs.map +1 -1
- package/fesm2022/acorex-components-time-duration.mjs +17 -9
- package/fesm2022/acorex-components-time-duration.mjs.map +1 -1
- package/fesm2022/acorex-components-time-line.mjs +10 -10
- package/fesm2022/acorex-components-time-line.mjs.map +1 -1
- package/fesm2022/acorex-components-toast.mjs +23 -31
- package/fesm2022/acorex-components-toast.mjs.map +1 -1
- package/fesm2022/acorex-components-toolbar.mjs +7 -7
- package/fesm2022/acorex-components-toolbar.mjs.map +1 -1
- package/fesm2022/acorex-components-tooltip.mjs +16 -16
- package/fesm2022/acorex-components-tooltip.mjs.map +1 -1
- package/fesm2022/acorex-components-tree-view.mjs +13 -12
- package/fesm2022/acorex-components-tree-view.mjs.map +1 -1
- package/fesm2022/acorex-components-uploader.mjs +28 -28
- package/fesm2022/acorex-components-uploader.mjs.map +1 -1
- package/fesm2022/acorex-components-video-player.mjs +7 -7
- package/fesm2022/acorex-components-video-player.mjs.map +1 -1
- package/fesm2022/acorex-components-wysiwyg.mjs +33 -33
- package/fesm2022/acorex-components-wysiwyg.mjs.map +1 -1
- package/fesm2022/acorex-components.mjs.map +1 -1
- package/file-explorer/index.d.ts +103 -8
- package/flow-chart/index.d.ts +159 -5
- package/form/index.d.ts +283 -6
- package/grid-layout-builder/index.d.ts +197 -4
- package/image/index.d.ts +95 -2
- package/image-editor/index.d.ts +268 -11
- package/index.d.ts +3 -1
- package/json-viewer/index.d.ts +25 -2
- package/kbd/index.d.ts +23 -3
- package/label/index.d.ts +58 -2
- package/list/index.d.ts +148 -2
- package/loading/index.d.ts +149 -6
- package/loading-dialog/index.d.ts +115 -4
- package/map/index.d.ts +661 -7
- package/media-viewer/index.d.ts +142 -9
- package/menu/index.d.ts +207 -6
- package/modal/index.d.ts +78 -5
- package/navbar/index.d.ts +22 -2
- package/notification/index.d.ts +134 -5
- package/number-box/index.d.ts +179 -2
- package/otp/index.d.ts +74 -3
- package/package.json +24 -12
- package/page/index.d.ts +58 -3
- package/paint/index.d.ts +157 -7
- package/password-box/index.d.ts +97 -3
- package/pdf-reader/index.d.ts +17 -2
- package/phone-box/index.d.ts +92 -2
- package/picker/index.d.ts +44 -4
- package/popover/index.d.ts +222 -2
- package/popup/index.d.ts +120 -4
- package/progress-bar/index.d.ts +65 -2
- package/qrcode/index.d.ts +68 -3
- package/query-builder/index.d.ts +52 -2
- package/radio/index.d.ts +33 -2
- package/rail-navigation/index.d.ts +74 -5
- package/range-slider/index.d.ts +320 -3
- package/rate-picker/index.d.ts +141 -2
- package/rest-api-generator/index.d.ts +129 -8
- package/result/index.d.ts +34 -2
- package/routing-progress/index.d.ts +39 -2
- package/scheduler/index.d.ts +556 -11
- package/scss/index.d.ts +10 -1
- package/search-box/index.d.ts +51 -2
- package/select-box/index.d.ts +161 -2
- package/selection-list/index.d.ts +93 -2
- package/selection-list-2/README.md +3 -0
- package/selection-list-2/index.d.ts +52 -0
- package/side-menu/index.d.ts +94 -4
- package/skeleton/index.d.ts +28 -2
- package/slider/index.d.ts +101 -2
- package/sliding-item/index.d.ts +45 -4
- package/step-wizard/index.d.ts +109 -5
- package/switch/index.d.ts +49 -3
- package/tabs/index.d.ts +156 -5
- package/tag/index.d.ts +26 -2
- package/tag-box/index.d.ts +41 -2
- package/text-area/index.d.ts +52 -2
- package/text-box/index.d.ts +92 -3
- package/time-duration/index.d.ts +48 -3
- package/time-line/index.d.ts +33 -3
- package/toast/index.d.ts +127 -5
- package/toolbar/index.d.ts +22 -2
- package/tooltip/index.d.ts +60 -3
- package/tree-view/index.d.ts +179 -4
- package/uploader/index.d.ts +188 -8
- package/video-player/index.d.ts +15 -2
- package/wysiwyg/index.d.ts +240 -9
- package/action-sheet/lib/action-sheet.class.d.ts +0 -40
- package/action-sheet/lib/action-sheet.component.d.ts +0 -59
- package/action-sheet/lib/action-sheet.module.d.ts +0 -16
- package/action-sheet/lib/action-sheet.service.d.ts +0 -16
- package/alert/lib/alert.component.d.ts +0 -82
- package/alert/lib/alert.module.d.ts +0 -9
- package/audio-wave/lib/audio-wave.component.d.ts +0 -112
- package/audio-wave/lib/audio-wave.module.d.ts +0 -12
- package/audio-wave/lib/interfaces/audio-wave.interface.d.ts +0 -16
- package/autocomplete/lib/autocomplete.component.d.ts +0 -114
- package/autocomplete/lib/autocomplete.module.d.ts +0 -7
- package/avatar/lib/avatar-group.component.d.ts +0 -5
- package/avatar/lib/avatar.component.d.ts +0 -37
- package/avatar/lib/avatar.module.d.ts +0 -9
- package/badge/lib/badge.component.d.ts +0 -16
- package/badge/lib/badge.module.d.ts +0 -8
- package/bottom-navigation/lib/bottom-navigation-item/bottom-navigation-item.component.d.ts +0 -15
- package/bottom-navigation/lib/bottom-navigation.component.d.ts +0 -43
- package/bottom-navigation/lib/bottom-navigation.module.d.ts +0 -9
- package/breadcrumbs/lib/breadcrumbs-item.class.d.ts +0 -9
- package/breadcrumbs/lib/breadcrumbs-item.component.d.ts +0 -25
- package/breadcrumbs/lib/breadcrumbs.component.d.ts +0 -15
- package/breadcrumbs/lib/breadcrumbs.module.d.ts +0 -10
- package/button/lib/button-item-list.component.d.ts +0 -56
- package/button/lib/button-item.class.d.ts +0 -24
- package/button/lib/button-item.component.d.ts +0 -77
- package/button/lib/button.component.d.ts +0 -65
- package/button/lib/button.module.d.ts +0 -13
- package/button-group/lib/button-group-item.component.d.ts +0 -79
- package/button-group/lib/button-group.component.d.ts +0 -79
- package/button-group/lib/button-group.module.d.ts +0 -11
- package/calendar/lib/calendar-range.component.d.ts +0 -82
- package/calendar/lib/calendar.class.d.ts +0 -89
- package/calendar/lib/calendar.component.d.ts +0 -183
- package/calendar/lib/calendar.module.d.ts +0 -13
- package/check-box/lib/check-box.component.d.ts +0 -62
- package/check-box/lib/check-box.module.d.ts +0 -10
- package/chips/lib/chips.component.d.ts +0 -26
- package/chips/lib/chips.module.d.ts +0 -8
- package/circular-progress/lib/circular-progress.component.d.ts +0 -63
- package/circular-progress/lib/circular-progress.module.d.ts +0 -7
- package/collapse/lib/collapse-group.component.d.ts +0 -68
- package/collapse/lib/collapse.component.d.ts +0 -101
- package/collapse/lib/collapse.module.d.ts +0 -10
- package/color-box/lib/color-box.component.d.ts +0 -59
- package/color-box/lib/color-box.module.d.ts +0 -11
- package/color-palette/lib/color-palette-input.component.d.ts +0 -65
- package/color-palette/lib/color-palette-picker.component.d.ts +0 -96
- package/color-palette/lib/color-palette-preview.component.d.ts +0 -33
- package/color-palette/lib/color-palette-swatches.component.d.ts +0 -51
- package/color-palette/lib/color-palette.class.d.ts +0 -28
- package/color-palette/lib/color-palette.component.d.ts +0 -18
- package/color-palette/lib/color-palette.module.d.ts +0 -22
- package/comment/lib/comment-container/comment-container.component.d.ts +0 -13
- package/comment/lib/comment-item/comment-item.component.d.ts +0 -23
- package/comment/lib/comment-tools/comment-date/comment-date.component.d.ts +0 -10
- package/comment/lib/comment-tools/comment-like/comment-like.component.d.ts +0 -16
- package/comment/lib/comment-tools/comment-menu-options/comment-menu-options.component.d.ts +0 -10
- package/comment/lib/comment-tools/comment-reply-more/comment-reply-more.component.d.ts +0 -5
- package/comment/lib/comment-tools/comment-reply-text/comment-reply-text.component.d.ts +0 -5
- package/comment/lib/comment-view/comment-view.component.d.ts +0 -9
- package/comment/lib/comment.module.d.ts +0 -21
- package/conversation/lib/classes/events.interface.d.ts +0 -7
- package/conversation/lib/conversation-container/conversation-container.component.d.ts +0 -9
- package/conversation/lib/conversation-input/conversation-input.component.d.ts +0 -126
- package/conversation/lib/conversation-input/conversation-input.interface.d.ts +0 -10
- package/conversation/lib/conversation-message/conversation-message.component.d.ts +0 -62
- package/conversation/lib/conversation-messages/conversation-message-audio/conversation-message-audio.component.d.ts +0 -95
- package/conversation/lib/conversation-messages/conversation-message-file/conversation-message-file.component.d.ts +0 -53
- package/conversation/lib/conversation-messages/conversation-message-image/conversation-message-image.component.d.ts +0 -40
- package/conversation/lib/conversation-messages/conversation-message-image-popup/conversation-message-image-popup.component.d.ts +0 -18
- package/conversation/lib/conversation-messages/conversation-message-text/conversation-message-text.component.d.ts +0 -44
- package/conversation/lib/conversation-messages/conversation-message-video/conversation-message-video.component.d.ts +0 -20
- package/conversation/lib/conversation-messages/conversation-message-voice/conversation-message-voice.component.d.ts +0 -102
- package/conversation/lib/conversation-view/conversation-view.component.d.ts +0 -27
- package/conversation/lib/conversation.module.d.ts +0 -45
- package/conversation/lib/conversation.types.d.ts +0 -26
- package/conversation/lib/services/conversation-message-type-registry.service.d.ts +0 -9
- package/conversation/lib/services/conversation.service.d.ts +0 -7
- package/conversation/lib/services/recording.service.d.ts +0 -20
- package/cron-job/lib/cron-job-container/cron-job-container.component.d.ts +0 -30
- package/cron-job/lib/cron-job.module.d.ts +0 -25
- package/cron-job/lib/cron-job.service.d.ts +0 -22
- package/cron-job/lib/day/day.component.d.ts +0 -24
- package/cron-job/lib/day/day.model.d.ts +0 -61
- package/cron-job/lib/day/day.service.d.ts +0 -17
- package/cron-job/lib/hours/hours.component.d.ts +0 -16
- package/cron-job/lib/hours/hours.model.d.ts +0 -5
- package/cron-job/lib/hours/hours.service.d.ts +0 -13
- package/cron-job/lib/minutes/minutes.component.d.ts +0 -16
- package/cron-job/lib/minutes/minutes.model.d.ts +0 -5
- package/cron-job/lib/minutes/minutes.service.d.ts +0 -13
- package/cron-job/lib/month/month.component.d.ts +0 -18
- package/cron-job/lib/month/month.model.d.ts +0 -5
- package/cron-job/lib/month/month.service.d.ts +0 -14
- package/cron-job/lib/seconds/seconds.component.d.ts +0 -16
- package/cron-job/lib/seconds/seconds.model.d.ts +0 -5
- package/cron-job/lib/seconds/seconds.service.d.ts +0 -13
- package/cron-job/lib/types/iexpression.d.ts +0 -3
- package/cron-job/lib/types/shared.model.d.ts +0 -37
- package/cron-job/lib/year/year.component.d.ts +0 -17
- package/cron-job/lib/year/year.model.d.ts +0 -16
- package/cron-job/lib/year/year.service.d.ts +0 -12
- package/data-pager/lib/data-pager-base.component.d.ts +0 -64
- package/data-pager/lib/data-pager-info.component.d.ts +0 -25
- package/data-pager/lib/data-pager-input-selector.component.d.ts +0 -28
- package/data-pager/lib/data-pager-next-buttons.component.d.ts +0 -32
- package/data-pager/lib/data-pager-numeric-selector.component.d.ts +0 -36
- package/data-pager/lib/data-pager-pagesize-dropdown.component.d.ts +0 -42
- package/data-pager/lib/data-pager-prev-buttons.component.d.ts +0 -32
- package/data-pager/lib/data-pager.component.d.ts +0 -151
- package/data-pager/lib/data-pager.module.d.ts +0 -22
- package/data-table/lib/base-data-table.class.d.ts +0 -38
- package/data-table/lib/columns/data-table-column-resizable.directive.d.ts +0 -24
- package/data-table/lib/columns/data-table-column.d.ts +0 -20
- package/data-table/lib/columns/data-text-column.component.d.ts +0 -100
- package/data-table/lib/columns/row-command-column.component.d.ts +0 -131
- package/data-table/lib/columns/row-expand-column.component.d.ts +0 -50
- package/data-table/lib/columns/row-index-column.component.d.ts +0 -74
- package/data-table/lib/columns/row-select-column.component.d.ts +0 -70
- package/data-table/lib/data-table/data-table.component.d.ts +0 -301
- package/data-table/lib/data-table.module.d.ts +0 -27
- package/data-table/lib/infinite-scroll-data-table/infinite-scroll-data-table.component.d.ts +0 -253
- package/datetime-box/lib/datetime-box.component.d.ts +0 -98
- package/datetime-box/lib/datetime-box.module.d.ts +0 -13
- package/datetime-input/lib/datetime-input.component.d.ts +0 -123
- package/datetime-input/lib/datetime-input.module.d.ts +0 -10
- package/datetime-picker/lib/datetime-picker.component.d.ts +0 -121
- package/datetime-picker/lib/datetime-picker.config.d.ts +0 -8
- package/datetime-picker/lib/datetime-picker.module.d.ts +0 -16
- package/decorators/lib/components/clear-button/clear-button.component.d.ts +0 -38
- package/decorators/lib/components/close-button/close-button.component.d.ts +0 -35
- package/decorators/lib/components/color-indicator/color-indicator.component.d.ts +0 -6
- package/decorators/lib/components/full-screen/full-screen-button.component.d.ts +0 -7
- package/decorators/lib/components/generic-content.component.d.ts +0 -10
- package/decorators/lib/components/heading/heading.component.d.ts +0 -17
- package/decorators/lib/components/icon/icon.component.d.ts +0 -20
- package/decorators/lib/decorators.module.d.ts +0 -14
- package/dialog/lib/dialog.class.d.ts +0 -39
- package/dialog/lib/dialog.component.d.ts +0 -41
- package/dialog/lib/dialog.module.d.ts +0 -16
- package/dialog/lib/dialog.service.d.ts +0 -31
- package/drawer/lib/drawer/drawer-container/drawer-container.component.d.ts +0 -12
- package/drawer/lib/drawer/drawer-item/drawer.component.d.ts +0 -29
- package/drawer/lib/drawer.module.d.ts +0 -9
- package/drawer/lib/drawer.service.d.ts +0 -7
- package/dropdown/lib/dropdown-box.class.d.ts +0 -17
- package/dropdown/lib/dropdown-box.component.d.ts +0 -97
- package/dropdown/lib/dropdown-panel.component.d.ts +0 -120
- package/dropdown/lib/dropdown.module.d.ts +0 -14
- package/dropdown-button/lib/dropdown-button.component.d.ts +0 -67
- package/dropdown-button/lib/dropdown-button.module.d.ts +0 -13
- package/fesm2022/acorex-components-modal-acorex-components-modal-CJ3M9U7p.mjs.map +0 -1
- package/fesm2022/acorex-components-modal-modal-content.component-Ef5XWxUb.mjs.map +0 -1
- package/file-explorer/lib/file-explorer-container/file-explorer-container.component.d.ts +0 -5
- package/file-explorer/lib/file-explorer-header/file-explorer-header.component.d.ts +0 -9
- package/file-explorer/lib/file-explorer-internal.service.d.ts +0 -18
- package/file-explorer/lib/file-explorer-item/file-explorer-item.component.d.ts +0 -11
- package/file-explorer/lib/file-explorer-tree/file-explorer-tree.component.d.ts +0 -13
- package/file-explorer/lib/file-explorer-types.d.ts +0 -11
- package/file-explorer/lib/file-explorer-view/file-explorer-view.component.d.ts +0 -14
- package/file-explorer/lib/file-explorer.module.d.ts +0 -19
- package/file-explorer/lib/file-explorer.service.d.ts +0 -11
- package/flow-chart/lib/flow-chart-creator/flow-chart-creator.component.d.ts +0 -13
- package/flow-chart/lib/flow-chart-renderer/flow-chart-renderer.component.d.ts +0 -22
- package/flow-chart/lib/flow-chart.component.d.ts +0 -24
- package/flow-chart/lib/flow-chart.module.d.ts +0 -10
- package/flow-chart/lib/flow-chart.service.d.ts +0 -57
- package/flow-chart/lib/flow-chart.type.d.ts +0 -37
- package/form/lib/form-field.component.d.ts +0 -69
- package/form/lib/form.component.d.ts +0 -109
- package/form/lib/form.config.d.ts +0 -7
- package/form/lib/form.module.d.ts +0 -16
- package/form/lib/validation-rule.directive.d.ts +0 -17
- package/form/lib/validation-summary.component.d.ts +0 -76
- package/grid-layout-builder/lib/grid-layout-builder.module.d.ts +0 -9
- package/grid-layout-builder/lib/grid-layout-container.component.d.ts +0 -47
- package/grid-layout-builder/lib/grid-layout-widget.component.d.ts +0 -39
- package/grid-layout-builder/lib/types.d.ts +0 -103
- package/grid-layout-builder/lib/utility.d.ts +0 -9
- package/image/lib/image.component.d.ts +0 -85
- package/image/lib/image.module.d.ts +0 -8
- package/image-editor/lib/image-editor-container/image-editor-container.component.d.ts +0 -26
- package/image-editor/lib/image-editor-cropper-window/image-editor-cropper-window.component.d.ts +0 -47
- package/image-editor/lib/image-editor-tools/image-editor-crop/image-editor-crop.component.d.ts +0 -14
- package/image-editor/lib/image-editor-tools/image-editor-highlight/image-editor-highlight.component.d.ts +0 -18
- package/image-editor/lib/image-editor-tools/image-editor-history/image-editor-history.component.d.ts +0 -13
- package/image-editor/lib/image-editor-tools/image-editor-pen/image-editor-pen.component.d.ts +0 -18
- package/image-editor/lib/image-editor-tools/image-editor-rotate/image-editor-rotate.component.d.ts +0 -16
- package/image-editor/lib/image-editor-tools/image-editor-tool-selector/image-editor-tool-selector.component.d.ts +0 -12
- package/image-editor/lib/image-editor-view/image-editor-view.component.d.ts +0 -78
- package/image-editor/lib/image-editor.module.d.ts +0 -25
- package/image-editor/lib/image-editor.service.d.ts +0 -22
- package/json-viewer/lib/json-viewer/json-viewer.component.d.ts +0 -13
- package/json-viewer/lib/json-viewer.module.d.ts +0 -10
- package/kbd/lib/kbd-item/kbd-item.component.d.ts +0 -8
- package/kbd/lib/kbd.component.d.ts +0 -5
- package/kbd/lib/kbd.module.d.ts +0 -9
- package/label/lib/label.component.d.ts +0 -48
- package/label/lib/label.module.d.ts +0 -8
- package/list/lib/list.component.d.ts +0 -139
- package/list/lib/list.module.d.ts +0 -10
- package/loading/lib/loading-spinner.component.d.ts +0 -34
- package/loading/lib/loading.component.d.ts +0 -53
- package/loading/lib/loading.config.d.ts +0 -8
- package/loading/lib/loading.directive.d.ts +0 -15
- package/loading/lib/loading.module.d.ts +0 -13
- package/loading/lib/loading.service.d.ts +0 -29
- package/loading-dialog/lib/loading-dialog.class.d.ts +0 -35
- package/loading-dialog/lib/loading-dialog.component.d.ts +0 -63
- package/loading-dialog/lib/loading-dialog.module.d.ts +0 -14
- package/loading-dialog/lib/loading-dialog.service.d.ts +0 -8
- package/map/lib/map.component.d.ts +0 -214
- package/map/lib/map.config.d.ts +0 -13
- package/map/lib/map.module.d.ts +0 -8
- package/map/lib/map.service.d.ts +0 -172
- package/map/lib/map.type.d.ts +0 -20
- package/map/lib/map.utility.d.ts +0 -2
- package/map/lib/map.world-map.d.ts +0 -28
- package/media-viewer/lib/media-viewer-container/media-viewer-container.component.d.ts +0 -38
- package/media-viewer/lib/media-viewer-slider/media-viewer-slider.component.d.ts +0 -18
- package/media-viewer/lib/media-viewer-tools/audio-player/audio-player.component.d.ts +0 -8
- package/media-viewer/lib/media-viewer-tools/file-info/file-info.component.d.ts +0 -9
- package/media-viewer/lib/media-viewer-tools/image-viewer/image-viewer.component.d.ts +0 -6
- package/media-viewer/lib/media-viewer-tools/pdf-reader/pdf-reader.component.d.ts +0 -8
- package/media-viewer/lib/media-viewer-tools/video-player/video-player.component.d.ts +0 -8
- package/media-viewer/lib/media-viewer-type-registry.service.d.ts +0 -9
- package/media-viewer/lib/media-viewer-types.d.ts +0 -19
- package/media-viewer/lib/media-viewer.module.d.ts +0 -31
- package/media-viewer/lib/media-viewer.service.d.ts +0 -8
- package/menu/lib/context-menu.component.d.ts +0 -57
- package/menu/lib/menu-item.component.d.ts +0 -62
- package/menu/lib/menu.component.d.ts +0 -23
- package/menu/lib/menu.module.d.ts +0 -15
- package/menu/lib/menu.service.d.ts +0 -19
- package/menu/lib/menu.types.d.ts +0 -39
- package/modal/lib/modal-content/modal-content.component.d.ts +0 -51
- package/modal/lib/modal-footer/modal-footer.component.d.ts +0 -5
- package/modal/lib/modal-state.service.d.ts +0 -17
- package/modal/lib/modal.component.d.ts +0 -18
- package/modal/lib/modal.module.d.ts +0 -8
- package/modal/lib/modal.service.d.ts +0 -15
- package/modal/lib/modal.types.d.ts +0 -34
- package/navbar/lib/navbar.component.d.ts +0 -12
- package/navbar/lib/navbar.module.d.ts +0 -8
- package/notification/lib/notification.class.d.ts +0 -42
- package/notification/lib/notification.component.d.ts +0 -41
- package/notification/lib/notification.config.d.ts +0 -15
- package/notification/lib/notification.module.d.ts +0 -14
- package/notification/lib/notification.service.d.ts +0 -25
- package/number-box/lib/number-box.component.d.ts +0 -165
- package/number-box/lib/number-box.module.d.ts +0 -12
- package/otp/lib/otp.class.d.ts +0 -5
- package/otp/lib/otp.component.d.ts +0 -59
- package/otp/lib/otp.module.d.ts +0 -9
- package/page/lib/base-page.class.d.ts +0 -22
- package/page/lib/page.component.d.ts +0 -29
- package/page/lib/page.module.d.ts +0 -6
- package/paint/lib/paint/paint-container/paint-container.component.d.ts +0 -19
- package/paint/lib/paint/paint-tools/paint-eraser-tool/paint-eraser-tool.component.d.ts +0 -15
- package/paint/lib/paint/paint-tools/paint-highlight-tool/paint-highlight-tool.component.d.ts +0 -18
- package/paint/lib/paint/paint-tools/paint-pen-tool/paint-pen-tool.component.d.ts +0 -18
- package/paint/lib/paint/paint-tools-selector/paint-tools-selector.component.d.ts +0 -9
- package/paint/lib/paint/paint-view/paint-view.component.d.ts +0 -56
- package/paint/lib/paint/paint.service.d.ts +0 -12
- package/paint/lib/paint.module.d.ts +0 -20
- package/password-box/lib/password-box.component.d.ts +0 -42
- package/password-box/lib/password-box.module.d.ts +0 -15
- package/password-box/lib/password-strength-validation/password-strength-validation.component.d.ts +0 -40
- package/pdf-reader/lib/pdf-reader/pdf-reader.component.d.ts +0 -8
- package/pdf-reader/lib/pdf-reader.module.d.ts +0 -7
- package/phone-box/lib/phone-box.component.d.ts +0 -75
- package/phone-box/lib/phone-box.module.d.ts +0 -15
- package/picker/lib/picker-container/picker-container.component.d.ts +0 -7
- package/picker/lib/picker-items/picker-items.component.d.ts +0 -20
- package/picker/lib/picker-title/picker-title.component.d.ts +0 -5
- package/picker/lib/picker.module.d.ts +0 -11
- package/popover/lib/popover.component.d.ts +0 -211
- package/popover/lib/popover.module.d.ts +0 -8
- package/popup/lib/popup.component.d.ts +0 -75
- package/popup/lib/popup.interface.d.ts +0 -30
- package/popup/lib/popup.module.d.ts +0 -15
- package/popup/lib/popup.service.d.ts +0 -22
- package/progress-bar/lib/progress-bar.component.d.ts +0 -54
- package/progress-bar/lib/progress-bar.module.d.ts +0 -8
- package/qrcode/lib/qrcode.class.d.ts +0 -3
- package/qrcode/lib/qrcode.component.d.ts +0 -54
- package/qrcode/lib/qrcode.module.d.ts +0 -8
- package/query-builder/lib/query-builder.component.d.ts +0 -35
- package/query-builder/lib/query-builder.module.d.ts +0 -15
- package/radio/lib/radio.component.d.ts +0 -22
- package/radio/lib/radio.module.d.ts +0 -9
- package/rail-navigation/lib/rail-navigation-item/rail-navigation-item.component.d.ts +0 -31
- package/rail-navigation/lib/rail-navigation.class.d.ts +0 -8
- package/rail-navigation/lib/rail-navigation.component.d.ts +0 -18
- package/rail-navigation/lib/rail-navigation.module.d.ts +0 -10
- package/rail-navigation/lib/rail-navigation.service.d.ts +0 -9
- package/range-slider/lib/range-slider.class.d.ts +0 -9
- package/range-slider/lib/range-slider.component.d.ts +0 -301
- package/range-slider/lib/range-slider.module.d.ts +0 -8
- package/rate-picker/lib/calculatePercentage.d.ts +0 -27
- package/rate-picker/lib/rate-picker.component.d.ts +0 -131
- package/rate-picker/lib/rate-picker.module.d.ts +0 -8
- package/rest-api-generator/lib/query-params/query-params.component.d.ts +0 -16
- package/rest-api-generator/lib/request-body/request-body.component.d.ts +0 -22
- package/rest-api-generator/lib/request-headers/request-headers.component.d.ts +0 -22
- package/rest-api-generator/lib/rest-api-auth/rest-api-auth.component.d.ts +0 -22
- package/rest-api-generator/lib/rest-api-generator.component.d.ts +0 -14
- package/rest-api-generator/lib/rest-api-generator.module.d.ts +0 -19
- package/rest-api-generator/lib/rest-api-generator.service.d.ts +0 -7
- package/rest-api-generator/lib/types.d.ts +0 -20
- package/result/lib/result.component.d.ts +0 -24
- package/result/lib/result.module.d.ts +0 -8
- package/routing-progress/lib/routing-progress.component.d.ts +0 -30
- package/routing-progress/lib/routing-progress.module.d.ts +0 -8
- package/scheduler/lib/scheduler.class.d.ts +0 -77
- package/scheduler/lib/scheduler.component.d.ts +0 -91
- package/scheduler/lib/scheduler.module.d.ts +0 -11
- package/scheduler/lib/scheduler.service.d.ts +0 -78
- package/scheduler/lib/views/agenda/scheduler-agenda-view.component.d.ts +0 -45
- package/scheduler/lib/views/day/scheduler-day-view.component.d.ts +0 -44
- package/scheduler/lib/views/month/scheduler-month-view.component.d.ts +0 -59
- package/scheduler/lib/views/timeline-day/scheduler-timeline-day-view.component.d.ts +0 -39
- package/scheduler/lib/views/timeline-month/scheduler-timeline-month-view.component.d.ts +0 -47
- package/scheduler/lib/views/timeline-multi-day/scheduler-timeline-multi-day-view.component.d.ts +0 -40
- package/scheduler/lib/views/week/scheduler-week-view.component.d.ts +0 -74
- package/scss/lib/scss.module.d.ts +0 -7
- package/search-box/lib/search-box.component.d.ts +0 -40
- package/search-box/lib/search-box.module.d.ts +0 -14
- package/select-box/lib/select-box.component.d.ts +0 -139
- package/select-box/lib/select-box.module.d.ts +0 -20
- package/selection-list/lib/selection-list.component.d.ts +0 -77
- package/selection-list/lib/selection-list.module.d.ts +0 -13
- package/side-menu/lib/side-menu-item/side-menu-item.component.d.ts +0 -30
- package/side-menu/lib/side-menu.component.d.ts +0 -39
- package/side-menu/lib/side-menu.directive.d.ts +0 -14
- package/side-menu/lib/side-menu.module.d.ts +0 -15
- package/skeleton/lib/skeleton.component.d.ts +0 -18
- package/skeleton/lib/skeleton.module.d.ts +0 -8
- package/slider/lib/slider.component.d.ts +0 -92
- package/slider/lib/slider.module.d.ts +0 -10
- package/sliding-item/lib/sliding-item/sliding-item.component.d.ts +0 -13
- package/sliding-item/lib/sliding-item-prefix/sliding-item-prefix.component.d.ts +0 -11
- package/sliding-item/lib/sliding-item-suffix/sliding-item-suffix.component.d.ts +0 -11
- package/sliding-item/lib/sliding-item.module.d.ts +0 -11
- package/step-wizard/lib/step-wizard-item/step-wizard-item.component.d.ts +0 -21
- package/step-wizard/lib/step-wizard.class.d.ts +0 -7
- package/step-wizard/lib/step-wizard.component.d.ts +0 -63
- package/step-wizard/lib/step-wizard.directive.d.ts +0 -11
- package/step-wizard/lib/step-wizard.module.d.ts +0 -13
- package/switch/lib/switch-content.component.d.ts +0 -10
- package/switch/lib/switch.component.d.ts +0 -29
- package/switch/lib/switch.module.d.ts +0 -10
- package/tabs/lib/tab-content.directive.d.ts +0 -11
- package/tabs/lib/tab-item.component.d.ts +0 -56
- package/tabs/lib/tabs.class.d.ts +0 -8
- package/tabs/lib/tabs.component.d.ts +0 -76
- package/tabs/lib/tabs.module.d.ts +0 -12
- package/tag/lib/tag.component.d.ts +0 -16
- package/tag/lib/tag.module.d.ts +0 -8
- package/tag-box/lib/tag-box.component.d.ts +0 -32
- package/tag-box/lib/tag-box.module.d.ts +0 -7
- package/text-area/lib/text-area.component.d.ts +0 -41
- package/text-area/lib/text-area.module.d.ts +0 -9
- package/text-box/lib/mask-options.directive.d.ts +0 -17
- package/text-box/lib/text-box.component.d.ts +0 -61
- package/text-box/lib/text-box.module.d.ts +0 -13
- package/time-duration/lib/time-duration.component.d.ts +0 -37
- package/time-duration/lib/time-duration.module.d.ts +0 -7
- package/time-duration/lib/time-duration.type.d.ts +0 -1
- package/time-line/lib/time-line-item.component.d.ts +0 -14
- package/time-line/lib/time-line.component.d.ts +0 -9
- package/time-line/lib/time-line.module.d.ts +0 -9
- package/toast/lib/toast.class.d.ts +0 -27
- package/toast/lib/toast.component.d.ts +0 -44
- package/toast/lib/toast.config.d.ts +0 -14
- package/toast/lib/toast.module.d.ts +0 -13
- package/toast/lib/toast.service.d.ts +0 -34
- package/toolbar/lib/toolbar.component.d.ts +0 -12
- package/toolbar/lib/toolbar.module.d.ts +0 -8
- package/tooltip/lib/tooltip.component.d.ts +0 -21
- package/tooltip/lib/tooltip.directive.d.ts +0 -29
- package/tooltip/lib/tooltip.module.d.ts +0 -10
- package/tree-view/lib/tree-view-item.component.d.ts +0 -20
- package/tree-view/lib/tree-view.class.d.ts +0 -47
- package/tree-view/lib/tree-view.component.d.ts +0 -98
- package/tree-view/lib/tree-view.component.module.d.ts +0 -16
- package/uploader/lib/uploader-browse-handle.directive.d.ts +0 -11
- package/uploader/lib/uploader-dialog-container/uploader-dialog-container.component.d.ts +0 -24
- package/uploader/lib/uploader-drop-zone/uploader-drop-zone.component.d.ts +0 -12
- package/uploader/lib/uploader-list/uploader-list.component.d.ts +0 -12
- package/uploader/lib/uploader-zone.directive.d.ts +0 -31
- package/uploader/lib/uploader.models.d.ts +0 -52
- package/uploader/lib/uploader.module.d.ts +0 -21
- package/uploader/lib/uploader.service.d.ts +0 -30
- package/video-player/lib/video-player/video-player.component.d.ts +0 -6
- package/video-player/lib/video-player.module.d.ts +0 -7
- package/wysiwyg/lib/wysiwyg/wysiwyg-container/wysiwyg-container.component.d.ts +0 -40
- package/wysiwyg/lib/wysiwyg/wysiwyg-tools/wysiwyg-alignment/wysiwyg-alignment.component.d.ts +0 -28
- package/wysiwyg/lib/wysiwyg/wysiwyg-tools/wysiwyg-colors/wysiwyg-colors.component.d.ts +0 -40
- package/wysiwyg/lib/wysiwyg/wysiwyg-tools/wysiwyg-font-style/wysiwyg-font-style.component.d.ts +0 -37
- package/wysiwyg/lib/wysiwyg/wysiwyg-tools/wysiwyg-history/wysiwyg-history.component.d.ts +0 -16
- package/wysiwyg/lib/wysiwyg/wysiwyg-tools/wysiwyg-insert/wysiwyg-insert.component.d.ts +0 -30
- package/wysiwyg/lib/wysiwyg/wysiwyg-tools/wysiwyg-list/wysiwyg-list.component.d.ts +0 -20
- package/wysiwyg/lib/wysiwyg/wysiwyg-view/wysiwyg-view.component.d.ts +0 -16
- package/wysiwyg/lib/wysiwyg/wysiwyg.service.d.ts +0 -11
- package/wysiwyg/lib/wysiwyg.module.d.ts +0 -21
@@ -1,8 +1,7 @@
|
|
1
|
-
import * as i1 from '@acorex/cdk/common';
|
2
1
|
import { MXInteractiveComponent, MXColorComponent, AXComponent, AXClosableComponent, MXButtonBaseComponent, AXRippleDirective, AXFocusableComponent, AXCommonModule } from '@acorex/cdk/common';
|
3
2
|
import { AXDecoratorGenericComponent, AXDecoratorIconComponent, AXDecoratorModule } from '@acorex/components/decorators';
|
4
3
|
import * as i0 from '@angular/core';
|
5
|
-
import { EventEmitter, HostBinding, HostListener, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, input, afterNextRender, ContentChildren,
|
4
|
+
import { EventEmitter, HostBinding, HostListener, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, input, afterNextRender, ContentChildren, computed, contentChild, model, NgModule } from '@angular/core';
|
6
5
|
import { classes } from 'polytype';
|
7
6
|
import { AXLoadingComponent, AXLoadingModule } from '@acorex/components/loading';
|
8
7
|
import { CommonModule } from '@angular/common';
|
@@ -85,8 +84,8 @@ class AXButtonItemComponent extends classes(MXInteractiveComponent, MXColorCompo
|
|
85
84
|
.map((c) => c[0])
|
86
85
|
.join(' ');
|
87
86
|
}
|
88
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
89
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
87
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AXButtonItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
88
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: AXButtonItemComponent, isStandalone: true, selector: "ax-button-item", inputs: { color: "color", disabled: "disabled", text: "text", selected: "selected", divided: "divided", data: "data", name: "name" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur", disabledChange: "disabledChange" }, host: { listeners: { "click": "__hostClick($event)", "focus": "__hostFocus($event)", "blur": "__hostBlur($event)" }, properties: { "class": "this.__hostClass", "attr.tabindex": "this.tabindex" } }, providers: [{ provide: AXComponent, useExisting: AXButtonItemComponent }], usesInheritance: true, ngImport: i0, template: `
|
90
89
|
<div class="ax-action-item-prefix">
|
91
90
|
<ng-content select="ax-prefix"> </ng-content>
|
92
91
|
<ng-content select="ax-loading"> </ng-content>
|
@@ -99,9 +98,9 @@ class AXButtonItemComponent extends classes(MXInteractiveComponent, MXColorCompo
|
|
99
98
|
<ng-content select="ax-suffix"> </ng-content>
|
100
99
|
</div>
|
101
100
|
<ng-content select="ax-dropdown-panel"> </ng-content>
|
102
|
-
`, 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-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-twotone.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-darker-surface)}.ax-dark ax-button.ax-twotone.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-lighter-surface)}ax-button.ax-twotone{--ax-comp-button-border-width: 1px}ax-button.ax-twotone>button:focus-visible,ax-button.ax-twotone>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-twotone.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-twotone.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-twotone.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-twotone.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-twotone.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-blank.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-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-link.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-link.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-link{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-link>button:focus-visible,ax-button.ax-link>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-link.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface)}ax-button.ax-link.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface)}ax-button.ax-link.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface)}ax-button.ax-link.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface)}ax-button.ax-link.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface)}ax-button-item.ax-primary{--ax-comp-button-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-primary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-primary-surface)}ax-button-item.ax-secondary{--ax-comp-button-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-secondary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-secondary-surface)}ax-button-item.ax-success{--ax-comp-button-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-success-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-success-surface)}ax-button-item.ax-warning{--ax-comp-button-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-warning-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-warning-surface)}ax-button-item.ax-danger{--ax-comp-button-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-danger-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-danger-surface)}ax-button-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 }); }
|
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 }); }
|
103
102
|
}
|
104
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
103
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AXButtonItemComponent, decorators: [{
|
105
104
|
type: Component,
|
106
105
|
args: [{ selector: 'ax-button-item', template: `
|
107
106
|
<div class="ax-action-item-prefix">
|
@@ -116,7 +115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
116
115
|
<ng-content select="ax-suffix"> </ng-content>
|
117
116
|
</div>
|
118
117
|
<ng-content select="ax-dropdown-panel"> </ng-content>
|
119
|
-
`, 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-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-twotone.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-darker-surface)}.ax-dark ax-button.ax-twotone.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-lighter-surface)}ax-button.ax-twotone{--ax-comp-button-border-width: 1px}ax-button.ax-twotone>button:focus-visible,ax-button.ax-twotone>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-twotone.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-twotone.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-twotone.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-twotone.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-twotone.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-blank.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-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-link.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-link.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-link{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-link>button:focus-visible,ax-button.ax-link>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-link.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface)}ax-button.ax-link.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface)}ax-button.ax-link.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface)}ax-button.ax-link.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface)}ax-button.ax-link.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface)}ax-button-item.ax-primary{--ax-comp-button-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-primary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-primary-surface)}ax-button-item.ax-secondary{--ax-comp-button-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-secondary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-secondary-surface)}ax-button-item.ax-success{--ax-comp-button-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-success-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-success-surface)}ax-button-item.ax-warning{--ax-comp-button-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-warning-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-warning-surface)}ax-button-item.ax-danger{--ax-comp-button-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-danger-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-danger-surface)}ax-button-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"] }]
|
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"] }]
|
120
119
|
}], propDecorators: { text: [{
|
121
120
|
type: Input
|
122
121
|
}], selected: [{
|
@@ -155,9 +154,9 @@ class AXButtonItemListComponent extends MXInteractiveComponent {
|
|
155
154
|
/**
|
156
155
|
* @ignore
|
157
156
|
*/
|
158
|
-
constructor(
|
157
|
+
constructor() {
|
159
158
|
super();
|
160
|
-
this.parent =
|
159
|
+
this.parent = inject(AXClosableComponent, { optional: true });
|
161
160
|
/**
|
162
161
|
* The list of button items to display.
|
163
162
|
*
|
@@ -231,8 +230,8 @@ class AXButtonItemListComponent extends MXInteractiveComponent {
|
|
231
230
|
get __hostClass() {
|
232
231
|
return `ax-action-list ax-action-list-vertical`;
|
233
232
|
}
|
234
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
235
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
233
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AXButtonItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
234
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: AXButtonItemListComponent, isStandalone: true, selector: "ax-button-item-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onItemClick: "onItemClick" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXButtonItemListComponent }], queries: [{ propertyName: "_contentButtons", predicate: AXButtonItemComponent }], usesInheritance: true, ngImport: i0, template: `
|
236
235
|
@for (item of items(); track item.name) {
|
237
236
|
<ax-button-item
|
238
237
|
[text]="item.text"
|
@@ -254,7 +253,7 @@ class AXButtonItemListComponent extends MXInteractiveComponent {
|
|
254
253
|
<ng-content></ng-content>
|
255
254
|
`, isInline: true, styles: ["ax-button-item-list.ax-action-list{padding-block:var(--ax-comp-button-item-list-padding-block, .25rem)}\n"], dependencies: [{ kind: "component", type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
256
255
|
}
|
257
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
256
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AXButtonItemListComponent, decorators: [{
|
258
257
|
type: Component,
|
259
258
|
args: [{ selector: 'ax-button-item-list', template: `
|
260
259
|
@for (item of items(); track item.name) {
|
@@ -277,12 +276,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
277
276
|
}
|
278
277
|
<ng-content></ng-content>
|
279
278
|
`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXButtonItemComponent, AXDecoratorGenericComponent, AXDecoratorIconComponent], providers: [{ provide: AXComponent, useExisting: AXButtonItemListComponent }], styles: ["ax-button-item-list.ax-action-list{padding-block:var(--ax-comp-button-item-list-padding-block, .25rem)}\n"] }]
|
280
|
-
}], ctorParameters: () => [
|
281
|
-
type: Optional
|
282
|
-
}, {
|
283
|
-
type: Inject,
|
284
|
-
args: [AXClosableComponent]
|
285
|
-
}] }], propDecorators: { _contentButtons: [{
|
279
|
+
}], ctorParameters: () => [], propDecorators: { _contentButtons: [{
|
286
280
|
type: ContentChildren,
|
287
281
|
args: [AXButtonItemComponent]
|
288
282
|
}], onItemClick: [{
|
@@ -391,14 +385,14 @@ class AXButtonComponent extends MXButtonBaseComponent {
|
|
391
385
|
blur() {
|
392
386
|
this.getButton().classList.remove('ax-state-focus');
|
393
387
|
}
|
394
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
395
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
388
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AXButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
389
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: AXButtonComponent, isStandalone: true, selector: "ax-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", selectedChange: "selectedChange", toggleableChange: "toggleableChange", lookChange: "lookChange", colorChange: "colorChange", disabledChange: "disabledChange", loadingText: "loadingTextChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
|
396
390
|
{ provide: AXComponent, useExisting: AXButtonComponent },
|
397
391
|
{ provide: AXButtonItemComponent, useExisting: AXButtonComponent },
|
398
392
|
{ provide: AXFocusableComponent, useExisting: AXButtonComponent },
|
399
|
-
], queries: [{ propertyName: "loadingIcon", first: true, predicate: AXLoadingComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\n [axRipple]\n [disabled]=\"disabled\"\n [attr.tabindex]=\"tabIndex\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n (click)=\"_handleClick($event)\"\n [attr.type]=\"type()\"\n>\n <ng-content select=\"ax-loading, ax-loading-spinner\"> </ng-content>\n\n @if (showIcon()) {\n <ng-content select=\"ax-prefix, ax-icon\"> </ng-content>\n }\n\n <ng-content select=\"ax-content\"> </ng-content>\n\n @if (text && !loadingText() && !iconOnly()) {\n <span class=\"ax-button-text\">{{ text }}</span>\n }\n\n @if (loadingText()) {\n <span class=\"ax-button-text\">{{ loadingText() }}</span>\n }\n\n <ng-content select=\"ax-suffix\"> </ng-content>\n <ng-content select=\"ax-dropdown-panel\"> </ng-content>\n <ng-content select=\".tab-content\"> </ng-content>\n\n <ng-content></ng-content>\n</button>\n", styles: ["ax-button{--ax-comp-button-padding-y: 0;--ax-comp-button-border-radius: var(--ax-sys-border-radius);--ax-comp-button-height: calc(var(--ax-sys-size-base) * var(--ax-comp-button-size-ratio, 1));--ax-comp-button-text-padding-x: .5rem}ax-button ax-prefix{display:flex;padding-inline-start:var(--ax-comp-button-decorator-padding-x)}ax-button ax-suffix{display:flex;padding-inline-end:var(--ax-comp-button-decorator-padding-x)}ax-button.ax-button-icon{--ax-comp-button-decorator-padding-x: 0 !important;font-size:var(--ax-comp-button-icon-only-font-size)}.ax-xs ax-button,ax-button.ax-xs{--ax-comp-button-font-size: .75rem;--ax-comp-button-padding-x: .25rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: .875rem}.ax-sm ax-button,ax-button.ax-sm{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: .5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1rem}.ax-md ax-button,ax-button{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: 1rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: 1.25rem}.ax-lg ax-button,ax-button.ax-lg{--ax-comp-button-font-size: 1.125rem;--ax-comp-button-padding-x: 1.125rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.5rem}.ax-xl ax-button,ax-button.ax-xl{--ax-comp-button-font-size: 1.5rem;--ax-comp-button-padding-x: 1.5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.75rem}ax-button.ax-solid{--ax-comp-button-border-width: 1px}ax-button.ax-solid>button:focus-visible,ax-button.ax-solid>button.ax-state-focus{outline:2px solid;outline-offset:3px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-solid.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-darkest-surface)}ax-button.ax-solid.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-darkest-surface)}ax-button.ax-solid.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-darkest-surface)}ax-button.ax-solid.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-darkest-surface)}ax-button.ax-solid.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-darkest-surface)}ax-button.ax-solid.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-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-twotone.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-darker-surface)}.ax-dark ax-button.ax-twotone.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-lighter-surface)}ax-button.ax-twotone{--ax-comp-button-border-width: 1px}ax-button.ax-twotone>button:focus-visible,ax-button.ax-twotone>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-twotone.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-twotone.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-twotone.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-twotone.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-twotone.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-blank.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-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-link.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-link.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-link{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-link>button:focus-visible,ax-button.ax-link>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-link.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface)}ax-button.ax-link.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface)}ax-button.ax-link.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface)}ax-button.ax-link.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface)}ax-button.ax-link.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface)}ax-button-item.ax-primary{--ax-comp-button-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-primary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-primary-surface)}ax-button-item.ax-secondary{--ax-comp-button-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-secondary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-secondary-surface)}ax-button-item.ax-success{--ax-comp-button-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-success-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-success-surface)}ax-button-item.ax-warning{--ax-comp-button-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-warning-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-warning-surface)}ax-button-item.ax-danger{--ax-comp-button-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-danger-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-danger-surface)}ax-button{position:relative;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;transition-property:background-color,border-color,color;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 }); }
|
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 }); }
|
400
394
|
}
|
401
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
395
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AXButtonComponent, decorators: [{
|
402
396
|
type: Component,
|
403
397
|
args: [{ selector: 'ax-button', inputs: ['disabled', 'size', 'tabIndex', 'color', 'look', 'text', 'toggleable', 'selected'], outputs: [
|
404
398
|
'onBlur',
|
@@ -413,7 +407,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
413
407
|
{ provide: AXComponent, useExisting: AXButtonComponent },
|
414
408
|
{ provide: AXButtonItemComponent, useExisting: AXButtonComponent },
|
415
409
|
{ provide: AXFocusableComponent, useExisting: AXButtonComponent },
|
416
|
-
], imports: [AXRippleDirective], template: "<button\n [axRipple]\n [disabled]=\"disabled\"\n [attr.tabindex]=\"tabIndex\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n (click)=\"_handleClick($event)\"\n [attr.type]=\"type()\"\n>\n <ng-content select=\"ax-loading, ax-loading-spinner\"> </ng-content>\n\n @if (showIcon()) {\n <ng-content select=\"ax-prefix, ax-icon\"> </ng-content>\n }\n\n <ng-content select=\"ax-content\"> </ng-content>\n\n @if (text && !loadingText() && !iconOnly()) {\n <span class=\"ax-button-text\">{{ text }}</span>\n }\n\n @if (loadingText()) {\n <span class=\"ax-button-text\">{{ loadingText() }}</span>\n }\n\n <ng-content select=\"ax-suffix\"> </ng-content>\n <ng-content select=\"ax-dropdown-panel\"> </ng-content>\n <ng-content select=\".tab-content\"> </ng-content>\n\n <ng-content></ng-content>\n</button>\n", styles: ["ax-button{--ax-comp-button-padding-y: 0;--ax-comp-button-border-radius: var(--ax-sys-border-radius);--ax-comp-button-height: calc(var(--ax-sys-size-base) * var(--ax-comp-button-size-ratio, 1));--ax-comp-button-text-padding-x: .5rem}ax-button ax-prefix{display:flex;padding-inline-start:var(--ax-comp-button-decorator-padding-x)}ax-button ax-suffix{display:flex;padding-inline-end:var(--ax-comp-button-decorator-padding-x)}ax-button.ax-button-icon{--ax-comp-button-decorator-padding-x: 0 !important;font-size:var(--ax-comp-button-icon-only-font-size)}.ax-xs ax-button,ax-button.ax-xs{--ax-comp-button-font-size: .75rem;--ax-comp-button-padding-x: .25rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: .875rem}.ax-sm ax-button,ax-button.ax-sm{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: .5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1rem}.ax-md ax-button,ax-button{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: 1rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: 1.25rem}.ax-lg ax-button,ax-button.ax-lg{--ax-comp-button-font-size: 1.125rem;--ax-comp-button-padding-x: 1.125rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.5rem}.ax-xl ax-button,ax-button.ax-xl{--ax-comp-button-font-size: 1.5rem;--ax-comp-button-padding-x: 1.5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.75rem}ax-button.ax-solid{--ax-comp-button-border-width: 1px}ax-button.ax-solid>button:focus-visible,ax-button.ax-solid>button.ax-state-focus{outline:2px solid;outline-offset:3px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-solid.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-darkest-surface)}ax-button.ax-solid.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-darkest-surface)}ax-button.ax-solid.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-darkest-surface)}ax-button.ax-solid.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-darkest-surface)}ax-button.ax-solid.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-darkest-surface)}ax-button.ax-solid.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-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-twotone.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-darker-surface)}.ax-dark ax-button.ax-twotone.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-lighter-surface)}ax-button.ax-twotone{--ax-comp-button-border-width: 1px}ax-button.ax-twotone>button:focus-visible,ax-button.ax-twotone>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-twotone.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-twotone.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-twotone.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-twotone.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-twotone.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-blank.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-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-link.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-link.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-link{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-link>button:focus-visible,ax-button.ax-link>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-link.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface)}ax-button.ax-link.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface)}ax-button.ax-link.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface)}ax-button.ax-link.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface)}ax-button.ax-link.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface)}ax-button-item.ax-primary{--ax-comp-button-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-primary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-primary-surface)}ax-button-item.ax-secondary{--ax-comp-button-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-secondary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-secondary-surface)}ax-button-item.ax-success{--ax-comp-button-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-success-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-success-surface)}ax-button-item.ax-warning{--ax-comp-button-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-warning-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-warning-surface)}ax-button-item.ax-danger{--ax-comp-button-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-danger-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-danger-surface)}ax-button{position:relative;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;transition-property:background-color,border-color,color;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"] }]
|
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"] }]
|
417
411
|
}], propDecorators: { __hostClass: [{
|
418
412
|
type: HostBinding,
|
419
413
|
args: ['class']
|
@@ -422,11 +416,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
422
416
|
const COMPONENT = [AXButtonComponent, AXButtonItemComponent, AXButtonItemListComponent];
|
423
417
|
const MODULES = [CommonModule, AXCommonModule, AXDecoratorModule, AXLoadingModule, AXRippleDirective];
|
424
418
|
class AXButtonModule {
|
425
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
426
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
427
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
419
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AXButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
420
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.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.0.3", ngImport: i0, type: AXButtonModule, imports: [CommonModule, AXCommonModule, AXDecoratorModule, AXLoadingModule, AXButtonItemComponent, AXButtonItemListComponent] }); }
|
428
422
|
}
|
429
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
423
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AXButtonModule, decorators: [{
|
430
424
|
type: NgModule,
|
431
425
|
args: [{
|
432
426
|
imports: [MODULES, ...COMPONENT],
|