@maggioli-design-system/magma 1.0.0-beta → 1.0.1

package/dist/cjs/mds-breadcrumb.cjs.entry.js

@@ -2,9 +2,31 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 const arrowBack = require('./arrow-back-58b847f5.js');
-const keyboardManager = require('./keyboard-manager-fa9d665b.js');
+const keyboardManager = require('./keyboard-manager-952eef32.js');
+const locale = require('./locale-9add6645.js');
+require('./_commonjsHelpers-e6ff1d6e.js');
+
+const back$3 = "Πήγαινε πίσω";
+const localeEl = {
+	back: back$3
+};
+
+const back$2 = "Go back";
+const localeEn = {
+	back: back$2
+};
+
+const back$1 = "Volver atrás";
+const localeEs = {
+	back: back$1
+};
+
+const back = "Indietro";
+const localeIt = {
+	back: back
+};
 
 const mdsBreadcrumbCss = "@tailwind components; @tailwind utilities; :host{--mds-breadcrumb-arrow-depth-color:rgb(var(--tone-neutral-04));--mds-breadcrumb-button-background-current:rgb(var(--tone-neutral-09));--mds-breadcrumb-button-background-disabled:transparent;--mds-breadcrumb-button-background-hover:rgb(var(--tone-neutral-10));--mds-breadcrumb-button-background:transparent;--mds-breadcrumb-button-color-current:rgb(var(--tone-neutral-01));--mds-breadcrumb-button-color-disabled:rgb(var(--tone-neutral-06));--mds-breadcrumb-button-color-hover:rgb(var(--tone-neutral-02));--mds-breadcrumb-button-color:rgb(var(--tone-neutral-02));--mds-breadcrumb-current-button-color:rgb(var(--tone-neutral-05));-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none;gap:0rem;padding:0.5rem;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;overflow:auto;scroll-behavior:smooth;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;width:100%}:host::-webkit-scrollbar{display:none}.back{margin-right:0.25rem;--mds-button-background:var(--mds-breadcrumb-button-background);fill:var(--mds-breadcrumb-button-color);-ms-flex-negative:0;flex-shrink:0}.back:hover{--mds-button-background:var(--mds-breadcrumb-button-background-hover);fill:var(--mds-breadcrumb-button-color-hover)}.disabled{--mds-button-background:var(--mds-breadcrumb-button-background-disabled);fill:var(--mds-breadcrumb-button-color-disabled);pointer-events:none}";
 const MdsBreadcrumbStyle0 = mdsBreadcrumbCss;
@@ -14,6 +36,12 @@ const MdsBreadcrumb = class {
         index.registerInstance(this, hostRef);
         this.changedEvent = index.createEvent(this, "mdsBreadcrumbChange", 7);
         this.kb = new keyboardManager.KeyboardManager();
+        this.t = new locale.Locale({
+            el: localeEl,
+            en: localeEn,
+            es: localeEs,
+            it: localeIt,
+        });
         this.queryItems = () => this.element.querySelectorAll('mds-breadcrumb-item');
         this.updateBackButton = (id) => {
             var _a;
@@ -47,8 +75,12 @@ const MdsBreadcrumb = class {
         this.onChanged = (id, caller) => {
             this.changedEvent.emit({ id: id.toString(), caller });
         };
+        this.language = undefined;
         this.back = true;
     }
+    async updateLang() {
+        this.language = this.t.lang(this.element);
+    }
     componentDidLoad() {
         var _a;
         const items = this.queryItems();
@@ -73,6 +105,9 @@ const MdsBreadcrumb = class {
         }
         this.kb.detachClickBehavior();
     }
+    componentWillRender() {
+        this.t.lang(this.element);
+    }
     disconnectedCallback() {
         this.kb.detachClickBehavior();
     }
@@ -89,8 +124,8 @@ const MdsBreadcrumb = class {
         this.onChanged(selectedId, event.target);
     }
     render() {
-        return (index.h(index.Host, { key: '811a3bfb64f35b4e271c2d347fbb4feeab697250' }, this.back &&
-            index.h("mds-button", { key: 'b932a7c994f692e07a7d6b4568ede0a1be469dbe', class: "back", icon: arrowBack.miBaselineArrowBack, onClick: this.togglePrevious }), index.h("slot", { key: 'bf2616eacdcdcbf4ce723c2fd41102b8d72ebad2' })));
+        return (index.h(index.Host, { key: '897713224e58733a2981ff8ba737cf2b05cfa3c0' }, this.back &&
+            index.h("mds-button", { key: '65402701ac1bee13a4b115a7601e0397dcb022b5', title: this.t.get('back'), class: "back", icon: arrowBack.miBaselineArrowBack, onClick: this.togglePrevious }), index.h("slot", { key: 'a3301ec42c30ef181670e561685386783f06dee5' })));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/mds-button_3.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 const clsx = require('./clsx-fc789adc.js');
-const keyboardManager = require('./keyboard-manager-fa9d665b.js');
-const aria = require('./aria-8237fdab.js');
+const keyboardManager = require('./keyboard-manager-952eef32.js');
+const aria = require('./aria-0b8ae8a3.js');
 
 const buttonSizeTypographyVariant = {
     sm: 'action',
@@ -29,7 +29,7 @@ const isIconFormatIsSVG = (icon) => {
     return icon.startsWith(MARKUP_SVG_ICON);
 };
 
-const mdsButtonCss = "@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n\n@keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-button-await-duration: Sets the duration of the rotation of the spinner await component\n * @prop --mds-button-background: Sets the background-color of the component\n * @prop --mds-button-border-color: Sets the border-color of the component\n * @prop --mds-button-color: Sets the text color of the component\n * @prop --mds-button-gap: Sets the distance betwen element inside the components, use it instead of setting gap property directly.\n * @prop --mds-button-radius: Sets the border-radius of the component\n */\n\n:host {\n\n  --mds-button-await-duration: 0.725s;\n  --mds-button-background: rgb(var(--brand-maggioli-02));\n  --mds-button-border-color: transparent;\n  --mds-button-color: rgb(var(--tone-neutral));\n  --mds-button-gap: 0.5rem;\n  --mds-button-radius: 0.5rem;\n    -webkit-animation-duration: var(--magma-outline-animation-duration, 1s);\n    animation-duration: var(--magma-outline-animation-duration, 1s);\n    -webkit-animation-fill-mode: forwards;\n    animation-fill-mode: forwards;\n    -webkit-animation-iteration-count: infinite;\n    animation-iteration-count: infinite;\n    -webkit-animation-name: focus-bounce;\n    animation-name: focus-bounce;\n    -webkit-animation-play-state: paused;\n    animation-play-state: paused;\n    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    outline: var(--magma-outline-blur);\n    -webkit-transition-duration: 200ms;\n    transition-duration: 200ms;\n    -webkit-transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;\n    -webkit-transition-timing-function: ease-in-out;\n    transition-timing-function: ease-in-out;\n}\n\n:host:focus-visible {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n  }\n\n:host {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-button-background);\n  border-color: var(--mds-button-border-color);\n  border-radius: var(--mds-button-radius);\n  border-style: solid;\n  border-width: 2px;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color: var(--mds-button-color);\n  cursor: pointer;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  fill: currentcolor;\n  gap: var(--mds-button-gap);\n  -ms-flex-pack: center;\n  justify-content: center;\n  position: relative;\n  -webkit-transition-property: background-color, border-color, color, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, color, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, box-shadow, color, transform, outline, outline-offset;\n  transition-property: background-color, border-color, box-shadow, color, transform, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n}\n\n:host(:focus-visible) {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n\n    z-index: 10;\n  }\n\n.text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  min-width: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n.text::first-letter {\n  text-transform: uppercase;\n}\n\n.icon {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  fill: inherit;\n  -ms-flex-pack: center;\n  justify-content: center;\n  pointer-events: none;\n  -webkit-transition-property: fill;\n  transition-property: fill;\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n  opacity: 0.5;\n\n  pointer-events: none;\n}\n\n.await {\n  height: 1.5rem;\n  width: 1.5rem;\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  margin-right: calc(calc(-1 * var(--mds-button-gap)) - 1.5rem);\n  -webkit-transition-property: margin-right;\n  transition-property: margin-right;\n}\n\n.spinner {\n  height: 1.5rem;\n  width: 1.5rem;\n\n  --mds-spinner-duration: var(--mds-button-await-duration);\n\n  color: currentcolor;\n}\n\n:host(:not([await])) .spinner,\n:host([await=\"false\"]) .spinner {\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n:host([await]:not([await=\"false\"])) .await {\n  margin-right: 0rem;\n}\n\n:host([await]:not([await=\"false\"])) {\n  pointer-events: none;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"primary\"] ),\n:host( [variant=\"primary\"][tone=\"strong\"] ) {\n\n  --mds-button-background: rgb(var(--brand-maggioli-03));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant=\"primary\"]:hover ),\n:host( [variant=\"primary\"][tone=\"strong\"]:hover ) {\n\n  --mds-button-background: rgb(var(--brand-maggioli-04));\n}\n\n:host( [variant=\"primary\"][active] ),\n:host( [variant=\"primary\"][tone=\"strong\"][active] ) {\n\n  --mds-button-background: rgb(var(--brand-maggioli-02));\n}\n\n:host( [variant=\"primary\"][tone=\"weak\"] ) {\n\n  --mds-button-background: rgb(var(--brand-maggioli-09));\n  --mds-button-color: rgb(var(--brand-maggioli-03));\n\n  fill: rgb(var(--brand-maggioli-03));\n}\n\n:host( [variant=\"primary\"][tone=\"weak\"]:hover ) {\n\n  --mds-button-background: rgb(var(--brand-maggioli-08));\n\n}\n\n:host( [variant=\"primary\"][tone=\"weak\"][active] ) {\n\n  --mds-button-background: rgb(var(--brand-maggioli-08));\n  --mds-button-color: rgb(var(--brand-maggioli-02));\n\n  fill: rgb(var(--brand-maggioli-02));\n}\n\n:host( [variant=\"primary\"][tone=\"ghost\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--brand-maggioli-04));\n  --mds-button-color: rgb(var(--brand-maggioli-03));\n}\n\n:host( [variant=\"primary\"][tone=\"ghost\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--brand-maggioli-04));\n  --mds-button-color: rgb(var(--brand-maggioli-02));\n}\n\n:host( [variant=\"primary\"][tone=\"ghost\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--brand-maggioli-05));\n  --mds-button-color: rgb(var(--brand-maggioli-03));\n}\n\n:host( [variant=\"primary\"][tone=\"quiet\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--brand-maggioli-02));\n}\n\n:host( [variant=\"primary\"][tone=\"quiet\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--brand-maggioli-04));\n}\n\n:host( [variant=\"primary\"][tone=\"quiet\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--brand-maggioli-01));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host( [variant=\"primary\"] ),\n  :host( [variant=\"primary\"][tone=\"strong\"] ) {\n\n    --mds-button-background: rgb(var(--brand-maggioli-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host( [variant=\"primary\"]:hover ),\n  :host( [variant=\"primary\"][tone=\"strong\"]:hover ) {\n\n    --mds-button-background: rgb(var(--brand-maggioli-02));\n  }\n\n  :host( [variant=\"primary\"][active] ),\n  :host( [variant=\"primary\"][tone=\"strong\"][active] ) {\n\n    --mds-button-background: rgb(var(--brand-maggioli-02));\n  }\n\n  :host( [variant=\"primary\"][tone=\"weak\"] ) {\n\n    --mds-button-background: rgb(var(--brand-maggioli-09));\n    --mds-button-color: rgb(var(--brand-maggioli-02));\n\n    fill: rgb(var(--brand-maggioli-02));\n  }\n\n  :host( [variant=\"primary\"][tone=\"weak\"]:hover ) {\n\n    --mds-button-background: rgb(var(--brand-maggioli-08));\n    --mds-button-color: rgb(var(--brand-maggioli-01));\n\n    fill: rgb(var(--brand-maggioli-01));\n  }\n\n  :host( [variant=\"primary\"][tone=\"weak\"][active] ) {\n\n    --mds-button-background: rgb(var(--brand-maggioli-08));\n    --mds-button-color: rgb(var(--brand-maggioli-01));\n\n    fill: rgb(var(--brand-maggioli-01));\n  }\n\n  :host( [variant=\"primary\"][tone=\"ghost\"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--brand-maggioli-03));\n    --mds-button-color: rgb(var(--brand-maggioli-02));\n  }\n\n  :host( [variant=\"primary\"][tone=\"ghost\"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--brand-maggioli-03));\n    --mds-button-color: rgb(var(--brand-maggioli-01));\n  }\n\n  :host( [variant=\"primary\"][tone=\"ghost\"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--brand-maggioli-04));\n    --mds-button-color: rgb(var(--brand-maggioli-02));\n  }\n\n  :host( [variant=\"primary\"][tone=\"quiet\"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--brand-maggioli-01));\n  }\n\n  :host( [variant=\"primary\"][tone=\"quiet\"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--brand-maggioli-03));\n  }\n\n  :host( [variant=\"primary\"][tone=\"quiet\"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--brand-maggioli-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host( [variant=\"primary\"] ),\n    :host( [variant=\"primary\"][tone=\"strong\"] ) {\n\n      --mds-button-background: rgb(var(--brand-maggioli-03));\n      --mds-button-color: rgb(var(--tone-neutral));\n    }\n\n    :host( [variant=\"primary\"]:hover ),\n    :host( [variant=\"primary\"][tone=\"strong\"]:hover ) {\n\n      --mds-button-background: rgb(var(--brand-maggioli-01));\n    }\n\n    :host( [variant=\"primary\"][active] ),\n    :host( [variant=\"primary\"][tone=\"strong\"][active] ) {\n\n      --mds-button-background: rgb(var(--brand-maggioli-02));\n    }\n\n    :host( [variant=\"primary\"][tone=\"weak\"] ) {\n\n      --mds-button-background: rgb(var(--brand-maggioli-09));\n      --mds-button-color: rgb(var(--brand-maggioli-02));\n  \n      fill: rgb(var(--brand-maggioli-02));\n    }\n\n    :host( [variant=\"primary\"][tone=\"weak\"]:hover ) {\n  \n      --mds-button-background: rgb(var(--brand-maggioli-08));\n      --mds-button-color: rgb(var(--brand-maggioli-01));\n  \n      fill: rgb(var(--brand-maggioli-01));\n    }\n\n    :host( [variant=\"primary\"][tone=\"weak\"][active] ) {\n  \n      --mds-button-background: rgb(var(--brand-maggioli-08));\n      --mds-button-color: rgb(var(--brand-maggioli-01));\n  \n      fill: rgb(var(--brand-maggioli-01));\n    }\n\n    :host( [variant=\"primary\"][tone=\"ghost\"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--brand-maggioli-03));\n      --mds-button-color: rgb(var(--brand-maggioli-02));\n    }\n\n    :host( [variant=\"primary\"][tone=\"ghost\"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--brand-maggioli-03));\n      --mds-button-color: rgb(var(--brand-maggioli-01));\n    }\n\n    :host( [variant=\"primary\"][tone=\"ghost\"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--brand-maggioli-04));\n      --mds-button-color: rgb(var(--brand-maggioli-02));\n    }\n\n    :host( [variant=\"primary\"][tone=\"quiet\"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--brand-maggioli-01));\n    }\n\n    :host( [variant=\"primary\"][tone=\"quiet\"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--brand-maggioli-03));\n    }\n\n    :host( [variant=\"primary\"][tone=\"quiet\"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--brand-maggioli-01));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host( [variant=\"secondary\"] ),\n:host( [variant=\"secondary\"][tone=\"strong\"] ) {\n\n  --mds-button-background: rgb(var(--brand-maggioli-editore-03));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant=\"secondary\"]:hover ),\n:host( [variant=\"secondary\"][tone=\"strong\"]:hover ) {\n\n  --mds-button-background: rgb(var(--brand-maggioli-editore-04));\n}\n\n:host( [variant=\"secondary\"][active] ),\n:host( [variant=\"secondary\"][tone=\"strong\"][active] ) {\n\n  --mds-button-background: rgb(var(--brand-maggioli-editore-02));\n}\n\n:host( [variant=\"secondary\"][tone=\"weak\"] ) {\n\n  --mds-button-background: rgb(var(--brand-maggioli-editore-09));\n  --mds-button-color: rgb(var(--brand-maggioli-editore-03));\n\n  fill: rgb(var(--brand-maggioli-editore-03));\n}\n\n:host( [variant=\"secondary\"][tone=\"weak\"]:hover ) {\n\n  --mds-button-background: rgb(var(--brand-maggioli-editore-08));\n\n}\n\n:host( [variant=\"secondary\"][tone=\"weak\"][active] ) {\n\n  --mds-button-background: rgb(var(--brand-maggioli-editore-08));\n  --mds-button-color: rgb(var(--brand-maggioli-editore-02));\n\n  fill: rgb(var(--brand-maggioli-editore-02));\n}\n\n:host( [variant=\"secondary\"][tone=\"ghost\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--brand-maggioli-editore-04));\n  --mds-button-color: rgb(var(--brand-maggioli-editore-03));\n}\n\n:host( [variant=\"secondary\"][tone=\"ghost\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--brand-maggioli-editore-04));\n  --mds-button-color: rgb(var(--brand-maggioli-editore-02));\n}\n\n:host( [variant=\"secondary\"][tone=\"ghost\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--brand-maggioli-editore-05));\n  --mds-button-color: rgb(var(--brand-maggioli-editore-03));\n}\n\n:host( [variant=\"secondary\"][tone=\"quiet\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--brand-maggioli-editore-02));\n}\n\n:host( [variant=\"secondary\"][tone=\"quiet\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--brand-maggioli-editore-04));\n}\n\n:host( [variant=\"secondary\"][tone=\"quiet\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--brand-maggioli-editore-01));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host( [variant=\"secondary\"] ),\n  :host( [variant=\"secondary\"][tone=\"strong\"] ) {\n\n    --mds-button-background: rgb(var(--brand-maggioli-editore-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host( [variant=\"secondary\"]:hover ),\n  :host( [variant=\"secondary\"][tone=\"strong\"]:hover ) {\n\n    --mds-button-background: rgb(var(--brand-maggioli-editore-02));\n  }\n\n  :host( [variant=\"secondary\"][active] ),\n  :host( [variant=\"secondary\"][tone=\"strong\"][active] ) {\n\n    --mds-button-background: rgb(var(--brand-maggioli-editore-02));\n  }\n\n  :host( [variant=\"secondary\"][tone=\"weak\"] ) {\n\n    --mds-button-background: rgb(var(--brand-maggioli-editore-09));\n    --mds-button-color: rgb(var(--brand-maggioli-editore-02));\n\n    fill: rgb(var(--brand-maggioli-editore-02));\n  }\n\n  :host( [variant=\"secondary\"][tone=\"weak\"]:hover ) {\n\n    --mds-button-background: rgb(var(--brand-maggioli-editore-08));\n    --mds-button-color: rgb(var(--brand-maggioli-editore-01));\n\n    fill: rgb(var(--brand-maggioli-editore-01));\n  }\n\n  :host( [variant=\"secondary\"][tone=\"weak\"][active] ) {\n\n    --mds-button-background: rgb(var(--brand-maggioli-editore-08));\n    --mds-button-color: rgb(var(--brand-maggioli-editore-01));\n\n    fill: rgb(var(--brand-maggioli-editore-01));\n  }\n\n  :host( [variant=\"secondary\"][tone=\"ghost\"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--brand-maggioli-editore-03));\n    --mds-button-color: rgb(var(--brand-maggioli-editore-02));\n  }\n\n  :host( [variant=\"secondary\"][tone=\"ghost\"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--brand-maggioli-editore-03));\n    --mds-button-color: rgb(var(--brand-maggioli-editore-01));\n  }\n\n  :host( [variant=\"secondary\"][tone=\"ghost\"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--brand-maggioli-editore-04));\n    --mds-button-color: rgb(var(--brand-maggioli-editore-02));\n  }\n\n  :host( [variant=\"secondary\"][tone=\"quiet\"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--brand-maggioli-editore-01));\n  }\n\n  :host( [variant=\"secondary\"][tone=\"quiet\"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--brand-maggioli-editore-03));\n  }\n\n  :host( [variant=\"secondary\"][tone=\"quiet\"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--brand-maggioli-editore-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host( [variant=\"secondary\"] ),\n    :host( [variant=\"secondary\"][tone=\"strong\"] ) {\n\n      --mds-button-background: rgb(var(--brand-maggioli-editore-03));\n      --mds-button-color: rgb(var(--tone-neutral));\n    }\n\n    :host( [variant=\"secondary\"]:hover ),\n    :host( [variant=\"secondary\"][tone=\"strong\"]:hover ) {\n\n      --mds-button-background: rgb(var(--brand-maggioli-editore-01));\n    }\n\n    :host( [variant=\"secondary\"][active] ),\n    :host( [variant=\"secondary\"][tone=\"strong\"][active] ) {\n\n      --mds-button-background: rgb(var(--brand-maggioli-editore-02));\n    }\n\n    :host( [variant=\"secondary\"][tone=\"weak\"] ) {\n\n      --mds-button-background: rgb(var(--brand-maggioli-editore-09));\n      --mds-button-color: rgb(var(--brand-maggioli-editore-02));\n\n      fill: rgb(var(--brand-maggioli-editore-02));\n    }\n\n    :host( [variant=\"secondary\"][tone=\"weak\"]:hover ) {\n\n      --mds-button-background: rgb(var(--brand-maggioli-editore-08));\n      --mds-button-color: rgb(var(--brand-maggioli-editore-01));\n\n      fill: rgb(var(--brand-maggioli-editore-01));\n    }\n\n    :host( [variant=\"secondary\"][tone=\"weak\"][active] ) {\n\n      --mds-button-background: rgb(var(--brand-maggioli-editore-08));\n      --mds-button-color: rgb(var(--brand-maggioli-editore-01));\n\n      fill: rgb(var(--brand-maggioli-editore-01));\n    }\n\n    :host( [variant=\"secondary\"][tone=\"ghost\"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--brand-maggioli-editore-03));\n      --mds-button-color: rgb(var(--brand-maggioli-editore-02));\n    }\n\n    :host( [variant=\"secondary\"][tone=\"ghost\"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--brand-maggioli-editore-03));\n      --mds-button-color: rgb(var(--brand-maggioli-editore-01));\n    }\n\n    :host( [variant=\"secondary\"][tone=\"ghost\"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--brand-maggioli-editore-04));\n      --mds-button-color: rgb(var(--brand-maggioli-editore-02));\n    }\n\n    :host( [variant=\"secondary\"][tone=\"quiet\"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--brand-maggioli-editore-01));\n    }\n\n    :host( [variant=\"secondary\"][tone=\"quiet\"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--brand-maggioli-editore-03));\n    }\n\n    :host( [variant=\"secondary\"][tone=\"quiet\"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--brand-maggioli-editore-01));\n    }\n  }\n}\n\n:host( [variant=\"dark\"] ),\n:host( [variant=\"dark\"][tone=\"strong\"] ) {\n\n  --mds-button-background: rgb(var(--tone-neutral-04));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant=\"dark\"]:hover ),\n:host( [variant=\"dark\"][tone=\"strong\"]:hover ) {\n\n  --mds-button-background: rgb(var(--tone-neutral-05));\n}\n\n:host( [variant=\"dark\"][active] ),\n:host( [variant=\"dark\"][tone=\"strong\"][active] ) {\n\n  --mds-button-background: rgb(var(--tone-neutral-03));\n}\n\n:host( [variant=\"dark\"][tone=\"weak\"] ) {\n\n  --mds-button-background: rgb(var(--tone-neutral-05));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant=\"dark\"][tone=\"weak\"]:hover ) {\n\n  --mds-button-background: rgb(var(--tone-neutral-06));\n}\n\n:host( [variant=\"dark\"][tone=\"weak\"][active] ) {\n\n  --mds-button-background: rgb(var(--tone-neutral-04));\n}\n\n:host( [variant=\"dark\"][tone=\"ghost\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--tone-neutral-03));\n  --mds-button-color: rgb(var(--tone-neutral-03));\n}\n\n:host( [variant=\"dark\"][tone=\"ghost\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--tone-neutral-04));\n  --mds-button-color: rgb(var(--tone-neutral-04));\n}\n\n:host( [variant=\"dark\"][tone=\"ghost\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--tone-neutral-02));\n  --mds-button-color: rgb(var(--tone-neutral-02));\n}\n\n:host( [variant=\"dark\"][tone=\"quiet\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--tone-neutral-02));\n}\n\n:host( [variant=\"dark\"][tone=\"quiet\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--tone-neutral-04));\n}\n\n:host( [variant=\"dark\"][tone=\"quiet\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--tone-neutral-02));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"light\"] ),\n:host( [variant=\"light\"][tone=\"strong\"] ) {\n\n  --mds-button-background: rgb(var(--tone-neutral));\n  --mds-button-color: rgb(var(--tone-neutral-03));\n}\n\n:host( [variant=\"light\"]:hover ),\n:host( [variant=\"light\"][tone=\"strong\"]:hover ) {\n\n  --mds-button-color: rgb(var(--tone-neutral-04));\n}\n\n:host( [variant=\"light\"][active] ),\n:host( [variant=\"light\"][tone=\"strong\"][active] ) {\n\n  --mds-button-color: rgb(var(--tone-neutral-02));\n}\n\n:host( [variant=\"light\"][tone=\"weak\"] ) {\n\n  --mds-button-background: rgb(var(--tone-neutral));\n  --mds-button-color: rgb(var(--tone-neutral-05));\n}\n\n:host( [variant=\"light\"][tone=\"weak\"]:hover ) {\n\n  --mds-button-color: rgb(var(--tone-neutral-04));\n}\n\n:host( [variant=\"light\"][tone=\"weak\"][active] ) {\n\n  --mds-button-color: rgb(var(--tone-neutral-03));\n}\n\n:host( [variant=\"light\"][tone=\"ghost\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--tone-neutral));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant=\"light\"][tone=\"ghost\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--tone-neutral));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant=\"light\"][tone=\"ghost\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--tone-neutral));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant=\"light\"][tone=\"quiet\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant=\"light\"][tone=\"quiet\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant=\"light\"][tone=\"quiet\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"error\"] ),\n:host( [variant=\"error\"][tone=\"strong\"] ) {\n\n  --mds-button-background: rgb(var(--status-error-05));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant=\"error\"]:hover ),\n:host( [variant=\"error\"][tone=\"strong\"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-error-04));\n}\n\n:host( [variant=\"error\"][active] ),\n:host( [variant=\"error\"][tone=\"strong\"][active] ) {\n\n  --mds-button-background: rgb(var(--status-error-06));\n}\n\n:host( [variant=\"error\"][tone=\"weak\"] ) {\n\n  --mds-button-background: rgb(var(--status-error-09));\n  --mds-button-color: rgb(var(--status-error-03));\n\n  fill: rgb(var(--status-error-03));\n}\n\n:host( [variant=\"error\"][tone=\"weak\"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-error-08));\n\n}\n\n:host( [variant=\"error\"][tone=\"weak\"][active] ) {\n\n  --mds-button-background: rgb(var(--status-error-08));\n  --mds-button-color: rgb(var(--status-error-02));\n\n  fill: rgb(var(--status-error-02));\n}\n\n:host( [variant=\"error\"][tone=\"ghost\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-error-04));\n  --mds-button-color: rgb(var(--status-error-03));\n}\n\n:host( [variant=\"error\"][tone=\"ghost\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-error-04));\n  --mds-button-color: rgb(var(--status-error-02));\n}\n\n:host( [variant=\"error\"][tone=\"ghost\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-error-05));\n  --mds-button-color: rgb(var(--status-error-03));\n}\n\n:host( [variant=\"error\"][tone=\"quiet\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-error-02));\n}\n\n:host( [variant=\"error\"][tone=\"quiet\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-error-04));\n}\n\n:host( [variant=\"error\"][tone=\"quiet\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-error-01));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host( [variant=\"error\"] ),\n  :host( [variant=\"error\"][tone=\"strong\"] ) {\n\n    --mds-button-background: rgb(var(--status-error-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host( [variant=\"error\"]:hover ),\n  :host( [variant=\"error\"][tone=\"strong\"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-error-01));\n  }\n\n  :host( [variant=\"error\"][active] ),\n  :host( [variant=\"error\"][tone=\"strong\"][active] ) {\n\n    --mds-button-background: rgb(var(--status-error-04));\n  }\n\n  :host( [variant=\"error\"][tone=\"weak\"] ) {\n\n    --mds-button-background: rgb(var(--status-error-09));\n    --mds-button-color: rgb(var(--status-error-02));\n\n    fill: rgb(var(--status-error-02));\n  }\n\n  :host( [variant=\"error\"][tone=\"weak\"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-error-08));\n    --mds-button-color: rgb(var(--status-error-01));\n\n    fill: rgb(var(--status-error-01));\n  }\n\n  :host( [variant=\"error\"][tone=\"weak\"][active] ) {\n\n    --mds-button-background: rgb(var(--status-error-08));\n    --mds-button-color: rgb(var(--status-error-01));\n\n    fill: rgb(var(--status-error-01));\n  }\n\n  :host( [variant=\"error\"][tone=\"ghost\"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-error-03));\n    --mds-button-color: rgb(var(--status-error-02));\n  }\n\n  :host( [variant=\"error\"][tone=\"ghost\"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-error-03));\n    --mds-button-color: rgb(var(--status-error-01));\n  }\n\n  :host( [variant=\"error\"][tone=\"ghost\"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-error-04));\n    --mds-button-color: rgb(var(--status-error-02));\n  }\n\n  :host( [variant=\"error\"][tone=\"quiet\"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-error-01));\n  }\n\n  :host( [variant=\"error\"][tone=\"quiet\"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-error-03));\n  }\n\n  :host( [variant=\"error\"][tone=\"quiet\"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-error-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host( [variant=\"error\"] ),\n    :host( [variant=\"error\"][tone=\"strong\"] ) {\n\n      --mds-button-background: rgb(var(--status-error-03));\n      --mds-button-color: rgb(var(--tone-neutral));\n    }\n\n    :host( [variant=\"error\"]:hover ),\n    :host( [variant=\"error\"][tone=\"strong\"]:hover ) {\n\n      --mds-button-background: rgb(var(--status-error-01));\n    }\n\n    :host( [variant=\"error\"][active] ),\n    :host( [variant=\"error\"][tone=\"strong\"][active] ) {\n\n      --mds-button-background: rgb(var(--status-error-04));\n    }\n\n    :host( [variant=\"error\"][tone=\"weak\"] ) {\n\n      --mds-button-background: rgb(var(--status-error-09));\n      --mds-button-color: rgb(var(--status-error-02));\n  \n      fill: rgb(var(--status-error-02));\n    }\n\n    :host( [variant=\"error\"][tone=\"weak\"]:hover ) {\n  \n      --mds-button-background: rgb(var(--status-error-08));\n      --mds-button-color: rgb(var(--status-error-01));\n  \n      fill: rgb(var(--status-error-01));\n    }\n\n    :host( [variant=\"error\"][tone=\"weak\"][active] ) {\n  \n      --mds-button-background: rgb(var(--status-error-08));\n      --mds-button-color: rgb(var(--status-error-01));\n  \n      fill: rgb(var(--status-error-01));\n    }\n\n    :host( [variant=\"error\"][tone=\"ghost\"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-error-03));\n      --mds-button-color: rgb(var(--status-error-02));\n    }\n\n    :host( [variant=\"error\"][tone=\"ghost\"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-error-03));\n      --mds-button-color: rgb(var(--status-error-01));\n    }\n\n    :host( [variant=\"error\"][tone=\"ghost\"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-error-04));\n      --mds-button-color: rgb(var(--status-error-02));\n    }\n\n    :host( [variant=\"error\"][tone=\"quiet\"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-error-01));\n    }\n\n    :host( [variant=\"error\"][tone=\"quiet\"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-error-03));\n    }\n\n    :host( [variant=\"error\"][tone=\"quiet\"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-error-01));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host( [variant=\"warning\"] ),\n:host( [variant=\"warning\"][tone=\"strong\"] ) {\n\n  --mds-button-background: rgb(var(--status-warning-05));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant=\"warning\"]:hover ),\n:host( [variant=\"warning\"][tone=\"strong\"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-warning-04));\n}\n\n:host( [variant=\"warning\"][active] ),\n:host( [variant=\"warning\"][tone=\"strong\"][active] ) {\n\n  --mds-button-background: rgb(var(--status-warning-06));\n}\n\n:host( [variant=\"warning\"][tone=\"weak\"] ) {\n\n  --mds-button-background: rgb(var(--status-warning-09));\n  --mds-button-color: rgb(var(--status-warning-03));\n\n  fill: rgb(var(--status-warning-03));\n}\n\n:host( [variant=\"warning\"][tone=\"weak\"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-warning-08));\n\n}\n\n:host( [variant=\"warning\"][tone=\"weak\"][active] ) {\n\n  --mds-button-background: rgb(var(--status-warning-08));\n  --mds-button-color: rgb(var(--status-warning-02));\n\n  fill: rgb(var(--status-warning-02));\n}\n\n:host( [variant=\"warning\"][tone=\"ghost\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-warning-04));\n  --mds-button-color: rgb(var(--status-warning-03));\n}\n\n:host( [variant=\"warning\"][tone=\"ghost\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-warning-04));\n  --mds-button-color: rgb(var(--status-warning-02));\n}\n\n:host( [variant=\"warning\"][tone=\"ghost\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-warning-05));\n  --mds-button-color: rgb(var(--status-warning-03));\n}\n\n:host( [variant=\"warning\"][tone=\"quiet\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-warning-02));\n}\n\n:host( [variant=\"warning\"][tone=\"quiet\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-warning-04));\n}\n\n:host( [variant=\"warning\"][tone=\"quiet\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-warning-01));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host( [variant=\"warning\"] ),\n  :host( [variant=\"warning\"][tone=\"strong\"] ) {\n\n    --mds-button-background: rgb(var(--status-warning-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host( [variant=\"warning\"]:hover ),\n  :host( [variant=\"warning\"][tone=\"strong\"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-warning-01));\n  }\n\n  :host( [variant=\"warning\"][active] ),\n  :host( [variant=\"warning\"][tone=\"strong\"][active] ) {\n\n    --mds-button-background: rgb(var(--status-warning-04));\n  }\n\n  :host( [variant=\"warning\"][tone=\"weak\"] ) {\n\n    --mds-button-background: rgb(var(--status-warning-09));\n    --mds-button-color: rgb(var(--status-warning-02));\n\n    fill: rgb(var(--status-warning-02));\n  }\n\n  :host( [variant=\"warning\"][tone=\"weak\"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-warning-08));\n    --mds-button-color: rgb(var(--status-warning-01));\n\n    fill: rgb(var(--status-warning-01));\n  }\n\n  :host( [variant=\"warning\"][tone=\"weak\"][active] ) {\n\n    --mds-button-background: rgb(var(--status-warning-08));\n    --mds-button-color: rgb(var(--status-warning-01));\n\n    fill: rgb(var(--status-warning-01));\n  }\n\n  :host( [variant=\"warning\"][tone=\"ghost\"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-warning-03));\n    --mds-button-color: rgb(var(--status-warning-02));\n  }\n\n  :host( [variant=\"warning\"][tone=\"ghost\"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-warning-03));\n    --mds-button-color: rgb(var(--status-warning-01));\n  }\n\n  :host( [variant=\"warning\"][tone=\"ghost\"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-warning-04));\n    --mds-button-color: rgb(var(--status-warning-02));\n  }\n\n  :host( [variant=\"warning\"][tone=\"quiet\"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-warning-01));\n  }\n\n  :host( [variant=\"warning\"][tone=\"quiet\"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-warning-03));\n  }\n\n  :host( [variant=\"warning\"][tone=\"quiet\"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-warning-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host( [variant=\"warning\"] ),\n    :host( [variant=\"warning\"][tone=\"strong\"] ) {\n\n      --mds-button-background: rgb(var(--status-warning-03));\n      --mds-button-color: rgb(var(--tone-neutral));\n    }\n\n    :host( [variant=\"warning\"]:hover ),\n    :host( [variant=\"warning\"][tone=\"strong\"]:hover ) {\n\n      --mds-button-background: rgb(var(--status-warning-01));\n    }\n\n    :host( [variant=\"warning\"][active] ),\n    :host( [variant=\"warning\"][tone=\"strong\"][active] ) {\n\n      --mds-button-background: rgb(var(--status-warning-04));\n    }\n\n    :host( [variant=\"warning\"][tone=\"weak\"] ) {\n\n      --mds-button-background: rgb(var(--status-warning-09));\n      --mds-button-color: rgb(var(--status-warning-02));\n  \n      fill: rgb(var(--status-warning-02));\n    }\n\n    :host( [variant=\"warning\"][tone=\"weak\"]:hover ) {\n  \n      --mds-button-background: rgb(var(--status-warning-08));\n      --mds-button-color: rgb(var(--status-warning-01));\n  \n      fill: rgb(var(--status-warning-01));\n    }\n\n    :host( [variant=\"warning\"][tone=\"weak\"][active] ) {\n  \n      --mds-button-background: rgb(var(--status-warning-08));\n      --mds-button-color: rgb(var(--status-warning-01));\n  \n      fill: rgb(var(--status-warning-01));\n    }\n\n    :host( [variant=\"warning\"][tone=\"ghost\"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-warning-03));\n      --mds-button-color: rgb(var(--status-warning-02));\n    }\n\n    :host( [variant=\"warning\"][tone=\"ghost\"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-warning-03));\n      --mds-button-color: rgb(var(--status-warning-01));\n    }\n\n    :host( [variant=\"warning\"][tone=\"ghost\"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-warning-04));\n      --mds-button-color: rgb(var(--status-warning-02));\n    }\n\n    :host( [variant=\"warning\"][tone=\"quiet\"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-warning-01));\n    }\n\n    :host( [variant=\"warning\"][tone=\"quiet\"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-warning-03));\n    }\n\n    :host( [variant=\"warning\"][tone=\"quiet\"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-warning-01));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host( [variant=\"info\"] ),\n:host( [variant=\"info\"][tone=\"strong\"] ) {\n\n  --mds-button-background: rgb(var(--status-info-05));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant=\"info\"]:hover ),\n:host( [variant=\"info\"][tone=\"strong\"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-info-04));\n}\n\n:host( [variant=\"info\"][active] ),\n:host( [variant=\"info\"][tone=\"strong\"][active] ) {\n\n  --mds-button-background: rgb(var(--status-info-06));\n}\n\n:host( [variant=\"info\"][tone=\"weak\"] ) {\n\n  --mds-button-background: rgb(var(--status-info-09));\n  --mds-button-color: rgb(var(--status-info-03));\n\n  fill: rgb(var(--status-info-03));\n}\n\n:host( [variant=\"info\"][tone=\"weak\"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-info-08));\n\n}\n\n:host( [variant=\"info\"][tone=\"weak\"][active] ) {\n\n  --mds-button-background: rgb(var(--status-info-08));\n  --mds-button-color: rgb(var(--status-info-02));\n\n  fill: rgb(var(--status-info-02));\n}\n\n:host( [variant=\"info\"][tone=\"ghost\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-info-04));\n  --mds-button-color: rgb(var(--status-info-03));\n}\n\n:host( [variant=\"info\"][tone=\"ghost\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-info-04));\n  --mds-button-color: rgb(var(--status-info-02));\n}\n\n:host( [variant=\"info\"][tone=\"ghost\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-info-05));\n  --mds-button-color: rgb(var(--status-info-03));\n}\n\n:host( [variant=\"info\"][tone=\"quiet\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-info-02));\n}\n\n:host( [variant=\"info\"][tone=\"quiet\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-info-04));\n}\n\n:host( [variant=\"info\"][tone=\"quiet\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-info-01));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host( [variant=\"info\"] ),\n  :host( [variant=\"info\"][tone=\"strong\"] ) {\n\n    --mds-button-background: rgb(var(--status-info-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host( [variant=\"info\"]:hover ),\n  :host( [variant=\"info\"][tone=\"strong\"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-info-01));\n  }\n\n  :host( [variant=\"info\"][active] ),\n  :host( [variant=\"info\"][tone=\"strong\"][active] ) {\n\n    --mds-button-background: rgb(var(--status-info-04));\n  }\n\n  :host( [variant=\"info\"][tone=\"weak\"] ) {\n\n    --mds-button-background: rgb(var(--status-info-09));\n    --mds-button-color: rgb(var(--status-info-02));\n\n    fill: rgb(var(--status-info-02));\n  }\n\n  :host( [variant=\"info\"][tone=\"weak\"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-info-08));\n    --mds-button-color: rgb(var(--status-info-01));\n\n    fill: rgb(var(--status-info-01));\n  }\n\n  :host( [variant=\"info\"][tone=\"weak\"][active] ) {\n\n    --mds-button-background: rgb(var(--status-info-08));\n    --mds-button-color: rgb(var(--status-info-01));\n\n    fill: rgb(var(--status-info-01));\n  }\n\n  :host( [variant=\"info\"][tone=\"ghost\"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-info-03));\n    --mds-button-color: rgb(var(--status-info-02));\n  }\n\n  :host( [variant=\"info\"][tone=\"ghost\"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-info-03));\n    --mds-button-color: rgb(var(--status-info-01));\n  }\n\n  :host( [variant=\"info\"][tone=\"ghost\"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-info-04));\n    --mds-button-color: rgb(var(--status-info-02));\n  }\n\n  :host( [variant=\"info\"][tone=\"quiet\"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-info-01));\n  }\n\n  :host( [variant=\"info\"][tone=\"quiet\"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-info-03));\n  }\n\n  :host( [variant=\"info\"][tone=\"quiet\"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-info-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host( [variant=\"info\"] ),\n    :host( [variant=\"info\"][tone=\"strong\"] ) {\n\n      --mds-button-background: rgb(var(--status-info-03));\n      --mds-button-color: rgb(var(--tone-neutral));\n    }\n\n    :host( [variant=\"info\"]:hover ),\n    :host( [variant=\"info\"][tone=\"strong\"]:hover ) {\n\n      --mds-button-background: rgb(var(--status-info-01));\n    }\n\n    :host( [variant=\"info\"][active] ),\n    :host( [variant=\"info\"][tone=\"strong\"][active] ) {\n\n      --mds-button-background: rgb(var(--status-info-04));\n    }\n\n    :host( [variant=\"info\"][tone=\"weak\"] ) {\n\n      --mds-button-background: rgb(var(--status-info-09));\n      --mds-button-color: rgb(var(--status-info-02));\n  \n      fill: rgb(var(--status-info-02));\n    }\n\n    :host( [variant=\"info\"][tone=\"weak\"]:hover ) {\n  \n      --mds-button-background: rgb(var(--status-info-08));\n      --mds-button-color: rgb(var(--status-info-01));\n  \n      fill: rgb(var(--status-info-01));\n    }\n\n    :host( [variant=\"info\"][tone=\"weak\"][active] ) {\n  \n      --mds-button-background: rgb(var(--status-info-08));\n      --mds-button-color: rgb(var(--status-info-01));\n  \n      fill: rgb(var(--status-info-01));\n    }\n\n    :host( [variant=\"info\"][tone=\"ghost\"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-info-03));\n      --mds-button-color: rgb(var(--status-info-02));\n    }\n\n    :host( [variant=\"info\"][tone=\"ghost\"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-info-03));\n      --mds-button-color: rgb(var(--status-info-01));\n    }\n\n    :host( [variant=\"info\"][tone=\"ghost\"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-info-04));\n      --mds-button-color: rgb(var(--status-info-02));\n    }\n\n    :host( [variant=\"info\"][tone=\"quiet\"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-info-01));\n    }\n\n    :host( [variant=\"info\"][tone=\"quiet\"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-info-03));\n    }\n\n    :host( [variant=\"info\"][tone=\"quiet\"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-info-01));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host( [variant=\"success\"] ),\n:host( [variant=\"success\"][tone=\"strong\"] ) {\n\n  --mds-button-background: rgb(var(--status-success-05));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant=\"success\"]:hover ),\n:host( [variant=\"success\"][tone=\"strong\"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-success-04));\n}\n\n:host( [variant=\"success\"][active] ),\n:host( [variant=\"success\"][tone=\"strong\"][active] ) {\n\n  --mds-button-background: rgb(var(--status-success-06));\n}\n\n:host( [variant=\"success\"][tone=\"weak\"] ) {\n\n  --mds-button-background: rgb(var(--status-success-09));\n  --mds-button-color: rgb(var(--status-success-03));\n\n  fill: rgb(var(--status-success-03));\n}\n\n:host( [variant=\"success\"][tone=\"weak\"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-success-08));\n\n}\n\n:host( [variant=\"success\"][tone=\"weak\"][active] ) {\n\n  --mds-button-background: rgb(var(--status-success-08));\n  --mds-button-color: rgb(var(--status-success-02));\n\n  fill: rgb(var(--status-success-02));\n}\n\n:host( [variant=\"success\"][tone=\"ghost\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-success-04));\n  --mds-button-color: rgb(var(--status-success-03));\n}\n\n:host( [variant=\"success\"][tone=\"ghost\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-success-04));\n  --mds-button-color: rgb(var(--status-success-02));\n}\n\n:host( [variant=\"success\"][tone=\"ghost\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-success-05));\n  --mds-button-color: rgb(var(--status-success-03));\n}\n\n:host( [variant=\"success\"][tone=\"quiet\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-success-02));\n}\n\n:host( [variant=\"success\"][tone=\"quiet\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-success-04));\n}\n\n:host( [variant=\"success\"][tone=\"quiet\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-success-01));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host( [variant=\"success\"] ),\n  :host( [variant=\"success\"][tone=\"strong\"] ) {\n\n    --mds-button-background: rgb(var(--status-success-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host( [variant=\"success\"]:hover ),\n  :host( [variant=\"success\"][tone=\"strong\"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-success-01));\n  }\n\n  :host( [variant=\"success\"][active] ),\n  :host( [variant=\"success\"][tone=\"strong\"][active] ) {\n\n    --mds-button-background: rgb(var(--status-success-04));\n  }\n\n  :host( [variant=\"success\"][tone=\"weak\"] ) {\n\n    --mds-button-background: rgb(var(--status-success-09));\n    --mds-button-color: rgb(var(--status-success-02));\n\n    fill: rgb(var(--status-success-02));\n  }\n\n  :host( [variant=\"success\"][tone=\"weak\"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-success-08));\n    --mds-button-color: rgb(var(--status-success-01));\n\n    fill: rgb(var(--status-success-01));\n  }\n\n  :host( [variant=\"success\"][tone=\"weak\"][active] ) {\n\n    --mds-button-background: rgb(var(--status-success-08));\n    --mds-button-color: rgb(var(--status-success-01));\n\n    fill: rgb(var(--status-success-01));\n  }\n\n  :host( [variant=\"success\"][tone=\"ghost\"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-success-03));\n    --mds-button-color: rgb(var(--status-success-02));\n  }\n\n  :host( [variant=\"success\"][tone=\"ghost\"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-success-03));\n    --mds-button-color: rgb(var(--status-success-01));\n  }\n\n  :host( [variant=\"success\"][tone=\"ghost\"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-success-04));\n    --mds-button-color: rgb(var(--status-success-02));\n  }\n\n  :host( [variant=\"success\"][tone=\"quiet\"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-success-01));\n  }\n\n  :host( [variant=\"success\"][tone=\"quiet\"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-success-03));\n  }\n\n  :host( [variant=\"success\"][tone=\"quiet\"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-success-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host( [variant=\"success\"] ),\n    :host( [variant=\"success\"][tone=\"strong\"] ) {\n\n      --mds-button-background: rgb(var(--status-success-03));\n      --mds-button-color: rgb(var(--tone-neutral));\n    }\n\n    :host( [variant=\"success\"]:hover ),\n    :host( [variant=\"success\"][tone=\"strong\"]:hover ) {\n\n      --mds-button-background: rgb(var(--status-success-01));\n    }\n\n    :host( [variant=\"success\"][active] ),\n    :host( [variant=\"success\"][tone=\"strong\"][active] ) {\n\n      --mds-button-background: rgb(var(--status-success-04));\n    }\n\n    :host( [variant=\"success\"][tone=\"weak\"] ) {\n\n      --mds-button-background: rgb(var(--status-success-09));\n      --mds-button-color: rgb(var(--status-success-02));\n  \n      fill: rgb(var(--status-success-02));\n    }\n\n    :host( [variant=\"success\"][tone=\"weak\"]:hover ) {\n  \n      --mds-button-background: rgb(var(--status-success-08));\n      --mds-button-color: rgb(var(--status-success-01));\n  \n      fill: rgb(var(--status-success-01));\n    }\n\n    :host( [variant=\"success\"][tone=\"weak\"][active] ) {\n  \n      --mds-button-background: rgb(var(--status-success-08));\n      --mds-button-color: rgb(var(--status-success-01));\n  \n      fill: rgb(var(--status-success-01));\n    }\n\n    :host( [variant=\"success\"][tone=\"ghost\"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-success-03));\n      --mds-button-color: rgb(var(--status-success-02));\n    }\n\n    :host( [variant=\"success\"][tone=\"ghost\"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-success-03));\n      --mds-button-color: rgb(var(--status-success-01));\n    }\n\n    :host( [variant=\"success\"][tone=\"ghost\"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-success-04));\n      --mds-button-color: rgb(var(--status-success-02));\n    }\n\n    :host( [variant=\"success\"][tone=\"quiet\"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-success-01));\n    }\n\n    :host( [variant=\"success\"][tone=\"quiet\"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-success-03));\n    }\n\n    :host( [variant=\"success\"][tone=\"quiet\"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-success-01));\n    }\n  }\n}\n\n:host( [size=\"sm\"] ) {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n  padding-top: 0rem;\n  padding-bottom: 0rem;\n\n  --mds-button-radius: 0.375rem;\n\n  min-height: 1.75rem;\n  min-width: 1.75rem;\n}\n\n:host( .no-text[size=\"sm\"] ) {\n  padding: 0rem;\n}\n\n:host( [size=\"sm\"] ) .text {\n  font-weight: 500;\n}\n\n:host( [size=\"sm\"][await]:not([await=\"false\"]) ) .await {\n  -webkit-transform: scale(.75);\n  transform: scale(.75);\n}\n\n:host( [size=\"md\"] ) {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\n:host( .no-text[size=\"md\"] ) {\n  padding: 0.25rem;\n}\n\n:host( [size=\"lg\"] ) {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n\n  min-height: 2.75rem;\n  min-width: 2.75rem;\n}\n\n:host( .no-text[size=\"lg\"] ) {\n  padding: 0.5rem;\n}\n\n:host( [size=\"xl\"] ) {\n  padding-left: 2rem;\n  padding-right: 2rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n\n  min-height: 3.25rem;\n  min-width: 3.25rem;\n}\n\n:host( .no-text[size=\"xl\"] ) {\n  padding: 0.5rem;\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .await,\n  .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .await,\n    .icon {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n  }\n  }\n}\n\n\n";
+const mdsButtonCss = "@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n\n@keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-button-await-duration: Sets the duration of the rotation of the spinner await component\n * @prop --mds-button-background: Sets the background-color of the component\n * @prop --mds-button-border-color: Sets the border-color of the component\n * @prop --mds-button-color: Sets the text color of the component\n * @prop --mds-button-gap: Sets the distance betwen element inside the components, use it instead of setting gap property directly.\n * @prop --mds-button-radius: Sets the border-radius of the component\n */\n\n:host {\n\n  --mds-button-await-duration: 0.725s;\n  --mds-button-background: rgb(var(--variant-primary-02));\n  --mds-button-border-color: transparent;\n  --mds-button-color: rgb(var(--tone-neutral));\n  --mds-button-gap: 0.5rem;\n  --mds-button-radius: 0.5rem;\n    -webkit-animation-duration: var(--magma-outline-animation-duration, 1s);\n    animation-duration: var(--magma-outline-animation-duration, 1s);\n    -webkit-animation-fill-mode: forwards;\n    animation-fill-mode: forwards;\n    -webkit-animation-iteration-count: infinite;\n    animation-iteration-count: infinite;\n    -webkit-animation-name: focus-bounce;\n    animation-name: focus-bounce;\n    -webkit-animation-play-state: paused;\n    animation-play-state: paused;\n    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    outline: var(--magma-outline-blur);\n    -webkit-transition-duration: 200ms;\n    transition-duration: 200ms;\n    -webkit-transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;\n    -webkit-transition-timing-function: ease-in-out;\n    transition-timing-function: ease-in-out;\n}\n\n:host:focus-visible {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n  }\n\n:host {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-button-background);\n  border-color: var(--mds-button-border-color);\n  border-radius: var(--mds-button-radius);\n  border-style: solid;\n  border-width: 2px;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color: var(--mds-button-color);\n  cursor: pointer;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  fill: currentcolor;\n  gap: var(--mds-button-gap);\n  -ms-flex-pack: center;\n  justify-content: center;\n  position: relative;\n  -webkit-transition-property: background-color, border-color, color, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, color, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, box-shadow, color, transform, outline, outline-offset;\n  transition-property: background-color, border-color, box-shadow, color, transform, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n}\n\n:host(:focus-visible) {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n\n    z-index: 10;\n  }\n\n.text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  min-width: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n.text::first-letter {\n  text-transform: uppercase;\n}\n\n.icon {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  fill: inherit;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  -ms-flex-pack: center;\n  justify-content: center;\n  pointer-events: none;\n  -webkit-transition-property: fill;\n  transition-property: fill;\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n  opacity: 0.5;\n\n  pointer-events: none;\n}\n\n.await {\n  height: 1.5rem;\n  width: 1.5rem;\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  display: none;\n  margin-right: calc(calc(-1 * var(--mds-button-gap)) - 1.5rem);\n  -webkit-transform: scale(0);\n  transform: scale(0);\n  transition-behavior: allow-discrete;\n  -webkit-transition-property: display, margin-right, opacity, width, -webkit-transform;\n  transition-property: display, margin-right, opacity, width, -webkit-transform;\n  transition-property: display, margin-right, opacity, transform, width;\n  transition-property: display, margin-right, opacity, transform, width, -webkit-transform;\n}\n\n.spinner {\n  height: 1.5rem;\n  width: 1.5rem;\n\n  --mds-spinner-duration: var(--mds-button-await-duration);\n\n  color: currentcolor;\n}\n\n:host(:not([await])) .spinner,\n:host([await=\"false\"]) .spinner {\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n:host([await]:not([await=\"false\"])) .await {\n  margin-right: 0rem;\n  opacity: 1;\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -webkit-transform: scale(1);\n  transform: scale(1);\n\n  @starting-style {\n    margin-right: calc(calc(-1 * var(--mds-button-gap)) - 1.5rem);\n    opacity: 0;\n    -webkit-transform: scale(0);\n    transform: scale(0);\n  }\n}\n\n:host([await]:not([await=\"false\"])) {\n  pointer-events: none;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"primary\"] ),\n:host( [variant=\"primary\"][tone=\"strong\"] ) {\n\n  --mds-button-background: rgb(var(--variant-primary-03));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant=\"primary\"]:hover ),\n:host( [variant=\"primary\"][tone=\"strong\"]:hover ) {\n\n  --mds-button-background: rgb(var(--variant-primary-04));\n}\n\n:host( [variant=\"primary\"][active] ),\n:host( [variant=\"primary\"][tone=\"strong\"][active] ) {\n\n  --mds-button-background: rgb(var(--variant-primary-02));\n}\n\n:host( [variant=\"primary\"][tone=\"weak\"] ) {\n\n  --mds-button-background: rgb(var(--variant-primary-09));\n  --mds-button-color: rgb(var(--variant-primary-03));\n\n  fill: rgb(var(--variant-primary-03));\n}\n\n:host( [variant=\"primary\"][tone=\"weak\"]:hover ) {\n\n  --mds-button-background: rgb(var(--variant-primary-08));\n\n}\n\n:host( [variant=\"primary\"][tone=\"weak\"][active] ) {\n\n  --mds-button-background: rgb(var(--variant-primary-08));\n  --mds-button-color: rgb(var(--variant-primary-02));\n\n  fill: rgb(var(--variant-primary-02));\n}\n\n:host( [variant=\"primary\"][tone=\"ghost\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--variant-primary-04));\n  --mds-button-color: rgb(var(--variant-primary-03));\n}\n\n:host( [variant=\"primary\"][tone=\"ghost\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--variant-primary-04));\n  --mds-button-color: rgb(var(--variant-primary-02));\n}\n\n:host( [variant=\"primary\"][tone=\"ghost\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--variant-primary-05));\n  --mds-button-color: rgb(var(--variant-primary-03));\n}\n\n:host( [variant=\"primary\"][tone=\"quiet\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--variant-primary-02));\n}\n\n:host( [variant=\"primary\"][tone=\"quiet\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--variant-primary-04));\n}\n\n:host( [variant=\"primary\"][tone=\"quiet\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--variant-primary-01));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host( [variant=\"primary\"] ),\n  :host( [variant=\"primary\"][tone=\"strong\"] ) {\n\n    --mds-button-background: rgb(var(--variant-primary-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host( [variant=\"primary\"]:hover ),\n  :host( [variant=\"primary\"][tone=\"strong\"]:hover ) {\n\n    --mds-button-background: rgb(var(--variant-primary-02));\n  }\n\n  :host( [variant=\"primary\"][active] ),\n  :host( [variant=\"primary\"][tone=\"strong\"][active] ) {\n\n    --mds-button-background: rgb(var(--variant-primary-02));\n  }\n\n  :host( [variant=\"primary\"][tone=\"weak\"] ) {\n\n    --mds-button-background: rgb(var(--variant-primary-09));\n    --mds-button-color: rgb(var(--variant-primary-02));\n\n    fill: rgb(var(--variant-primary-02));\n  }\n\n  :host( [variant=\"primary\"][tone=\"weak\"]:hover ) {\n\n    --mds-button-background: rgb(var(--variant-primary-08));\n    --mds-button-color: rgb(var(--variant-primary-01));\n\n    fill: rgb(var(--variant-primary-01));\n  }\n\n  :host( [variant=\"primary\"][tone=\"weak\"][active] ) {\n\n    --mds-button-background: rgb(var(--variant-primary-08));\n    --mds-button-color: rgb(var(--variant-primary-01));\n\n    fill: rgb(var(--variant-primary-01));\n  }\n\n  :host( [variant=\"primary\"][tone=\"ghost\"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--variant-primary-03));\n    --mds-button-color: rgb(var(--variant-primary-02));\n  }\n\n  :host( [variant=\"primary\"][tone=\"ghost\"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--variant-primary-03));\n    --mds-button-color: rgb(var(--variant-primary-01));\n  }\n\n  :host( [variant=\"primary\"][tone=\"ghost\"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--variant-primary-04));\n    --mds-button-color: rgb(var(--variant-primary-02));\n  }\n\n  :host( [variant=\"primary\"][tone=\"quiet\"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--variant-primary-01));\n  }\n\n  :host( [variant=\"primary\"][tone=\"quiet\"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--variant-primary-03));\n  }\n\n  :host( [variant=\"primary\"][tone=\"quiet\"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--variant-primary-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host( [variant=\"primary\"] ),\n    :host( [variant=\"primary\"][tone=\"strong\"] ) {\n\n      --mds-button-background: rgb(var(--variant-primary-03));\n      --mds-button-color: rgb(var(--tone-neutral));\n    }\n\n    :host( [variant=\"primary\"]:hover ),\n    :host( [variant=\"primary\"][tone=\"strong\"]:hover ) {\n\n      --mds-button-background: rgb(var(--variant-primary-01));\n    }\n\n    :host( [variant=\"primary\"][active] ),\n    :host( [variant=\"primary\"][tone=\"strong\"][active] ) {\n\n      --mds-button-background: rgb(var(--variant-primary-02));\n    }\n\n    :host( [variant=\"primary\"][tone=\"weak\"] ) {\n\n      --mds-button-background: rgb(var(--variant-primary-09));\n      --mds-button-color: rgb(var(--variant-primary-02));\n\n      fill: rgb(var(--variant-primary-02));\n    }\n\n    :host( [variant=\"primary\"][tone=\"weak\"]:hover ) {\n\n      --mds-button-background: rgb(var(--variant-primary-08));\n      --mds-button-color: rgb(var(--variant-primary-01));\n\n      fill: rgb(var(--variant-primary-01));\n    }\n\n    :host( [variant=\"primary\"][tone=\"weak\"][active] ) {\n\n      --mds-button-background: rgb(var(--variant-primary-08));\n      --mds-button-color: rgb(var(--variant-primary-01));\n\n      fill: rgb(var(--variant-primary-01));\n    }\n\n    :host( [variant=\"primary\"][tone=\"ghost\"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--variant-primary-03));\n      --mds-button-color: rgb(var(--variant-primary-02));\n    }\n\n    :host( [variant=\"primary\"][tone=\"ghost\"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--variant-primary-03));\n      --mds-button-color: rgb(var(--variant-primary-01));\n    }\n\n    :host( [variant=\"primary\"][tone=\"ghost\"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--variant-primary-04));\n      --mds-button-color: rgb(var(--variant-primary-02));\n    }\n\n    :host( [variant=\"primary\"][tone=\"quiet\"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--variant-primary-01));\n    }\n\n    :host( [variant=\"primary\"][tone=\"quiet\"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--variant-primary-03));\n    }\n\n    :host( [variant=\"primary\"][tone=\"quiet\"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--variant-primary-01));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host( [variant=\"secondary\"] ),\n:host( [variant=\"secondary\"][tone=\"strong\"] ) {\n\n  --mds-button-background: rgb(var(--variant-secondary-03));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant=\"secondary\"]:hover ),\n:host( [variant=\"secondary\"][tone=\"strong\"]:hover ) {\n\n  --mds-button-background: rgb(var(--variant-secondary-04));\n}\n\n:host( [variant=\"secondary\"][active] ),\n:host( [variant=\"secondary\"][tone=\"strong\"][active] ) {\n\n  --mds-button-background: rgb(var(--variant-secondary-02));\n}\n\n:host( [variant=\"secondary\"][tone=\"weak\"] ) {\n\n  --mds-button-background: rgb(var(--variant-secondary-09));\n  --mds-button-color: rgb(var(--variant-secondary-03));\n\n  fill: rgb(var(--variant-secondary-03));\n}\n\n:host( [variant=\"secondary\"][tone=\"weak\"]:hover ) {\n\n  --mds-button-background: rgb(var(--variant-secondary-08));\n\n}\n\n:host( [variant=\"secondary\"][tone=\"weak\"][active] ) {\n\n  --mds-button-background: rgb(var(--variant-secondary-08));\n  --mds-button-color: rgb(var(--variant-secondary-02));\n\n  fill: rgb(var(--variant-secondary-02));\n}\n\n:host( [variant=\"secondary\"][tone=\"ghost\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--variant-secondary-04));\n  --mds-button-color: rgb(var(--variant-secondary-03));\n}\n\n:host( [variant=\"secondary\"][tone=\"ghost\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--variant-secondary-04));\n  --mds-button-color: rgb(var(--variant-secondary-02));\n}\n\n:host( [variant=\"secondary\"][tone=\"ghost\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--variant-secondary-05));\n  --mds-button-color: rgb(var(--variant-secondary-03));\n}\n\n:host( [variant=\"secondary\"][tone=\"quiet\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--variant-secondary-02));\n}\n\n:host( [variant=\"secondary\"][tone=\"quiet\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--variant-secondary-04));\n}\n\n:host( [variant=\"secondary\"][tone=\"quiet\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--variant-secondary-01));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host( [variant=\"secondary\"] ),\n  :host( [variant=\"secondary\"][tone=\"strong\"] ) {\n\n    --mds-button-background: rgb(var(--variant-secondary-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host( [variant=\"secondary\"]:hover ),\n  :host( [variant=\"secondary\"][tone=\"strong\"]:hover ) {\n\n    --mds-button-background: rgb(var(--variant-secondary-02));\n  }\n\n  :host( [variant=\"secondary\"][active] ),\n  :host( [variant=\"secondary\"][tone=\"strong\"][active] ) {\n\n    --mds-button-background: rgb(var(--variant-secondary-02));\n  }\n\n  :host( [variant=\"secondary\"][tone=\"weak\"] ) {\n\n    --mds-button-background: rgb(var(--variant-secondary-09));\n    --mds-button-color: rgb(var(--variant-secondary-02));\n\n    fill: rgb(var(--variant-secondary-02));\n  }\n\n  :host( [variant=\"secondary\"][tone=\"weak\"]:hover ) {\n\n    --mds-button-background: rgb(var(--variant-secondary-08));\n    --mds-button-color: rgb(var(--variant-secondary-01));\n\n    fill: rgb(var(--variant-secondary-01));\n  }\n\n  :host( [variant=\"secondary\"][tone=\"weak\"][active] ) {\n\n    --mds-button-background: rgb(var(--variant-secondary-08));\n    --mds-button-color: rgb(var(--variant-secondary-01));\n\n    fill: rgb(var(--variant-secondary-01));\n  }\n\n  :host( [variant=\"secondary\"][tone=\"ghost\"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--variant-secondary-03));\n    --mds-button-color: rgb(var(--variant-secondary-02));\n  }\n\n  :host( [variant=\"secondary\"][tone=\"ghost\"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--variant-secondary-03));\n    --mds-button-color: rgb(var(--variant-secondary-01));\n  }\n\n  :host( [variant=\"secondary\"][tone=\"ghost\"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--variant-secondary-04));\n    --mds-button-color: rgb(var(--variant-secondary-02));\n  }\n\n  :host( [variant=\"secondary\"][tone=\"quiet\"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--variant-secondary-01));\n  }\n\n  :host( [variant=\"secondary\"][tone=\"quiet\"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--variant-secondary-03));\n  }\n\n  :host( [variant=\"secondary\"][tone=\"quiet\"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--variant-secondary-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host( [variant=\"secondary\"] ),\n    :host( [variant=\"secondary\"][tone=\"strong\"] ) {\n\n      --mds-button-background: rgb(var(--variant-secondary-03));\n      --mds-button-color: rgb(var(--tone-neutral));\n    }\n\n    :host( [variant=\"secondary\"]:hover ),\n    :host( [variant=\"secondary\"][tone=\"strong\"]:hover ) {\n\n      --mds-button-background: rgb(var(--variant-secondary-01));\n    }\n\n    :host( [variant=\"secondary\"][active] ),\n    :host( [variant=\"secondary\"][tone=\"strong\"][active] ) {\n\n      --mds-button-background: rgb(var(--variant-secondary-02));\n    }\n\n    :host( [variant=\"secondary\"][tone=\"weak\"] ) {\n\n      --mds-button-background: rgb(var(--variant-secondary-09));\n      --mds-button-color: rgb(var(--variant-secondary-02));\n\n      fill: rgb(var(--variant-secondary-02));\n    }\n\n    :host( [variant=\"secondary\"][tone=\"weak\"]:hover ) {\n\n      --mds-button-background: rgb(var(--variant-secondary-08));\n      --mds-button-color: rgb(var(--variant-secondary-01));\n\n      fill: rgb(var(--variant-secondary-01));\n    }\n\n    :host( [variant=\"secondary\"][tone=\"weak\"][active] ) {\n\n      --mds-button-background: rgb(var(--variant-secondary-08));\n      --mds-button-color: rgb(var(--variant-secondary-01));\n\n      fill: rgb(var(--variant-secondary-01));\n    }\n\n    :host( [variant=\"secondary\"][tone=\"ghost\"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--variant-secondary-03));\n      --mds-button-color: rgb(var(--variant-secondary-02));\n    }\n\n    :host( [variant=\"secondary\"][tone=\"ghost\"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--variant-secondary-03));\n      --mds-button-color: rgb(var(--variant-secondary-01));\n    }\n\n    :host( [variant=\"secondary\"][tone=\"ghost\"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--variant-secondary-04));\n      --mds-button-color: rgb(var(--variant-secondary-02));\n    }\n\n    :host( [variant=\"secondary\"][tone=\"quiet\"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--variant-secondary-01));\n    }\n\n    :host( [variant=\"secondary\"][tone=\"quiet\"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--variant-secondary-03));\n    }\n\n    :host( [variant=\"secondary\"][tone=\"quiet\"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--variant-secondary-01));\n    }\n  }\n}\n\n:host( [variant=\"dark\"] ),\n:host( [variant=\"dark\"][tone=\"strong\"] ) {\n\n  --mds-button-background: rgb(var(--tone-neutral-04));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant=\"dark\"]:hover ),\n:host( [variant=\"dark\"][tone=\"strong\"]:hover ) {\n\n  --mds-button-background: rgb(var(--tone-neutral-05));\n}\n\n:host( [variant=\"dark\"][active] ),\n:host( [variant=\"dark\"][tone=\"strong\"][active] ) {\n\n  --mds-button-background: rgb(var(--tone-neutral-03));\n}\n\n:host( [variant=\"dark\"][tone=\"weak\"] ) {\n\n  --mds-button-background: rgb(var(--tone-neutral-08));\n  --mds-button-color: rgb(var(--tone-neutral-02));\n}\n\n:host( [variant=\"dark\"][tone=\"weak\"]:hover ) {\n\n  --mds-button-background: rgb(var(--tone-neutral-07));\n}\n\n:host( [variant=\"dark\"][tone=\"weak\"][active] ) {\n\n  --mds-button-background: rgb(var(--tone-neutral-06));\n}\n\n:host( [variant=\"dark\"][tone=\"ghost\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--tone-neutral-03));\n  --mds-button-color: rgb(var(--tone-neutral-03));\n}\n\n:host( [variant=\"dark\"][tone=\"ghost\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--tone-neutral-04));\n  --mds-button-color: rgb(var(--tone-neutral-04));\n}\n\n:host( [variant=\"dark\"][tone=\"ghost\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--tone-neutral-02));\n  --mds-button-color: rgb(var(--tone-neutral-02));\n}\n\n:host( [variant=\"dark\"][tone=\"quiet\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--tone-neutral-02));\n}\n\n:host( [variant=\"dark\"][tone=\"quiet\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--tone-neutral-04));\n}\n\n:host( [variant=\"dark\"][tone=\"quiet\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--tone-neutral-02));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"light\"] ),\n:host( [variant=\"light\"][tone=\"strong\"] ) {\n\n  --mds-button-background: rgb(var(--tone-neutral));\n  --mds-button-color: rgb(var(--tone-neutral-03));\n}\n\n:host( [variant=\"light\"]:hover ),\n:host( [variant=\"light\"][tone=\"strong\"]:hover ) {\n\n  --mds-button-color: rgb(var(--tone-neutral-04));\n}\n\n:host( [variant=\"light\"][active] ),\n:host( [variant=\"light\"][tone=\"strong\"][active] ) {\n\n  --mds-button-color: rgb(var(--tone-neutral-02));\n}\n\n:host( [variant=\"light\"][tone=\"weak\"] ) {\n\n  --mds-button-background: rgb(var(--tone-neutral));\n  --mds-button-color: rgb(var(--tone-neutral-05));\n}\n\n:host( [variant=\"light\"][tone=\"weak\"]:hover ) {\n\n  --mds-button-color: rgb(var(--tone-neutral-04));\n}\n\n:host( [variant=\"light\"][tone=\"weak\"][active] ) {\n\n  --mds-button-color: rgb(var(--tone-neutral-03));\n}\n\n:host( [variant=\"light\"][tone=\"ghost\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--tone-neutral));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant=\"light\"][tone=\"ghost\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--tone-neutral));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant=\"light\"][tone=\"ghost\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--tone-neutral));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant=\"light\"][tone=\"quiet\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant=\"light\"][tone=\"quiet\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant=\"light\"][tone=\"quiet\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"error\"] ),\n:host( [variant=\"error\"][tone=\"strong\"] ) {\n\n  --mds-button-background: rgb(var(--status-error-05));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant=\"error\"]:hover ),\n:host( [variant=\"error\"][tone=\"strong\"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-error-04));\n}\n\n:host( [variant=\"error\"][active] ),\n:host( [variant=\"error\"][tone=\"strong\"][active] ) {\n\n  --mds-button-background: rgb(var(--status-error-06));\n}\n\n:host( [variant=\"error\"][tone=\"weak\"] ) {\n\n  --mds-button-background: rgb(var(--status-error-09));\n  --mds-button-color: rgb(var(--status-error-03));\n\n  fill: rgb(var(--status-error-03));\n}\n\n:host( [variant=\"error\"][tone=\"weak\"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-error-08));\n\n}\n\n:host( [variant=\"error\"][tone=\"weak\"][active] ) {\n\n  --mds-button-background: rgb(var(--status-error-08));\n  --mds-button-color: rgb(var(--status-error-02));\n\n  fill: rgb(var(--status-error-02));\n}\n\n:host( [variant=\"error\"][tone=\"ghost\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-error-04));\n  --mds-button-color: rgb(var(--status-error-03));\n}\n\n:host( [variant=\"error\"][tone=\"ghost\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-error-04));\n  --mds-button-color: rgb(var(--status-error-02));\n}\n\n:host( [variant=\"error\"][tone=\"ghost\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-error-05));\n  --mds-button-color: rgb(var(--status-error-03));\n}\n\n:host( [variant=\"error\"][tone=\"quiet\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-error-02));\n}\n\n:host( [variant=\"error\"][tone=\"quiet\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-error-04));\n}\n\n:host( [variant=\"error\"][tone=\"quiet\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-error-01));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host( [variant=\"error\"] ),\n  :host( [variant=\"error\"][tone=\"strong\"] ) {\n\n    --mds-button-background: rgb(var(--status-error-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host( [variant=\"error\"]:hover ),\n  :host( [variant=\"error\"][tone=\"strong\"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-error-01));\n  }\n\n  :host( [variant=\"error\"][active] ),\n  :host( [variant=\"error\"][tone=\"strong\"][active] ) {\n\n    --mds-button-background: rgb(var(--status-error-04));\n  }\n\n  :host( [variant=\"error\"][tone=\"weak\"] ) {\n\n    --mds-button-background: rgb(var(--status-error-09));\n    --mds-button-color: rgb(var(--status-error-02));\n\n    fill: rgb(var(--status-error-02));\n  }\n\n  :host( [variant=\"error\"][tone=\"weak\"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-error-08));\n    --mds-button-color: rgb(var(--status-error-01));\n\n    fill: rgb(var(--status-error-01));\n  }\n\n  :host( [variant=\"error\"][tone=\"weak\"][active] ) {\n\n    --mds-button-background: rgb(var(--status-error-08));\n    --mds-button-color: rgb(var(--status-error-01));\n\n    fill: rgb(var(--status-error-01));\n  }\n\n  :host( [variant=\"error\"][tone=\"ghost\"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-error-03));\n    --mds-button-color: rgb(var(--status-error-02));\n  }\n\n  :host( [variant=\"error\"][tone=\"ghost\"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-error-03));\n    --mds-button-color: rgb(var(--status-error-01));\n  }\n\n  :host( [variant=\"error\"][tone=\"ghost\"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-error-04));\n    --mds-button-color: rgb(var(--status-error-02));\n  }\n\n  :host( [variant=\"error\"][tone=\"quiet\"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-error-01));\n  }\n\n  :host( [variant=\"error\"][tone=\"quiet\"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-error-03));\n  }\n\n  :host( [variant=\"error\"][tone=\"quiet\"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-error-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host( [variant=\"error\"] ),\n    :host( [variant=\"error\"][tone=\"strong\"] ) {\n\n      --mds-button-background: rgb(var(--status-error-03));\n      --mds-button-color: rgb(var(--tone-neutral));\n    }\n\n    :host( [variant=\"error\"]:hover ),\n    :host( [variant=\"error\"][tone=\"strong\"]:hover ) {\n\n      --mds-button-background: rgb(var(--status-error-01));\n    }\n\n    :host( [variant=\"error\"][active] ),\n    :host( [variant=\"error\"][tone=\"strong\"][active] ) {\n\n      --mds-button-background: rgb(var(--status-error-04));\n    }\n\n    :host( [variant=\"error\"][tone=\"weak\"] ) {\n\n      --mds-button-background: rgb(var(--status-error-09));\n      --mds-button-color: rgb(var(--status-error-02));\n  \n      fill: rgb(var(--status-error-02));\n    }\n\n    :host( [variant=\"error\"][tone=\"weak\"]:hover ) {\n  \n      --mds-button-background: rgb(var(--status-error-08));\n      --mds-button-color: rgb(var(--status-error-01));\n  \n      fill: rgb(var(--status-error-01));\n    }\n\n    :host( [variant=\"error\"][tone=\"weak\"][active] ) {\n  \n      --mds-button-background: rgb(var(--status-error-08));\n      --mds-button-color: rgb(var(--status-error-01));\n  \n      fill: rgb(var(--status-error-01));\n    }\n\n    :host( [variant=\"error\"][tone=\"ghost\"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-error-03));\n      --mds-button-color: rgb(var(--status-error-02));\n    }\n\n    :host( [variant=\"error\"][tone=\"ghost\"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-error-03));\n      --mds-button-color: rgb(var(--status-error-01));\n    }\n\n    :host( [variant=\"error\"][tone=\"ghost\"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-error-04));\n      --mds-button-color: rgb(var(--status-error-02));\n    }\n\n    :host( [variant=\"error\"][tone=\"quiet\"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-error-01));\n    }\n\n    :host( [variant=\"error\"][tone=\"quiet\"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-error-03));\n    }\n\n    :host( [variant=\"error\"][tone=\"quiet\"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-error-01));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host( [variant=\"warning\"] ),\n:host( [variant=\"warning\"][tone=\"strong\"] ) {\n\n  --mds-button-background: rgb(var(--status-warning-05));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant=\"warning\"]:hover ),\n:host( [variant=\"warning\"][tone=\"strong\"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-warning-04));\n}\n\n:host( [variant=\"warning\"][active] ),\n:host( [variant=\"warning\"][tone=\"strong\"][active] ) {\n\n  --mds-button-background: rgb(var(--status-warning-06));\n}\n\n:host( [variant=\"warning\"][tone=\"weak\"] ) {\n\n  --mds-button-background: rgb(var(--status-warning-09));\n  --mds-button-color: rgb(var(--status-warning-03));\n\n  fill: rgb(var(--status-warning-03));\n}\n\n:host( [variant=\"warning\"][tone=\"weak\"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-warning-08));\n\n}\n\n:host( [variant=\"warning\"][tone=\"weak\"][active] ) {\n\n  --mds-button-background: rgb(var(--status-warning-08));\n  --mds-button-color: rgb(var(--status-warning-02));\n\n  fill: rgb(var(--status-warning-02));\n}\n\n:host( [variant=\"warning\"][tone=\"ghost\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-warning-04));\n  --mds-button-color: rgb(var(--status-warning-03));\n}\n\n:host( [variant=\"warning\"][tone=\"ghost\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-warning-04));\n  --mds-button-color: rgb(var(--status-warning-02));\n}\n\n:host( [variant=\"warning\"][tone=\"ghost\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-warning-05));\n  --mds-button-color: rgb(var(--status-warning-03));\n}\n\n:host( [variant=\"warning\"][tone=\"quiet\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-warning-02));\n}\n\n:host( [variant=\"warning\"][tone=\"quiet\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-warning-04));\n}\n\n:host( [variant=\"warning\"][tone=\"quiet\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-warning-01));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host( [variant=\"warning\"] ),\n  :host( [variant=\"warning\"][tone=\"strong\"] ) {\n\n    --mds-button-background: rgb(var(--status-warning-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host( [variant=\"warning\"]:hover ),\n  :host( [variant=\"warning\"][tone=\"strong\"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-warning-01));\n  }\n\n  :host( [variant=\"warning\"][active] ),\n  :host( [variant=\"warning\"][tone=\"strong\"][active] ) {\n\n    --mds-button-background: rgb(var(--status-warning-04));\n  }\n\n  :host( [variant=\"warning\"][tone=\"weak\"] ) {\n\n    --mds-button-background: rgb(var(--status-warning-09));\n    --mds-button-color: rgb(var(--status-warning-02));\n\n    fill: rgb(var(--status-warning-02));\n  }\n\n  :host( [variant=\"warning\"][tone=\"weak\"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-warning-08));\n    --mds-button-color: rgb(var(--status-warning-01));\n\n    fill: rgb(var(--status-warning-01));\n  }\n\n  :host( [variant=\"warning\"][tone=\"weak\"][active] ) {\n\n    --mds-button-background: rgb(var(--status-warning-08));\n    --mds-button-color: rgb(var(--status-warning-01));\n\n    fill: rgb(var(--status-warning-01));\n  }\n\n  :host( [variant=\"warning\"][tone=\"ghost\"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-warning-03));\n    --mds-button-color: rgb(var(--status-warning-02));\n  }\n\n  :host( [variant=\"warning\"][tone=\"ghost\"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-warning-03));\n    --mds-button-color: rgb(var(--status-warning-01));\n  }\n\n  :host( [variant=\"warning\"][tone=\"ghost\"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-warning-04));\n    --mds-button-color: rgb(var(--status-warning-02));\n  }\n\n  :host( [variant=\"warning\"][tone=\"quiet\"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-warning-01));\n  }\n\n  :host( [variant=\"warning\"][tone=\"quiet\"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-warning-03));\n  }\n\n  :host( [variant=\"warning\"][tone=\"quiet\"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-warning-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host( [variant=\"warning\"] ),\n    :host( [variant=\"warning\"][tone=\"strong\"] ) {\n\n      --mds-button-background: rgb(var(--status-warning-03));\n      --mds-button-color: rgb(var(--tone-neutral));\n    }\n\n    :host( [variant=\"warning\"]:hover ),\n    :host( [variant=\"warning\"][tone=\"strong\"]:hover ) {\n\n      --mds-button-background: rgb(var(--status-warning-01));\n    }\n\n    :host( [variant=\"warning\"][active] ),\n    :host( [variant=\"warning\"][tone=\"strong\"][active] ) {\n\n      --mds-button-background: rgb(var(--status-warning-04));\n    }\n\n    :host( [variant=\"warning\"][tone=\"weak\"] ) {\n\n      --mds-button-background: rgb(var(--status-warning-09));\n      --mds-button-color: rgb(var(--status-warning-02));\n  \n      fill: rgb(var(--status-warning-02));\n    }\n\n    :host( [variant=\"warning\"][tone=\"weak\"]:hover ) {\n  \n      --mds-button-background: rgb(var(--status-warning-08));\n      --mds-button-color: rgb(var(--status-warning-01));\n  \n      fill: rgb(var(--status-warning-01));\n    }\n\n    :host( [variant=\"warning\"][tone=\"weak\"][active] ) {\n  \n      --mds-button-background: rgb(var(--status-warning-08));\n      --mds-button-color: rgb(var(--status-warning-01));\n  \n      fill: rgb(var(--status-warning-01));\n    }\n\n    :host( [variant=\"warning\"][tone=\"ghost\"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-warning-03));\n      --mds-button-color: rgb(var(--status-warning-02));\n    }\n\n    :host( [variant=\"warning\"][tone=\"ghost\"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-warning-03));\n      --mds-button-color: rgb(var(--status-warning-01));\n    }\n\n    :host( [variant=\"warning\"][tone=\"ghost\"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-warning-04));\n      --mds-button-color: rgb(var(--status-warning-02));\n    }\n\n    :host( [variant=\"warning\"][tone=\"quiet\"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-warning-01));\n    }\n\n    :host( [variant=\"warning\"][tone=\"quiet\"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-warning-03));\n    }\n\n    :host( [variant=\"warning\"][tone=\"quiet\"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-warning-01));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host( [variant=\"info\"] ),\n:host( [variant=\"info\"][tone=\"strong\"] ) {\n\n  --mds-button-background: rgb(var(--status-info-05));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant=\"info\"]:hover ),\n:host( [variant=\"info\"][tone=\"strong\"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-info-04));\n}\n\n:host( [variant=\"info\"][active] ),\n:host( [variant=\"info\"][tone=\"strong\"][active] ) {\n\n  --mds-button-background: rgb(var(--status-info-06));\n}\n\n:host( [variant=\"info\"][tone=\"weak\"] ) {\n\n  --mds-button-background: rgb(var(--status-info-09));\n  --mds-button-color: rgb(var(--status-info-03));\n\n  fill: rgb(var(--status-info-03));\n}\n\n:host( [variant=\"info\"][tone=\"weak\"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-info-08));\n\n}\n\n:host( [variant=\"info\"][tone=\"weak\"][active] ) {\n\n  --mds-button-background: rgb(var(--status-info-08));\n  --mds-button-color: rgb(var(--status-info-02));\n\n  fill: rgb(var(--status-info-02));\n}\n\n:host( [variant=\"info\"][tone=\"ghost\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-info-04));\n  --mds-button-color: rgb(var(--status-info-03));\n}\n\n:host( [variant=\"info\"][tone=\"ghost\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-info-04));\n  --mds-button-color: rgb(var(--status-info-02));\n}\n\n:host( [variant=\"info\"][tone=\"ghost\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-info-05));\n  --mds-button-color: rgb(var(--status-info-03));\n}\n\n:host( [variant=\"info\"][tone=\"quiet\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-info-02));\n}\n\n:host( [variant=\"info\"][tone=\"quiet\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-info-04));\n}\n\n:host( [variant=\"info\"][tone=\"quiet\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-info-01));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host( [variant=\"info\"] ),\n  :host( [variant=\"info\"][tone=\"strong\"] ) {\n\n    --mds-button-background: rgb(var(--status-info-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host( [variant=\"info\"]:hover ),\n  :host( [variant=\"info\"][tone=\"strong\"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-info-01));\n  }\n\n  :host( [variant=\"info\"][active] ),\n  :host( [variant=\"info\"][tone=\"strong\"][active] ) {\n\n    --mds-button-background: rgb(var(--status-info-04));\n  }\n\n  :host( [variant=\"info\"][tone=\"weak\"] ) {\n\n    --mds-button-background: rgb(var(--status-info-09));\n    --mds-button-color: rgb(var(--status-info-02));\n\n    fill: rgb(var(--status-info-02));\n  }\n\n  :host( [variant=\"info\"][tone=\"weak\"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-info-08));\n    --mds-button-color: rgb(var(--status-info-01));\n\n    fill: rgb(var(--status-info-01));\n  }\n\n  :host( [variant=\"info\"][tone=\"weak\"][active] ) {\n\n    --mds-button-background: rgb(var(--status-info-08));\n    --mds-button-color: rgb(var(--status-info-01));\n\n    fill: rgb(var(--status-info-01));\n  }\n\n  :host( [variant=\"info\"][tone=\"ghost\"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-info-03));\n    --mds-button-color: rgb(var(--status-info-02));\n  }\n\n  :host( [variant=\"info\"][tone=\"ghost\"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-info-03));\n    --mds-button-color: rgb(var(--status-info-01));\n  }\n\n  :host( [variant=\"info\"][tone=\"ghost\"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-info-04));\n    --mds-button-color: rgb(var(--status-info-02));\n  }\n\n  :host( [variant=\"info\"][tone=\"quiet\"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-info-01));\n  }\n\n  :host( [variant=\"info\"][tone=\"quiet\"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-info-03));\n  }\n\n  :host( [variant=\"info\"][tone=\"quiet\"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-info-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host( [variant=\"info\"] ),\n    :host( [variant=\"info\"][tone=\"strong\"] ) {\n\n      --mds-button-background: rgb(var(--status-info-03));\n      --mds-button-color: rgb(var(--tone-neutral));\n    }\n\n    :host( [variant=\"info\"]:hover ),\n    :host( [variant=\"info\"][tone=\"strong\"]:hover ) {\n\n      --mds-button-background: rgb(var(--status-info-01));\n    }\n\n    :host( [variant=\"info\"][active] ),\n    :host( [variant=\"info\"][tone=\"strong\"][active] ) {\n\n      --mds-button-background: rgb(var(--status-info-04));\n    }\n\n    :host( [variant=\"info\"][tone=\"weak\"] ) {\n\n      --mds-button-background: rgb(var(--status-info-09));\n      --mds-button-color: rgb(var(--status-info-02));\n  \n      fill: rgb(var(--status-info-02));\n    }\n\n    :host( [variant=\"info\"][tone=\"weak\"]:hover ) {\n  \n      --mds-button-background: rgb(var(--status-info-08));\n      --mds-button-color: rgb(var(--status-info-01));\n  \n      fill: rgb(var(--status-info-01));\n    }\n\n    :host( [variant=\"info\"][tone=\"weak\"][active] ) {\n  \n      --mds-button-background: rgb(var(--status-info-08));\n      --mds-button-color: rgb(var(--status-info-01));\n  \n      fill: rgb(var(--status-info-01));\n    }\n\n    :host( [variant=\"info\"][tone=\"ghost\"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-info-03));\n      --mds-button-color: rgb(var(--status-info-02));\n    }\n\n    :host( [variant=\"info\"][tone=\"ghost\"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-info-03));\n      --mds-button-color: rgb(var(--status-info-01));\n    }\n\n    :host( [variant=\"info\"][tone=\"ghost\"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-info-04));\n      --mds-button-color: rgb(var(--status-info-02));\n    }\n\n    :host( [variant=\"info\"][tone=\"quiet\"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-info-01));\n    }\n\n    :host( [variant=\"info\"][tone=\"quiet\"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-info-03));\n    }\n\n    :host( [variant=\"info\"][tone=\"quiet\"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-info-01));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host( [variant=\"success\"] ),\n:host( [variant=\"success\"][tone=\"strong\"] ) {\n\n  --mds-button-background: rgb(var(--status-success-05));\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host( [variant=\"success\"]:hover ),\n:host( [variant=\"success\"][tone=\"strong\"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-success-04));\n}\n\n:host( [variant=\"success\"][active] ),\n:host( [variant=\"success\"][tone=\"strong\"][active] ) {\n\n  --mds-button-background: rgb(var(--status-success-06));\n}\n\n:host( [variant=\"success\"][tone=\"weak\"] ) {\n\n  --mds-button-background: rgb(var(--status-success-09));\n  --mds-button-color: rgb(var(--status-success-03));\n\n  fill: rgb(var(--status-success-03));\n}\n\n:host( [variant=\"success\"][tone=\"weak\"]:hover ) {\n\n  --mds-button-background: rgb(var(--status-success-08));\n\n}\n\n:host( [variant=\"success\"][tone=\"weak\"][active] ) {\n\n  --mds-button-background: rgb(var(--status-success-08));\n  --mds-button-color: rgb(var(--status-success-02));\n\n  fill: rgb(var(--status-success-02));\n}\n\n:host( [variant=\"success\"][tone=\"ghost\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-success-04));\n  --mds-button-color: rgb(var(--status-success-03));\n}\n\n:host( [variant=\"success\"][tone=\"ghost\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-success-04));\n  --mds-button-color: rgb(var(--status-success-02));\n}\n\n:host( [variant=\"success\"][tone=\"ghost\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-border-color: rgb(var(--status-success-05));\n  --mds-button-color: rgb(var(--status-success-03));\n}\n\n:host( [variant=\"success\"][tone=\"quiet\"] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-success-02));\n}\n\n:host( [variant=\"success\"][tone=\"quiet\"]:hover ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-success-04));\n}\n\n:host( [variant=\"success\"][tone=\"quiet\"][active] ) {\n\n  --mds-button-background: transparent;\n  --mds-button-color: rgb(var(--status-success-01));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host( [variant=\"success\"] ),\n  :host( [variant=\"success\"][tone=\"strong\"] ) {\n\n    --mds-button-background: rgb(var(--status-success-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host( [variant=\"success\"]:hover ),\n  :host( [variant=\"success\"][tone=\"strong\"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-success-01));\n  }\n\n  :host( [variant=\"success\"][active] ),\n  :host( [variant=\"success\"][tone=\"strong\"][active] ) {\n\n    --mds-button-background: rgb(var(--status-success-04));\n  }\n\n  :host( [variant=\"success\"][tone=\"weak\"] ) {\n\n    --mds-button-background: rgb(var(--status-success-09));\n    --mds-button-color: rgb(var(--status-success-02));\n\n    fill: rgb(var(--status-success-02));\n  }\n\n  :host( [variant=\"success\"][tone=\"weak\"]:hover ) {\n\n    --mds-button-background: rgb(var(--status-success-08));\n    --mds-button-color: rgb(var(--status-success-01));\n\n    fill: rgb(var(--status-success-01));\n  }\n\n  :host( [variant=\"success\"][tone=\"weak\"][active] ) {\n\n    --mds-button-background: rgb(var(--status-success-08));\n    --mds-button-color: rgb(var(--status-success-01));\n\n    fill: rgb(var(--status-success-01));\n  }\n\n  :host( [variant=\"success\"][tone=\"ghost\"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-success-03));\n    --mds-button-color: rgb(var(--status-success-02));\n  }\n\n  :host( [variant=\"success\"][tone=\"ghost\"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-success-03));\n    --mds-button-color: rgb(var(--status-success-01));\n  }\n\n  :host( [variant=\"success\"][tone=\"ghost\"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-border-color: rgb(var(--status-success-04));\n    --mds-button-color: rgb(var(--status-success-02));\n  }\n\n  :host( [variant=\"success\"][tone=\"quiet\"] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-success-01));\n  }\n\n  :host( [variant=\"success\"][tone=\"quiet\"]:hover ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-success-03));\n  }\n\n  :host( [variant=\"success\"][tone=\"quiet\"][active] ) {\n\n    --mds-button-background: transparent;\n    --mds-button-color: rgb(var(--status-success-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host( [variant=\"success\"] ),\n    :host( [variant=\"success\"][tone=\"strong\"] ) {\n\n      --mds-button-background: rgb(var(--status-success-03));\n      --mds-button-color: rgb(var(--tone-neutral));\n    }\n\n    :host( [variant=\"success\"]:hover ),\n    :host( [variant=\"success\"][tone=\"strong\"]:hover ) {\n\n      --mds-button-background: rgb(var(--status-success-01));\n    }\n\n    :host( [variant=\"success\"][active] ),\n    :host( [variant=\"success\"][tone=\"strong\"][active] ) {\n\n      --mds-button-background: rgb(var(--status-success-04));\n    }\n\n    :host( [variant=\"success\"][tone=\"weak\"] ) {\n\n      --mds-button-background: rgb(var(--status-success-09));\n      --mds-button-color: rgb(var(--status-success-02));\n  \n      fill: rgb(var(--status-success-02));\n    }\n\n    :host( [variant=\"success\"][tone=\"weak\"]:hover ) {\n  \n      --mds-button-background: rgb(var(--status-success-08));\n      --mds-button-color: rgb(var(--status-success-01));\n  \n      fill: rgb(var(--status-success-01));\n    }\n\n    :host( [variant=\"success\"][tone=\"weak\"][active] ) {\n  \n      --mds-button-background: rgb(var(--status-success-08));\n      --mds-button-color: rgb(var(--status-success-01));\n  \n      fill: rgb(var(--status-success-01));\n    }\n\n    :host( [variant=\"success\"][tone=\"ghost\"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-success-03));\n      --mds-button-color: rgb(var(--status-success-02));\n    }\n\n    :host( [variant=\"success\"][tone=\"ghost\"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-success-03));\n      --mds-button-color: rgb(var(--status-success-01));\n    }\n\n    :host( [variant=\"success\"][tone=\"ghost\"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-border-color: rgb(var(--status-success-04));\n      --mds-button-color: rgb(var(--status-success-02));\n    }\n\n    :host( [variant=\"success\"][tone=\"quiet\"] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-success-01));\n    }\n\n    :host( [variant=\"success\"][tone=\"quiet\"]:hover ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-success-03));\n    }\n\n    :host( [variant=\"success\"][tone=\"quiet\"][active] ) {\n\n      --mds-button-background: transparent;\n      --mds-button-color: rgb(var(--status-success-01));\n    }\n  }\n}\n\n:host( [size=\"sm\"] ) {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n  padding-top: 0rem;\n  padding-bottom: 0rem;\n\n  --mds-button-radius: 0.375rem;\n\n  min-height: 1.75rem;\n  min-width: 1.75rem;\n}\n\n:host( .no-text[size=\"sm\"] ) {\n  padding: 0rem;\n}\n\n:host( [size=\"sm\"] ) .text {\n  font-weight: 500;\n}\n\n:host( [size=\"sm\"][await]:not([await=\"false\"]) ) .await {\n  -webkit-transform: scale(.75);\n  transform: scale(.75);\n}\n\n:host( [size=\"md\"] ) {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\n:host( .no-text[size=\"md\"] ) {\n  padding: 0.25rem;\n}\n\n:host( [size=\"lg\"] ) {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n\n  min-height: 2.75rem;\n  min-width: 2.75rem;\n}\n\n:host( .no-text[size=\"lg\"] ) {\n  padding: 0.5rem;\n}\n\n:host( [size=\"xl\"] ) {\n  padding-left: 2rem;\n  padding-right: 2rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n\n  min-height: 3.25rem;\n  min-width: 3.25rem;\n}\n\n:host( .no-text[size=\"xl\"] ) {\n  padding: 0.5rem;\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .await,\n  .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .await,\n    .icon {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n  }\n  }\n}\n\n\n";
 const MdsButtonStyle0 = mdsButtonCss;
 
 const MdsButton = class {
@@ -122,7 +122,9 @@ const MdsButton = class {
                     this.redirectBlank();
                     return;
                 }
-                window.location.href = (_a = this.href) !== null && _a !== void 0 ? _a : ''; // TypeScript 5.0.2 bug: if (this.href) not checked
+                if (typeof window !== 'undefined') {
+                    window.location.href = (_a = this.href) !== null && _a !== void 0 ? _a : ''; // TypeScript 5.0.2 bug: if (this.href) not checked
+                }
             });
         }
         else if (this.internals.form) {
@@ -162,7 +164,7 @@ const MdsButton = class {
     }
     render() {
         this.typography = buttonSizeTypographyVariant[this.size];
-        return (index.h(index.Host, { key: 'd484503460bcc94a05fcafbb8a22f6393b36053f', class: clsx.clsx(!this.hasText && 'no-text'), onMouseDown: this.mouseDown, onMouseUp: this.mouseUp, onMouseOut: this.mouseUp, tabindex: "0", role: "button" }, index.h("div", { key: '968066eb3846d4a6a81af768ff87752b9921c456', class: "await" }, index.h("mds-spinner", { key: '50e70b9e20862083e6857dfee1433ff17c192745', class: "spinner", running: this.await })), this.icon && this.iconPosition === 'left' && index.h("mds-icon", { key: '46b3d379ae0b62f1c79f858bdcd8301a413cac98', "aria-hidden": "true", class: "icon", name: this.icon, part: "icon" }), this.hasText && index.h("mds-text", { key: '087af63ba9f7348c9c0adf986cc37a2b93c4b070', class: "text", part: "label", typography: this.typography }, index.h("slot", { key: '1e9d5239c4348e622d9130beb2d53bc3d2bb7782' })), this.hasNotification && index.h("slot", { key: '1095e39f0ec8f679e8e535f7bce3cfc56251233f', name: "notification" }), this.icon && this.iconPosition === 'right' && index.h("mds-icon", { key: '173c8dc5df2c87733a2ec219d7c112dad6d1a3c9', "aria-hidden": "true", class: "icon", name: this.icon, part: "icon" })));
+        return (index.h(index.Host, { key: '649b7825ea9191bc59e101a134971f6ab3f812a4', class: clsx.clsx(!this.hasText && 'no-text'), onMouseDown: this.mouseDown, onMouseUp: this.mouseUp, onMouseOut: this.mouseUp, tabindex: "0", role: "button" }, index.h("div", { key: 'dc8611656e599dadcd72a987cd02d366308b668e', class: "await" }, index.h("mds-spinner", { key: '2cf418c1d46fd3434491641b73ef996499e4a9fe', class: "spinner", running: this.await })), this.icon && this.iconPosition === 'left' && index.h("mds-icon", { key: '0b14c60e5e56118befb1cdab8e5f7e439a8e407f', "aria-hidden": "true", class: "icon", name: this.icon, part: "icon" }), this.hasText && index.h("mds-text", { key: '36be920f94596da917901f921914c11b4b713819', class: "text", part: "label", typography: this.typography }, index.h("slot", { key: '0f637c83733088951a9f5b0cc8969325cc099198' })), this.hasNotification && index.h("slot", { key: '8b0f56322131126cd861c2b76e2d0b7bd40435ae', name: "notification" }), this.icon && this.iconPosition === 'right' && index.h("mds-icon", { key: '8c2d58ff81373d1217aa1579b6d09f421b9754d4', "aria-hidden": "true", class: "icon", name: this.icon, part: "icon" })));
     }
     static get formAssociated() { return true; }
     get host() { return index.getElement(this); }
@@ -289,12 +291,12 @@ class MdsIconSet {
 
 class IconsSetController {
     constructor() {
-        this._iconsSets = new Map();
         this._svgPathKey = 'mdsIconSvgPath';
+        this._iconsSets = new Map();
         this._svgPathUpdate = 'mdsIconSvgPathUpdate';
         this.cacheExp = 60 * 60 * 1000 * 24;
-        this.memoryCache = {};
         this.listeners = [];
+        this.memoryCache = {};
         // Try to retrieve svg from cache
         this.isCacheAvailable = async (url) => {
             try {
@@ -350,9 +352,32 @@ class IconsSetController {
             return { set: null };
         return { set: this._iconsSets.get(iconName.split('/')[0]) };
     }
+    /**
+     * recognize svg path pattern and set host and svgPath variable
+     *
+     * input path: https://www.abc.com/svg/path
+     * svgPath =  https://www.abc.com/svg/path
+     *
+     * input path: localhost:9000/svg/path
+     * svgPath = localhost:9000/svg/path
+     *
+     * input path: /svg/path
+     * svgPath = {window.location.host}/svg/path
+     *
+     * input path: svg/path
+     * throw error
+     *
+     */
     setSvgPath(svgPath) {
-        this._svgPath = svgPath;
-        window.dispatchEvent(new Event(this._svgPathUpdate));
+        const reg = /^(((https?:\/\/)?[.\w]+(:\d+)?)|\/)([\w/-]+)*/;
+        const match = reg.exec(svgPath);
+        if (!match) {
+            throw Error(`Svg path not recognize ${svgPath}, ensure is a absolute path starting with '/' or a url`);
+        }
+        if (typeof window !== 'undefined') {
+            this._svgPath = match[1] ? match[0] : window.location.origin.concat(match[0]);
+            window.dispatchEvent(new Event(this._svgPathUpdate));
+        }
     }
     getSvgPath() {
         return this._svgPath;
@@ -361,13 +386,23 @@ class IconsSetController {
         this.listeners.push(callback);
     }
     setUpListener() {
-        window.addEventListener(this._svgPathUpdate, () => {
-            for (const listener of this.listeners)
-                listener();
-        });
+        if (typeof window !== 'undefined') {
+            window.addEventListener(this._svgPathUpdate, () => {
+                for (const listener of this.listeners)
+                    listener();
+            });
+        }
     }
-    async fetchSvg(src) {
+    async fetchSvg(name) {
+        var _a;
         try {
+            if (!this._svgPath && typeof window === 'undefined') {
+                throw Error('Cant find svgPath, ensure you set it');
+            }
+            if (!this._svgPath) {
+                this.setSvgPath((_a = window.sessionStorage.getItem(IconsSetService._svgPathKey)) !== null && _a !== void 0 ? _a : '');
+            }
+            const src = this._svgPath && !name.startsWith('http') ? this._svgPath.concat(name, '.svg') : name;
             const lsCache = await this.isCacheAvailable(src);
             if (this.memoryCache[src] || lsCache) {
                 return this.memoryCache[src] || lsCache;
@@ -432,12 +467,10 @@ const MdsIcon = class {
             this.svgHTML = this.name;
             return Promise.resolve();
         }
-        const svgPath = IconsSetService.getSvgPath() || window.sessionStorage.getItem(IconsSetService._svgPathKey);
-        this._iconHref = svgPath && !this.name.startsWith('http') ? window.location.origin.concat(svgPath.concat(this.name).concat('.svg')) : this.name;
-        this.svgHTML = await IconsSetService.fetchSvg(this._iconHref);
+        this.svgHTML = await IconsSetService.fetchSvg(this.name);
     }
     render() {
-        return (index.h(index.Host, { key: 'cd5223c17789fa8499b014ab11d28f29d11a6d5e' }, this.svgHTML && index.h("i", { key: 'b176ca6f11eb463e4a449da470a80b1a2ca42505', "aria-hidden": "true", class: "icon", part: "svg", innerHTML: this.svgHTML })));
+        return (index.h(index.Host, { key: '0776044452ef994b9671eaad6d0f1299bd3f7add' }, this.svgHTML && index.h("i", { key: '0091505aeb5563e9a1327d174d19ac0e4fe1ffd6', "aria-hidden": "true", class: "icon", part: "svg", innerHTML: this.svgHTML })));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
@@ -452,7 +485,7 @@ const awaitIcon = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org
 </svg>
 `;
 
-const mdsSpinnerCss = "@tailwind utilities;\n\n/**\n * @prop --mds-spinner-duration: Sets the duration of the icon animation\n */\n\n:host {\n\n  --mds-spinner-duration: 0.725s;\n\n  height: 3rem;\n\n  width: 3rem;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n\n  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: rgb(var(--brand-maggioli-03));\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-pack: center;\n  justify-content: center;\n  -webkit-transform: scale(0);\n  transform: scale(0);\n  -webkit-transition-property: -webkit-transform;\n  transition-property: -webkit-transform;\n  transition-property: transform;\n  transition-property: transform, -webkit-transform;\n}\n\n:host([running]:not([running=\"false\"])){\n\n  -webkit-transition-duration: 700ms;\n\n  transition-duration: 700ms;\n\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  -webkit-transform: scale(1);\n\n  transform: scale(1);\n}\n\n.await-icon{\n\n  aspect-ratio: 1/1;\n\n  width: 100%;\n}\n\n@-webkit-keyframes spin{\n\n  to{\n\n    -webkit-transform: rotate(360deg);\n\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes spin{\n\n  to{\n\n    -webkit-transform: rotate(360deg);\n\n    transform: rotate(360deg);\n  }\n}\n\n.await-icon{\n\n  -webkit-animation: spin 1s linear infinite;\n\n  animation: spin 1s linear infinite;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  -webkit-animation-duration: var(--mds-spinner-duration);\n\n  animation-duration: var(--mds-spinner-duration);\n  -webkit-animation-play-state: paused;\n  animation-play-state: paused;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  stroke: currentcolor;\n  -webkit-transition-property: stroke;\n  transition-property: stroke;\n}\n\n:host([running]:not([running=\"false\"])) .await-icon {\n  -webkit-animation-play-state: running;\n  animation-play-state: running;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-spinner-duration: 4s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n\n      --mds-spinner-duration: 4s;\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n    color: rgb(var(--brand-maggioli-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n      color: rgb(var(--brand-maggioli-01));\n    }\n  }\n}\n\n";
+const mdsSpinnerCss = "@tailwind utilities;\n\n/**\n * @prop --mds-spinner-duration: Sets the duration of the icon animation\n */\n\n:host {\n\n  --mds-spinner-duration: 0.725s;\n\n  height: 3rem;\n\n  width: 3rem;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n\n  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: rgb(var(--variant-primary-03));\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-pack: center;\n  justify-content: center;\n  -webkit-transform: scale(0);\n  transform: scale(0);\n  -webkit-transition-property: -webkit-transform;\n  transition-property: -webkit-transform;\n  transition-property: transform;\n  transition-property: transform, -webkit-transform;\n}\n\n:host([running]:not([running=\"false\"])){\n\n  -webkit-transition-duration: 700ms;\n\n  transition-duration: 700ms;\n\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  -webkit-transform: scale(1);\n\n  transform: scale(1);\n}\n\n.await-icon{\n\n  aspect-ratio: 1/1;\n\n  width: 100%;\n}\n\n@-webkit-keyframes spin{\n\n  to{\n\n    -webkit-transform: rotate(360deg);\n\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes spin{\n\n  to{\n\n    -webkit-transform: rotate(360deg);\n\n    transform: rotate(360deg);\n  }\n}\n\n.await-icon{\n\n  -webkit-animation: spin 1s linear infinite;\n\n  animation: spin 1s linear infinite;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  -webkit-animation-duration: var(--mds-spinner-duration);\n\n  animation-duration: var(--mds-spinner-duration);\n  -webkit-animation-play-state: paused;\n  animation-play-state: paused;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  stroke: currentcolor;\n  -webkit-transition-property: stroke;\n  transition-property: stroke;\n}\n\n:host([running]:not([running=\"false\"])) .await-icon {\n  -webkit-animation-play-state: running;\n  animation-play-state: running;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-spinner-duration: 4s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n\n      --mds-spinner-duration: 4s;\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n    color: rgb(var(--variant-primary-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n      color: rgb(var(--variant-primary-01));\n    }\n  }\n}\n\n";
 const MdsSpinnerStyle0 = mdsSpinnerCss;
 
 const MdsSpinner = class {

package/dist/cjs/mds-card-content.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 
 const mdsCardContentCss = ":host{gap:1rem;padding:1rem;display:grid;grid-template-columns:minmax(1fr, 100%)}";
 const MdsCardContentStyle0 = mdsCardContentCss;

package/dist/cjs/mds-card-footer.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 
 const mdsCardFooterCss = ":host{gap:1rem;padding:1rem;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:end;justify-content:flex-end}";
 const MdsCardFooterStyle0 = mdsCardFooterCss;

package/dist/cjs/mds-card-header.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 
 const mdsCardHeaderCss = ":host{gap:1rem;padding:1rem;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:justify;justify-content:space-between}";
 const MdsCardHeaderStyle0 = mdsCardHeaderCss;

package/dist/cjs/mds-card-media.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 
 const mdsCardMediaCss = ":host{background-color:rgb(var(--tone-neutral-09));display:grid;position:relative}.content{gap:0.5rem;padding:1rem;-ms-flex-align:end;align-items:flex-end;display:-ms-flexbox;display:flex;inset:0;-ms-flex-pack:center;justify-content:center;position:absolute}.img{-o-object-fit:contain;object-fit:contain}";
 const MdsCardMediaStyle0 = mdsCardMediaCss;

package/dist/cjs/mds-card.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 const clsx = require('./clsx-fc789adc.js');
 
 const mdsCardCss = "@tailwind utilities;\n\n/**\n * @prop --mds-card-gap: Sets the spacing between card elements\n * @prop --mds-card-padding: Sets the spacing around card elements\n */\n\n:host {\n\n  --mds-card-gap: 0;\n  --mds-card-padding: 0;\n  border-radius: 1rem;\n\n  background-color: rgb(var(--tone-neutral));\n  -webkit-box-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n  box-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n  container-name: mds-card;\n  container-type: inline-size;\n  display: grid;\n  min-height: 1rem;\n  overflow: hidden;\n}\n\n.layout:not(.layout--disabled) ::slotted([slot=\"media\"]) {\n  grid-area: media;\n}\n\n.layout:not(.layout--disabled) ::slotted([slot=\"header\"]) {\n  grid-area: header;\n}\n\n.layout:not(.layout--disabled) ::slotted([slot=\"content\"]) {\n  grid-area: content;\n}\n\n.layout:not(.layout--disabled) ::slotted([slot=\"footer\"]) {\n  grid-area: footer;\n}\n\n.layout{\n\n  padding: 1rem;\n\n  display: grid;\n  gap: var(--mds-card-gap);\n  grid-template-columns: minmax(0, 100%);\n  padding: var(--mds-card-padding);\n}\n\n.layout--cfhm:not(.layout--disabled) {\n  grid-template-areas:\n    \"header\"\n    \"media\"\n    \"content\"\n    \"footer\";\n  grid-template-rows:\n    -webkit-min-content\n    -webkit-min-content\n    1fr\n    -webkit-min-content;\n  grid-template-rows:\n    min-content\n    min-content\n    1fr\n    min-content;\n}\n\n.layout--chm:not(.layout--disabled) {\n  grid-template-areas:\n    \"header\"\n    \"media\"\n    \"content\";\n  grid-template-rows:\n    -webkit-min-content\n    -webkit-min-content\n    1fr;\n  grid-template-rows:\n    min-content\n    min-content\n    1fr;\n}\n\n.layout--cfm:not(.layout--disabled) {\n  grid-template-areas:\n    \"media\"\n    \"content\"\n    \"footer\";\n  grid-template-rows:\n    -webkit-min-content\n    1fr\n    -webkit-min-content;\n  grid-template-rows:\n    min-content\n    1fr\n    min-content;\n}\n\n.layout--fhm:not(.layout--disabled) {\n  grid-template-areas:\n    \"header\"\n    \"media\"\n    \"footer\";\n  grid-template-rows:\n    -webkit-min-content\n    1fr\n    -webkit-min-content;\n  grid-template-rows:\n    min-content\n    1fr\n    min-content;\n}\n\n.layout--cfh:not(.layout--disabled) {\n  grid-template-areas:\n    \"header\"\n    \"content\"\n    \"footer\";\n  grid-template-rows:\n    -webkit-min-content\n    1fr\n    -webkit-min-content;\n  grid-template-rows:\n    min-content\n    1fr\n    min-content;\n}\n\n.layout--hm:not(.layout--disabled) {\n  grid-template-areas:\n    \"header\"\n    \"media\";\n  grid-template-rows:\n    -webkit-min-content\n    1fr;\n  grid-template-rows:\n    min-content\n    1fr;\n}\n\n.layout--fm:not(.layout--disabled) {\n  grid-template-areas:\n    \"media\"\n    \"footer\";\n  grid-template-rows:\n    1fr\n    -webkit-min-content;\n  grid-template-rows:\n    1fr\n    min-content;\n}\n\n.layout--cm:not(.layout--disabled) {\n  grid-template-areas:\n    \"media\"\n    \"content\";\n  grid-template-rows:\n    -webkit-min-content\n    1fr;\n  grid-template-rows:\n    min-content\n    1fr;\n}\n\n.layout--fh:not(.layout--disabled) {\n  grid-template-areas:\n    \"header\"\n    \"footer\";\n  grid-template-rows:\n    -webkit-min-content\n    1fr;\n  grid-template-rows:\n    min-content\n    1fr;\n}\n\n.layout--ch:not(.layout--disabled) {\n  grid-template-areas:\n    \"header\"\n    \"content\";\n  grid-template-rows:\n    -webkit-min-content\n    1fr;\n  grid-template-rows:\n    min-content\n    1fr;\n}\n\n.layout--cf:not(.layout--disabled) {\n  grid-template-areas:\n    \"content\"\n    \"footer\";\n  grid-template-rows:\n    1fr\n    -webkit-min-content;\n  grid-template-rows:\n    1fr\n    min-content;\n}\n\n.layout--h:not(.layout--disabled) {\n  grid-template-areas: \"header\";\n  grid-template-rows: 1fr;\n}\n\n.layout--m:not(.layout--disabled) {\n  grid-template-areas: \"media\";\n  grid-template-rows: 1fr;\n}\n\n.layout--c:not(.layout--disabled) {\n  grid-template-areas: \"content\";\n  grid-template-rows: 1fr;\n}\n\n.layout--f:not(.layout--disabled) {\n  grid-template-areas: \"footer\";\n  grid-template-rows: 1fr;\n}\n\n@container mds-card (width > 30em) {\n  .layout--cfhm:not(.layout--disabled) {\n    grid-template-areas:\n      \"media header\"\n      \"media content\"\n      \"media footer\";\n    grid-template-columns: minmax(240px, 1fr) 2fr;\n    grid-template-rows:\n      -webkit-min-content\n      1fr\n      -webkit-min-content;\n    grid-template-rows:\n      min-content\n      1fr\n      min-content;\n  }\n\n  .layout--chm:not(.layout--disabled) {\n    grid-template-areas:\n      \"media header\"\n      \"media content\"\n      \"media content\";\n    grid-template-columns: minmax(240px, 1fr) 2fr;\n    grid-template-rows:\n      -webkit-min-content\n      1fr\n      1fr;\n    grid-template-rows:\n      min-content\n      1fr\n      1fr;\n  }\n\n  .layout--fhm:not(.layout--disabled) {\n    grid-template-areas:\n      \"media header\"\n      \"media footer\";\n    grid-template-columns: minmax(240px, 1fr) 2fr;\n    grid-template-rows:\n      -webkit-min-content\n      1fr;\n    grid-template-rows:\n      min-content\n      1fr;\n  }\n\n  .layout--cfm:not(.layout--disabled) {\n    grid-template-areas:\n      \"media content\"\n      \"media footer\";\n    grid-template-columns: minmax(240px, 1fr) 2fr;\n    grid-template-rows:\n      1fr\n      -webkit-min-content;\n    grid-template-rows:\n      1fr\n      min-content;\n  }\n\n  .layout--cm:not(.layout--disabled) {\n    grid-template-areas:\n      \"media content\";\n    grid-template-columns: minmax(240px, 1fr) 2fr;\n    grid-template-rows:\n      1fr\n      -webkit-min-content;\n    grid-template-rows:\n      1fr\n      min-content;\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n    }\n  }\n}\n\n\n";