@maggioli-design-system/magma 1.11.7 → 1.12.0

package/dist/magma-components/{p-224f80f4.entry.js → p-3bf7d52c.entry.js}

@@ -1 +1 @@
-import{r as t,h as n,H as r,g as o}from"./p-3a6b32e7.js";import{K as a}from"./p-23e7e277.js";import{u as s,s as e}from"./p-f00c93f4.js";const d={sm:"action",md:"action",lg:"h6",xl:"h4"},i="data:image/svg+xml;base64,",h=t=>!!t&&t.startsWith(i),c=t=>!!t&&t.startsWith("<svg "),b=class{constructor(n){t(this,n),n.$hostElement$["s-ei"]?this.internals=n.$hostElement$["s-ei"]:(this.internals=n.$hostElement$.attachInternals(),n.$hostElement$["s-ei"]=this.internals),this.km=new a,this.iconPosition="left",this.type="submit",this.variant="primary",this.tone="strong",this.size="md",this.target="self",this.truncate="word",this.handleRequestSubmitForm=t=>{var n;t.preventDefault(),null===(n=this.internals.form)||void 0===n||n.requestSubmit()},this.handleReset=t=>{var n;t.preventDefault(),null===(n=this.internals.form)||void 0===n||n.reset()},this.mouseDown=()=>{this.active=!0},this.mouseUp=()=>{this.active=!1},this.redirectBlank=()=>{if("undefined"==typeof window)throw Error("Object window is not defined");window.open(this.href,"_blank")},this.onSlotChangeHandler=()=>{this.hasText=""!==this.host.innerHTML.trim()||this.host.children.length>0}}disabledChanged(t){t?this.km.attachClickBehavior():(this.km.detachClickBehavior(),this.disabled=void 0)}awaitChanged(t){this.host.setAttribute("aria-busy",(!!t).toString()),t?this.km.attachClickBehavior():this.km.detachClickBehavior()}handleTypeChange(t){this.internals.form&&("submit"===t?(this.host.removeEventListener("click",this.handleReset),this.host.addEventListener("click",this.handleRequestSubmitForm)):"reset"===t?(this.host.removeEventListener("click",this.handleRequestSubmitForm),this.host.addEventListener("click",this.handleReset)):(this.host.removeEventListener("click",this.handleRequestSubmitForm),this.host.removeEventListener("click",this.handleReset)))}handleVariantChange(t){"google"!==t?"apple"!==t||(this.icon='<svg xmlns="http://www.w3.org/2000/svg" id="mdi-apple" viewBox="0 0 24 24"><path d="M18.71,19.5C17.88,20.74 17,21.95 15.66,21.97C14.32,22 13.89,21.18 12.37,21.18C10.84,21.18 10.37,21.95 9.1,22C7.79,22.05 6.8,20.68 5.96,19.47C4.25,17 2.94,12.45 4.7,9.39C5.57,7.87 7.13,6.91 8.82,6.88C10.1,6.86 11.32,7.75 12.11,7.75C12.89,7.75 14.37,6.68 15.92,6.84C16.57,6.87 18.39,7.1 19.56,8.82C19.47,8.88 17.39,10.1 17.41,12.63C17.44,15.65 20.06,16.66 20.09,16.67C20.06,16.74 19.67,18.11 18.71,19.5M13,3.5C13.73,2.67 14.94,2.04 15.94,2C16.07,3.17 15.6,4.35 14.9,5.19C14.21,6.04 13.07,6.7 11.95,6.61C11.8,5.46 12.36,4.26 13,3.5Z" /></svg>'):this.icon='<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" xmlnsXlink="http://www.w3.org/1999/xlink"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path><path fill="none" d="M0 0h48v48H0z"></path></svg>\n'}componentWillLoad(){this.hasNotification=null!==this.host.querySelector(':scope > [slot="notification"]'),this.hasText=""!==this.host.innerHTML.trim()||this.host.children.length>0,this.handleVariantChange(this.variant),this.href?this.host.addEventListener("click",(t=>{var n;t.preventDefault(),"blank"!==this.target?"undefined"!=typeof window&&(window.location.href=null!==(n=this.href)&&void 0!==n?n:""):this.redirectBlank()})):this.internals.form&&("submit"===this.type?this.host.addEventListener("click",this.handleRequestSubmitForm):"reset"===this.type&&this.host.addEventListener("click",this.handleReset))}componentDidLoad(){if(this.km.addElement(this.host),this.await||this.km.attachClickBehavior(),this.host.setAttribute("aria-busy",this.await?"true":"false"),this.autoFocus&&this.host.focus(),!h(this.icon)&&!c(this.icon)){if(!this.hasText&&this.icon){const t=s(this.icon);this.host.hasAttribute("aria-label")||e(this.host,"title",t),this.host.hasAttribute("title")||e(this.host,"aria-label",t)}e(this.host,"role","button")}}handleAwaitChange(t){if(!1===t)return this.await=void 0,void this.km.detachClickBehavior();this.km.attachClickBehavior()}connectedCallback(){this.disabled||this.host.removeAttribute("disabled")}disconnectedCallback(){this.km.detachClickBehavior()}render(){return this.typography=d[this.size],n(r,{key:"3c54ecab2250be89d7f925cd4fea6eaeea05fa1f",onMouseDown:this.mouseDown,onMouseUp:this.mouseUp,onMouseOut:this.mouseUp,tabindex:"0"},n("div",{key:"41edeab2fca583980ac046866f9b0b4c14268f60",class:"await"},n("mds-spinner",{key:"9b7d06b88d13aa5f343f476fc7aec4aef824670b",class:"spinner",running:this.await})),this.icon&&"left"===this.iconPosition&&n("mds-icon",{key:"46f069315b6006c19183b10fc5e3fdc73d2b7e09","aria-hidden":"true",class:"icon",name:this.icon,part:"icon"}),n("mds-text",{key:"6f15cf82126c3c1e04e00eae75fc43ea657782ea",class:"text",part:"label",typography:this.typography,truncate:this.truncate},n("slot",{key:"3e068fcac844e33b49afdc5dbff20bd65238136d",onSlotchange:this.onSlotChangeHandler})),this.hasNotification&&n("slot",{key:"0482835f6c3160521b9fe2e04ef6721d28815167",name:"notification"}),this.icon&&"right"===this.iconPosition&&n("mds-icon",{key:"8d11f6f28287b34517b276431f7cb1d31fad9617","aria-hidden":"true",class:"icon",name:this.icon,part:"icon"}))}static get formAssociated(){return!0}get host(){return o(this)}static get watchers(){return{disabled:["disabledChanged"],await:["awaitChanged","handleAwaitChange"],type:["handleTypeChange"],variant:["handleVariantChange"]}}};function m(t){return new Promise((function(n,r){t.oncomplete=t.onsuccess=function(){return n(t.result)},t.onabort=t.onerror=function(){return r(t.error)}}))}var u;function v(){return u||(u=function(t,n){var r=indexedDB.open("keyval-store");r.onupgradeneeded=function(){return r.result.createObjectStore(n)};var o=m(r);return function(t,r){return o.then((function(o){return r(o.transaction(n,t).objectStore(n))}))}}(0,"keyval")),u}b.style='@-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\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 color of the border of the component (based on box-shadow declaration)\n * @prop --mds-button-border-default-opacity: Sets the default opacity of the border color of the component (based on box-shadow declaration)\n * @prop --mds-button-border-high-contrast-hover-width: Sets the width of the border when the component is hovered and the contrast is high (based on box-shadow declaration)\n * @prop --mds-button-border-high-contrast-width: Sets the width of the border of the component and the contrast is high (based on box-shadow declaration)\n * @prop --mds-button-border-hover-opacity: Sets the opacity of the border color when the component is hovered (based on box-shadow declaration)\n * @prop --mds-button-border-opacity: Sets the border opacity of the component (based on box-shadow declaration)\n * @prop --mds-button-border-tone-ghost-hover-width: Sets the width of the border when the component is hovered when the tone is set to `ghost` (based on box-shadow declaration)\n * @prop --mds-button-border-tone-strong-hover-width: Sets the width of the border when the component is hovered when the tone is set to `strong` (based on box-shadow declaration)\n * @prop --mds-button-border-tone-weak-hover-width: Sets the width of the border when the component is hovered when the tone is set to `weak` (based on box-shadow declaration)\n * @prop --mds-button-border-width: Sets the border width of the component (based on box-shadow declaration)\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  --mds-button-await-duration: 0.725s;\n  --mds-button-background: rgb(var(--variant-primary-02));\n  --mds-button-border-color: 0 0 0;\n  --mds-button-border-hover-opacity: 0.75;\n  --mds-button-border-default-opacity: 0.5;\n  --mds-button-border-tone-strong-hover-width: 0.0625rem;\n  --mds-button-border-tone-ghost-hover-width: 3px;\n  --mds-button-border-tone-weak-hover-width: 0.0625rem;\n  --mds-button-border-high-contrast-width: 0.125rem;\n  --mds-button-border-high-contrast-hover-width: 3px;\n  --mds-button-border-opacity: 0;\n  --mds-button-border-width: 0.125rem;\n  --mds-button-color: rgb(var(--tone-neutral));\n  --mds-button-gap: 0.5rem;\n  --mds-button-line-clamp: 1;\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    --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: 0.75rem;\n  padding-right: 0.75rem;\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-radius: var(--mds-button-radius);\n  -webkit-box-shadow: 0 0 0 var(--mds-button-border-width) rgb(var(--mds-button-border-color) / var(--mds-button-border-opacity));\n  box-shadow: 0 0 0 var(--mds-button-border-width) rgb(var(--mds-button-border-color) / var(--mds-button-border-opacity));\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, padding-left, padding-right, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, color, outline, outline-offset, padding-left, padding-right, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, box-shadow, color, outline, outline-offset, padding-left, padding-right, transform;\n  transition-property: background-color, border-color, box-shadow, color, outline, outline-offset, padding-left, padding-right, transform, -webkit-box-shadow, -webkit-transform;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n:host(:focus-visible) {\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  --mds-text-line-clamp: var(--mds-button-line-clamp);\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-context(mds-button-group):host(:not(:first-child)) {\n  border-bottom-left-radius: 0;\n  border-top-left-radius: 0;\n}\n\n:host-context(mds-button-group):host(:not(:last-child)) {\n  border-bottom-right-radius: 0;\n  border-top-right-radius: 0;\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:host([disabled]:not([disabled="false"])) {\n  opacity: 0.5;\n\n  pointer-events: none;\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([size="sm"]:not([has-text])) {\n  padding: 0rem;\n}\n\n:host([size="sm"]) .text {\n  font-weight: 500;\n}\n\n:host([size="sm"]) .icon {\n  height: 1rem;\n  width: 1rem;\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([size="md"]:not([has-text])) {\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: 3rem;\n  min-width: 3rem;\n}\n\n:host([size="lg"]:not([has-text])) {\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([size="xl"]:not([has-text])) {\n  padding: 0.5rem;\n}\n\n:host(:not([has-text])) .text {\n  display: none;\n}\n\n:host([variant="dark"][tone="strong"]) {\n  --mds-button-background: rgb(var(--tone-neutral-04));\n  --mds-button-border-color: var(--tone-neutral-04);\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host([variant="dark"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--tone-neutral-05));\n  --mds-button-border-color: var(--tone-neutral-05);\n}\n\n:host([variant="dark"][tone="weak"]) {\n  --mds-button-background: rgb(var(--tone-neutral-08));\n  --mds-button-border-color: var(--tone-neutral-08);\n  --mds-button-color: rgb(var(--tone-neutral-03));\n\n  fill: rgb(var(--tone-neutral-03));\n}\n\n:host([variant="dark"][tone="weak"]:hover) {\n  --mds-button-background: rgb(var(--tone-neutral-07));\n  --mds-button-border-color: var(--tone-neutral-07);\n  --mds-button-color: rgb(var(--tone-neutral-02));\n}\n\n:host([variant="dark"][tone="ghost"]) {\n  --mds-button-border-color: var(--tone-neutral-04);\n  --mds-button-color: rgb(var(--tone-neutral-03));\n}\n\n:host([variant="dark"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--tone-neutral-04);\n  --mds-button-color: rgb(var(--tone-neutral-02));\n}\n\n:host([variant="dark"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--tone-neutral-02));\n}\n\n:host([variant="dark"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--tone-neutral-04));\n}\n\n:host([variant="dark"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--tone-neutral-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="ai"][tone="strong"]) {\n  --mds-button-background: rgb(var(--variant-ai-03));\n  --mds-button-color: rgb(var(--tone-neutral));\n  --mds-button-border-color: var(--variant-ai-03);\n}\n\n:host-context(.pref-contrast-more):host([variant="ai"][tone="strong"][active]),\n:host-context(.pref-contrast-more):host([variant="ai"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--variant-ai-02));\n  --mds-button-border-color: var(--variant-ai-02);\n}\n\n:host-context(.pref-contrast-more):host([variant="ai"][tone="weak"]) {\n  --mds-button-background: rgb(var(--variant-ai-09));\n  --mds-button-color: rgb(var(--variant-ai-02));\n  --mds-button-border-color: var(--variant-ai-06);\n  --mds-button-border-width: var(--mds-button-border-high-contrast-width);\n\n  fill: rgb(var(--variant-ai-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="ai"][tone="weak"]:hover) {\n  --mds-button-background: rgb(var(--variant-ai-10));\n  --mds-button-color: rgb(var(--variant-ai-01));\n  --mds-button-border-width: var(--mds-button-border-high-contrast-hover-width);\n\n  fill: rgb(var(--variant-ai-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="ai"][tone="weak"][active]) {\n  --mds-button-background: rgb(var(--variant-ai-08));\n  --mds-button-color: rgb(var(--variant-ai-01));\n\n  fill: rgb(var(--variant-ai-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="ai"][tone="ghost"]) {\n  --mds-button-border-color: var(--variant-ai-03);\n  --mds-button-color: rgb(var(--variant-ai-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="ai"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--variant-ai-03);\n  --mds-button-color: rgb(var(--variant-ai-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="ai"][tone="ghost"][active]) {\n  --mds-button-border-color: var(--variant-ai-04);\n  --mds-button-color: rgb(var(--variant-ai-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="ai"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--variant-ai-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="ai"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--variant-ai-03));\n}\n\n:host-context(.pref-contrast-more):host([variant="ai"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--variant-ai-01));\n}\n\n@media (prefers-contrast: more) {\n  :host-context(.pref-contrast-system):host([variant="ai"][tone="strong"]) {\n    --mds-button-background: rgb(var(--variant-ai-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="ai"][tone="strong"][active]),\n  :host-context(.pref-contrast-system):host([variant="ai"][tone="strong"]:hover) {\n    --mds-button-background: rgb(var(--variant-ai-02));\n    --mds-button-border-color: var(--variant-ai-02);\n  }\n\n  :host-context(.pref-contrast-system):host([variant="ai"][tone="weak"]) {\n    --mds-button-background: rgb(var(--variant-ai-09));\n    --mds-button-color: rgb(var(--variant-ai-02));\n    --mds-button-border-color: var(--variant-ai-06);\n    --mds-button-border-width: var(--mds-button-border-high-contrast-width);\n\n    fill: rgb(var(--variant-ai-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="ai"][tone="weak"]:hover) {\n    --mds-button-background: rgb(var(--variant-ai-10));\n    --mds-button-color: rgb(var(--variant-ai-01));\n    --mds-button-border-width: var(--mds-button-border-high-contrast-hover-width);\n\n    fill: rgb(var(--variant-ai-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="ai"][tone="weak"][active]) {\n    --mds-button-background: rgb(var(--variant-ai-08));\n    --mds-button-color: rgb(var(--variant-ai-01));\n\n    fill: rgb(var(--variant-ai-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="ai"][tone="ghost"]) {\n    --mds-button-border-color: var(--variant-ai-03);\n    --mds-button-color: rgb(var(--variant-ai-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="ai"][tone="ghost"]:hover) {\n    --mds-button-border-color: var(--variant-ai-03);\n    --mds-button-color: rgb(var(--variant-ai-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="ai"][tone="ghost"][active]) {\n    --mds-button-border-color: var(--variant-ai-04);\n    --mds-button-color: rgb(var(--variant-ai-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="ai"][tone="quiet"]) {\n    --mds-button-color: rgb(var(--variant-ai-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="ai"][tone="quiet"]:hover) {\n    --mds-button-color: rgb(var(--variant-ai-03));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="ai"][tone="quiet"][active]) {\n    --mds-button-color: rgb(var(--variant-ai-01));\n  }\n}\n\n:host([variant="ai"][tone="strong"]) {\n  --mds-button-background: rgb(var(--variant-ai-05));\n  --mds-button-border-color: var(--variant-ai-05);\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host([variant="ai"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--variant-ai-04));\n  --mds-button-border-color: var(--variant-ai-04);\n}\n\n:host([variant="ai"][tone="weak"]) {\n  --mds-button-background: rgb(var(--variant-ai-09));\n  --mds-button-border-color: var(--variant-ai-09);\n  --mds-button-color: rgb(var(--variant-ai-03));\n\n  fill: rgb(var(--variant-ai-03));\n}\n\n:host([variant="ai"][tone="weak"]:hover) {\n  --mds-button-background: rgb(var(--variant-ai-08));\n  --mds-button-border-color: var(--variant-ai-08);\n}\n\n:host([variant="ai"][tone="ghost"]) {\n  --mds-button-border-color: var(--variant-ai-04);\n  --mds-button-color: rgb(var(--variant-ai-03));\n}\n\n:host([variant="ai"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--variant-ai-04);\n  --mds-button-color: rgb(var(--variant-ai-02));\n}\n\n:host([variant="ai"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--variant-ai-02));\n}\n\n:host([variant="ai"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--variant-ai-04));\n}\n\n:host([variant="ai"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--variant-ai-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="error"][tone="strong"]) {\n  --mds-button-background: rgb(var(--status-error-03));\n  --mds-button-color: rgb(var(--tone-neutral));\n  --mds-button-border-color: var(--status-error-03);\n}\n\n:host-context(.pref-contrast-more):host([variant="error"][tone="strong"][active]),\n:host-context(.pref-contrast-more):host([variant="error"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--status-error-02));\n  --mds-button-border-color: var(--status-error-02);\n}\n\n:host-context(.pref-contrast-more):host([variant="error"][tone="weak"]) {\n  --mds-button-background: rgb(var(--status-error-09));\n  --mds-button-color: rgb(var(--status-error-02));\n  --mds-button-border-color: var(--status-error-06);\n  --mds-button-border-width: var(--mds-button-border-high-contrast-width);\n\n  fill: rgb(var(--status-error-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="error"][tone="weak"]:hover) {\n  --mds-button-background: rgb(var(--status-error-10));\n  --mds-button-color: rgb(var(--status-error-01));\n  --mds-button-border-width: var(--mds-button-border-high-contrast-hover-width);\n\n  fill: rgb(var(--status-error-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="error"][tone="weak"][active]) {\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-context(.pref-contrast-more):host([variant="error"][tone="ghost"]) {\n  --mds-button-border-color: var(--status-error-03);\n  --mds-button-color: rgb(var(--status-error-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="error"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--status-error-03);\n  --mds-button-color: rgb(var(--status-error-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="error"][tone="ghost"][active]) {\n  --mds-button-border-color: var(--status-error-04);\n  --mds-button-color: rgb(var(--status-error-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="error"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--status-error-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="error"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--status-error-03));\n}\n\n:host-context(.pref-contrast-more):host([variant="error"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--status-error-01));\n}\n\n@media (prefers-contrast: more) {\n  :host-context(.pref-contrast-system):host([variant="error"][tone="strong"]) {\n    --mds-button-background: rgb(var(--status-error-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="error"][tone="strong"][active]),\n  :host-context(.pref-contrast-system):host([variant="error"][tone="strong"]:hover) {\n    --mds-button-background: rgb(var(--status-error-02));\n    --mds-button-border-color: var(--status-error-02);\n  }\n\n  :host-context(.pref-contrast-system):host([variant="error"][tone="weak"]) {\n    --mds-button-background: rgb(var(--status-error-09));\n    --mds-button-color: rgb(var(--status-error-02));\n    --mds-button-border-color: var(--status-error-06);\n    --mds-button-border-width: var(--mds-button-border-high-contrast-width);\n\n    fill: rgb(var(--status-error-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="error"][tone="weak"]:hover) {\n    --mds-button-background: rgb(var(--status-error-10));\n    --mds-button-color: rgb(var(--status-error-01));\n    --mds-button-border-width: var(--mds-button-border-high-contrast-hover-width);\n\n    fill: rgb(var(--status-error-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="error"][tone="weak"][active]) {\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-context(.pref-contrast-system):host([variant="error"][tone="ghost"]) {\n    --mds-button-border-color: var(--status-error-03);\n    --mds-button-color: rgb(var(--status-error-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="error"][tone="ghost"]:hover) {\n    --mds-button-border-color: var(--status-error-03);\n    --mds-button-color: rgb(var(--status-error-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="error"][tone="ghost"][active]) {\n    --mds-button-border-color: var(--status-error-04);\n    --mds-button-color: rgb(var(--status-error-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="error"][tone="quiet"]) {\n    --mds-button-color: rgb(var(--status-error-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="error"][tone="quiet"]:hover) {\n    --mds-button-color: rgb(var(--status-error-03));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="error"][tone="quiet"][active]) {\n    --mds-button-color: rgb(var(--status-error-01));\n  }\n}\n\n:host([variant="error"][tone="strong"]) {\n  --mds-button-background: rgb(var(--status-error-05));\n  --mds-button-border-color: var(--status-error-05);\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host([variant="error"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--status-error-04));\n  --mds-button-border-color: var(--status-error-04);\n}\n\n:host([variant="error"][tone="weak"]) {\n  --mds-button-background: rgb(var(--status-error-09));\n  --mds-button-border-color: 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  --mds-button-background: rgb(var(--status-error-08));\n  --mds-button-border-color: var(--status-error-08);\n}\n\n:host([variant="error"][tone="ghost"]) {\n  --mds-button-border-color: var(--status-error-04);\n  --mds-button-color: rgb(var(--status-error-03));\n}\n\n:host([variant="error"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--status-error-04);\n  --mds-button-color: rgb(var(--status-error-02));\n}\n\n:host([variant="error"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--status-error-02));\n}\n\n:host([variant="error"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--status-error-04));\n}\n\n:host([variant="error"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--status-error-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="info"][tone="strong"]) {\n  --mds-button-background: rgb(var(--status-info-03));\n  --mds-button-color: rgb(var(--tone-neutral));\n  --mds-button-border-color: var(--status-info-03);\n}\n\n:host-context(.pref-contrast-more):host([variant="info"][tone="strong"][active]),\n:host-context(.pref-contrast-more):host([variant="info"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--status-info-02));\n  --mds-button-border-color: var(--status-info-02);\n}\n\n:host-context(.pref-contrast-more):host([variant="info"][tone="weak"]) {\n  --mds-button-background: rgb(var(--status-info-09));\n  --mds-button-color: rgb(var(--status-info-02));\n  --mds-button-border-color: var(--status-info-06);\n  --mds-button-border-width: var(--mds-button-border-high-contrast-width);\n\n  fill: rgb(var(--status-info-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="info"][tone="weak"]:hover) {\n  --mds-button-background: rgb(var(--status-info-10));\n  --mds-button-color: rgb(var(--status-info-01));\n  --mds-button-border-width: var(--mds-button-border-high-contrast-hover-width);\n\n  fill: rgb(var(--status-info-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="info"][tone="weak"][active]) {\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-context(.pref-contrast-more):host([variant="info"][tone="ghost"]) {\n  --mds-button-border-color: var(--status-info-03);\n  --mds-button-color: rgb(var(--status-info-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="info"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--status-info-03);\n  --mds-button-color: rgb(var(--status-info-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="info"][tone="ghost"][active]) {\n  --mds-button-border-color: var(--status-info-04);\n  --mds-button-color: rgb(var(--status-info-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="info"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--status-info-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="info"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--status-info-03));\n}\n\n:host-context(.pref-contrast-more):host([variant="info"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--status-info-01));\n}\n\n@media (prefers-contrast: more) {\n  :host-context(.pref-contrast-system):host([variant="info"][tone="strong"]) {\n    --mds-button-background: rgb(var(--status-info-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="info"][tone="strong"][active]),\n  :host-context(.pref-contrast-system):host([variant="info"][tone="strong"]:hover) {\n    --mds-button-background: rgb(var(--status-info-02));\n    --mds-button-border-color: var(--status-info-02);\n  }\n\n  :host-context(.pref-contrast-system):host([variant="info"][tone="weak"]) {\n    --mds-button-background: rgb(var(--status-info-09));\n    --mds-button-color: rgb(var(--status-info-02));\n    --mds-button-border-color: var(--status-info-06);\n    --mds-button-border-width: var(--mds-button-border-high-contrast-width);\n\n    fill: rgb(var(--status-info-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="info"][tone="weak"]:hover) {\n    --mds-button-background: rgb(var(--status-info-10));\n    --mds-button-color: rgb(var(--status-info-01));\n    --mds-button-border-width: var(--mds-button-border-high-contrast-hover-width);\n\n    fill: rgb(var(--status-info-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="info"][tone="weak"][active]) {\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-context(.pref-contrast-system):host([variant="info"][tone="ghost"]) {\n    --mds-button-border-color: var(--status-info-03);\n    --mds-button-color: rgb(var(--status-info-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="info"][tone="ghost"]:hover) {\n    --mds-button-border-color: var(--status-info-03);\n    --mds-button-color: rgb(var(--status-info-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="info"][tone="ghost"][active]) {\n    --mds-button-border-color: var(--status-info-04);\n    --mds-button-color: rgb(var(--status-info-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="info"][tone="quiet"]) {\n    --mds-button-color: rgb(var(--status-info-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="info"][tone="quiet"]:hover) {\n    --mds-button-color: rgb(var(--status-info-03));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="info"][tone="quiet"][active]) {\n    --mds-button-color: rgb(var(--status-info-01));\n  }\n}\n\n:host([variant="info"][tone="strong"]) {\n  --mds-button-background: rgb(var(--status-info-05));\n  --mds-button-border-color: var(--status-info-05);\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host([variant="info"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--status-info-04));\n  --mds-button-border-color: var(--status-info-04);\n}\n\n:host([variant="info"][tone="weak"]) {\n  --mds-button-background: rgb(var(--status-info-09));\n  --mds-button-border-color: 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  --mds-button-background: rgb(var(--status-info-08));\n  --mds-button-border-color: var(--status-info-08);\n}\n\n:host([variant="info"][tone="ghost"]) {\n  --mds-button-border-color: var(--status-info-04);\n  --mds-button-color: rgb(var(--status-info-03));\n}\n\n:host([variant="info"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--status-info-04);\n  --mds-button-color: rgb(var(--status-info-02));\n}\n\n:host([variant="info"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--status-info-02));\n}\n\n:host([variant="info"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--status-info-04));\n}\n\n:host([variant="info"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--status-info-01));\n}\n\n:host([variant="light"][tone="strong"]) {\n  --mds-button-background: rgb(var(--tone-neutral));\n  --mds-button-border-color: var(--tone-neutral);\n  --mds-button-color: rgb(var(--tone-neutral-03));\n}\n\n:host([variant="light"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--tone-neutral));\n  --mds-button-border-color: var(--tone-neutral);\n}\n\n:host([variant="light"][tone="weak"]) {\n  --mds-button-background: rgb(var(--tone-neutral));\n  --mds-button-border-color: var(--tone-neutral);\n  --mds-button-color: rgb(var(--tone-neutral-03));\n\n  fill: rgb(var(--tone-neutral-03));\n}\n\n:host([variant="light"][tone="weak"]:hover) {\n  --mds-button-background: rgb(var(--tone-neutral));\n  --mds-button-border-color: var(--tone-neutral);\n  --mds-button-color: rgb(var(--tone-neutral-02));\n}\n\n:host([variant="light"][tone="ghost"]) {\n  --mds-button-border-color: var(--tone-neutral);\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host([variant="light"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--tone-neutral);\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host([variant="light"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host([variant="light"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host([variant="light"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host-context(.pref-contrast-more):host([variant="primary"][tone="strong"]) {\n  --mds-button-background: rgb(var(--variant-primary-03));\n  --mds-button-color: rgb(var(--tone-neutral));\n  --mds-button-border-color: var(--variant-primary-03);\n}\n\n:host-context(.pref-contrast-more):host([variant="primary"][tone="strong"][active]),\n:host-context(.pref-contrast-more):host([variant="primary"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--variant-primary-02));\n  --mds-button-border-color: var(--variant-primary-02);\n}\n\n:host-context(.pref-contrast-more):host([variant="primary"][tone="weak"]) {\n  --mds-button-background: rgb(var(--variant-primary-09));\n  --mds-button-color: rgb(var(--variant-primary-02));\n  --mds-button-border-color: var(--variant-primary-06);\n  --mds-button-border-width: var(--mds-button-border-high-contrast-width);\n\n  fill: rgb(var(--variant-primary-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="primary"][tone="weak"]:hover) {\n  --mds-button-background: rgb(var(--variant-primary-10));\n  --mds-button-color: rgb(var(--variant-primary-01));\n  --mds-button-border-width: var(--mds-button-border-high-contrast-hover-width);\n\n  fill: rgb(var(--variant-primary-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="primary"][tone="weak"][active]) {\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-context(.pref-contrast-more):host([variant="primary"][tone="ghost"]) {\n  --mds-button-border-color: var(--variant-primary-03);\n  --mds-button-color: rgb(var(--variant-primary-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="primary"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--variant-primary-03);\n  --mds-button-color: rgb(var(--variant-primary-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="primary"][tone="ghost"][active]) {\n  --mds-button-border-color: var(--variant-primary-04);\n  --mds-button-color: rgb(var(--variant-primary-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="primary"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--variant-primary-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="primary"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--variant-primary-03));\n}\n\n:host-context(.pref-contrast-more):host([variant="primary"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--variant-primary-01));\n}\n\n@media (prefers-contrast: more) {\n  :host-context(.pref-contrast-system):host([variant="primary"][tone="strong"]) {\n    --mds-button-background: rgb(var(--variant-primary-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="primary"][tone="strong"][active]),\n  :host-context(.pref-contrast-system):host([variant="primary"][tone="strong"]:hover) {\n    --mds-button-background: rgb(var(--variant-primary-02));\n    --mds-button-border-color: var(--variant-primary-02);\n  }\n\n  :host-context(.pref-contrast-system):host([variant="primary"][tone="weak"]) {\n    --mds-button-background: rgb(var(--variant-primary-09));\n    --mds-button-color: rgb(var(--variant-primary-02));\n    --mds-button-border-color: var(--variant-primary-06);\n    --mds-button-border-width: var(--mds-button-border-high-contrast-width);\n\n    fill: rgb(var(--variant-primary-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="primary"][tone="weak"]:hover) {\n    --mds-button-background: rgb(var(--variant-primary-10));\n    --mds-button-color: rgb(var(--variant-primary-01));\n    --mds-button-border-width: var(--mds-button-border-high-contrast-hover-width);\n\n    fill: rgb(var(--variant-primary-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="primary"][tone="weak"][active]) {\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-context(.pref-contrast-system):host([variant="primary"][tone="ghost"]) {\n    --mds-button-border-color: var(--variant-primary-03);\n    --mds-button-color: rgb(var(--variant-primary-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="primary"][tone="ghost"]:hover) {\n    --mds-button-border-color: var(--variant-primary-03);\n    --mds-button-color: rgb(var(--variant-primary-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="primary"][tone="ghost"][active]) {\n    --mds-button-border-color: var(--variant-primary-04);\n    --mds-button-color: rgb(var(--variant-primary-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="primary"][tone="quiet"]) {\n    --mds-button-color: rgb(var(--variant-primary-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="primary"][tone="quiet"]:hover) {\n    --mds-button-color: rgb(var(--variant-primary-03));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="primary"][tone="quiet"][active]) {\n    --mds-button-color: rgb(var(--variant-primary-01));\n  }\n}\n\n:host([variant="primary"][tone="strong"]) {\n  --mds-button-background: rgb(var(--variant-primary-04));\n  --mds-button-border-color: var(--variant-primary-04);\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host([variant="primary"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--variant-primary-03));\n  --mds-button-border-color: var(--variant-primary-03);\n}\n\n:host([variant="primary"][tone="weak"]) {\n  --mds-button-background: rgb(var(--variant-primary-09));\n  --mds-button-border-color: 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  --mds-button-background: rgb(var(--variant-primary-08));\n  --mds-button-border-color: var(--variant-primary-08);\n}\n\n:host([variant="primary"][tone="ghost"]) {\n  --mds-button-border-color: var(--variant-primary-04);\n  --mds-button-color: rgb(var(--variant-primary-03));\n}\n\n:host([variant="primary"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--variant-primary-04);\n  --mds-button-color: rgb(var(--variant-primary-02));\n}\n\n:host([variant="primary"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--variant-primary-02));\n}\n\n:host([variant="primary"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--variant-primary-04));\n}\n\n:host([variant="primary"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--variant-primary-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="secondary"][tone="strong"]) {\n  --mds-button-background: rgb(var(--variant-secondary-03));\n  --mds-button-color: rgb(var(--tone-neutral));\n  --mds-button-border-color: var(--variant-secondary-03);\n}\n\n:host-context(.pref-contrast-more):host([variant="secondary"][tone="strong"][active]),\n:host-context(.pref-contrast-more):host([variant="secondary"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--variant-secondary-02));\n  --mds-button-border-color: var(--variant-secondary-02);\n}\n\n:host-context(.pref-contrast-more):host([variant="secondary"][tone="weak"]) {\n  --mds-button-background: rgb(var(--variant-secondary-09));\n  --mds-button-color: rgb(var(--variant-secondary-02));\n  --mds-button-border-color: var(--variant-secondary-06);\n  --mds-button-border-width: var(--mds-button-border-high-contrast-width);\n\n  fill: rgb(var(--variant-secondary-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="secondary"][tone="weak"]:hover) {\n  --mds-button-background: rgb(var(--variant-secondary-10));\n  --mds-button-color: rgb(var(--variant-secondary-01));\n  --mds-button-border-width: var(--mds-button-border-high-contrast-hover-width);\n\n  fill: rgb(var(--variant-secondary-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="secondary"][tone="weak"][active]) {\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-context(.pref-contrast-more):host([variant="secondary"][tone="ghost"]) {\n  --mds-button-border-color: var(--variant-secondary-03);\n  --mds-button-color: rgb(var(--variant-secondary-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="secondary"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--variant-secondary-03);\n  --mds-button-color: rgb(var(--variant-secondary-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="secondary"][tone="ghost"][active]) {\n  --mds-button-border-color: var(--variant-secondary-04);\n  --mds-button-color: rgb(var(--variant-secondary-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="secondary"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--variant-secondary-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="secondary"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--variant-secondary-03));\n}\n\n:host-context(.pref-contrast-more):host([variant="secondary"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--variant-secondary-01));\n}\n\n@media (prefers-contrast: more) {\n  :host-context(.pref-contrast-system):host([variant="secondary"][tone="strong"]) {\n    --mds-button-background: rgb(var(--variant-secondary-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="secondary"][tone="strong"][active]),\n  :host-context(.pref-contrast-system):host([variant="secondary"][tone="strong"]:hover) {\n    --mds-button-background: rgb(var(--variant-secondary-02));\n    --mds-button-border-color: var(--variant-secondary-02);\n  }\n\n  :host-context(.pref-contrast-system):host([variant="secondary"][tone="weak"]) {\n    --mds-button-background: rgb(var(--variant-secondary-09));\n    --mds-button-color: rgb(var(--variant-secondary-02));\n    --mds-button-border-color: var(--variant-secondary-06);\n    --mds-button-border-width: var(--mds-button-border-high-contrast-width);\n\n    fill: rgb(var(--variant-secondary-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="secondary"][tone="weak"]:hover) {\n    --mds-button-background: rgb(var(--variant-secondary-10));\n    --mds-button-color: rgb(var(--variant-secondary-01));\n    --mds-button-border-width: var(--mds-button-border-high-contrast-hover-width);\n\n    fill: rgb(var(--variant-secondary-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="secondary"][tone="weak"][active]) {\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-context(.pref-contrast-system):host([variant="secondary"][tone="ghost"]) {\n    --mds-button-border-color: var(--variant-secondary-03);\n    --mds-button-color: rgb(var(--variant-secondary-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="secondary"][tone="ghost"]:hover) {\n    --mds-button-border-color: var(--variant-secondary-03);\n    --mds-button-color: rgb(var(--variant-secondary-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="secondary"][tone="ghost"][active]) {\n    --mds-button-border-color: var(--variant-secondary-04);\n    --mds-button-color: rgb(var(--variant-secondary-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="secondary"][tone="quiet"]) {\n    --mds-button-color: rgb(var(--variant-secondary-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="secondary"][tone="quiet"]:hover) {\n    --mds-button-color: rgb(var(--variant-secondary-03));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="secondary"][tone="quiet"][active]) {\n    --mds-button-color: rgb(var(--variant-secondary-01));\n  }\n}\n\n:host([variant="secondary"][tone="strong"]) {\n  --mds-button-background: rgb(var(--variant-secondary-04));\n  --mds-button-border-color: var(--variant-secondary-04);\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host([variant="secondary"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--variant-secondary-03));\n  --mds-button-border-color: var(--variant-secondary-03);\n}\n\n:host([variant="secondary"][tone="weak"]) {\n  --mds-button-background: rgb(var(--variant-secondary-09));\n  --mds-button-border-color: 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  --mds-button-background: rgb(var(--variant-secondary-08));\n  --mds-button-border-color: var(--variant-secondary-08);\n}\n\n:host([variant="secondary"][tone="ghost"]) {\n  --mds-button-border-color: var(--variant-secondary-04);\n  --mds-button-color: rgb(var(--variant-secondary-03));\n}\n\n:host([variant="secondary"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--variant-secondary-04);\n  --mds-button-color: rgb(var(--variant-secondary-02));\n}\n\n:host([variant="secondary"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--variant-secondary-02));\n}\n\n:host([variant="secondary"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--variant-secondary-04));\n}\n\n:host([variant="secondary"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--variant-secondary-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="success"][tone="strong"]) {\n  --mds-button-background: rgb(var(--status-success-03));\n  --mds-button-color: rgb(var(--tone-neutral));\n  --mds-button-border-color: var(--status-success-03);\n}\n\n:host-context(.pref-contrast-more):host([variant="success"][tone="strong"][active]),\n:host-context(.pref-contrast-more):host([variant="success"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--status-success-02));\n  --mds-button-border-color: var(--status-success-02);\n}\n\n:host-context(.pref-contrast-more):host([variant="success"][tone="weak"]) {\n  --mds-button-background: rgb(var(--status-success-09));\n  --mds-button-color: rgb(var(--status-success-02));\n  --mds-button-border-color: var(--status-success-06);\n  --mds-button-border-width: var(--mds-button-border-high-contrast-width);\n\n  fill: rgb(var(--status-success-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="success"][tone="weak"]:hover) {\n  --mds-button-background: rgb(var(--status-success-10));\n  --mds-button-color: rgb(var(--status-success-01));\n  --mds-button-border-width: var(--mds-button-border-high-contrast-hover-width);\n\n  fill: rgb(var(--status-success-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="success"][tone="weak"][active]) {\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-context(.pref-contrast-more):host([variant="success"][tone="ghost"]) {\n  --mds-button-border-color: var(--status-success-03);\n  --mds-button-color: rgb(var(--status-success-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="success"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--status-success-03);\n  --mds-button-color: rgb(var(--status-success-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="success"][tone="ghost"][active]) {\n  --mds-button-border-color: var(--status-success-04);\n  --mds-button-color: rgb(var(--status-success-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="success"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--status-success-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="success"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--status-success-03));\n}\n\n:host-context(.pref-contrast-more):host([variant="success"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--status-success-01));\n}\n\n@media (prefers-contrast: more) {\n  :host-context(.pref-contrast-system):host([variant="success"][tone="strong"]) {\n    --mds-button-background: rgb(var(--status-success-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="success"][tone="strong"][active]),\n  :host-context(.pref-contrast-system):host([variant="success"][tone="strong"]:hover) {\n    --mds-button-background: rgb(var(--status-success-02));\n    --mds-button-border-color: var(--status-success-02);\n  }\n\n  :host-context(.pref-contrast-system):host([variant="success"][tone="weak"]) {\n    --mds-button-background: rgb(var(--status-success-09));\n    --mds-button-color: rgb(var(--status-success-02));\n    --mds-button-border-color: var(--status-success-06);\n    --mds-button-border-width: var(--mds-button-border-high-contrast-width);\n\n    fill: rgb(var(--status-success-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="success"][tone="weak"]:hover) {\n    --mds-button-background: rgb(var(--status-success-10));\n    --mds-button-color: rgb(var(--status-success-01));\n    --mds-button-border-width: var(--mds-button-border-high-contrast-hover-width);\n\n    fill: rgb(var(--status-success-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="success"][tone="weak"][active]) {\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-context(.pref-contrast-system):host([variant="success"][tone="ghost"]) {\n    --mds-button-border-color: var(--status-success-03);\n    --mds-button-color: rgb(var(--status-success-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="success"][tone="ghost"]:hover) {\n    --mds-button-border-color: var(--status-success-03);\n    --mds-button-color: rgb(var(--status-success-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="success"][tone="ghost"][active]) {\n    --mds-button-border-color: var(--status-success-04);\n    --mds-button-color: rgb(var(--status-success-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="success"][tone="quiet"]) {\n    --mds-button-color: rgb(var(--status-success-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="success"][tone="quiet"]:hover) {\n    --mds-button-color: rgb(var(--status-success-03));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="success"][tone="quiet"][active]) {\n    --mds-button-color: rgb(var(--status-success-01));\n  }\n}\n\n:host([variant="success"][tone="strong"]) {\n  --mds-button-background: rgb(var(--status-success-05));\n  --mds-button-border-color: var(--status-success-05);\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host([variant="success"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--status-success-04));\n  --mds-button-border-color: var(--status-success-04);\n}\n\n:host([variant="success"][tone="weak"]) {\n  --mds-button-background: rgb(var(--status-success-09));\n  --mds-button-border-color: 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  --mds-button-background: rgb(var(--status-success-08));\n  --mds-button-border-color: var(--status-success-08);\n}\n\n:host([variant="success"][tone="ghost"]) {\n  --mds-button-border-color: var(--status-success-04);\n  --mds-button-color: rgb(var(--status-success-03));\n}\n\n:host([variant="success"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--status-success-04);\n  --mds-button-color: rgb(var(--status-success-02));\n}\n\n:host([variant="success"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--status-success-02));\n}\n\n:host([variant="success"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--status-success-04));\n}\n\n:host([variant="success"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--status-success-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="warning"][tone="strong"]) {\n  --mds-button-background: rgb(var(--status-warning-03));\n  --mds-button-color: rgb(var(--tone-neutral));\n  --mds-button-border-color: var(--status-warning-03);\n}\n\n:host-context(.pref-contrast-more):host([variant="warning"][tone="strong"][active]),\n:host-context(.pref-contrast-more):host([variant="warning"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--status-warning-02));\n  --mds-button-border-color: var(--status-warning-02);\n}\n\n:host-context(.pref-contrast-more):host([variant="warning"][tone="weak"]) {\n  --mds-button-background: rgb(var(--status-warning-09));\n  --mds-button-color: rgb(var(--status-warning-02));\n  --mds-button-border-color: var(--status-warning-06);\n  --mds-button-border-width: var(--mds-button-border-high-contrast-width);\n\n  fill: rgb(var(--status-warning-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="warning"][tone="weak"]:hover) {\n  --mds-button-background: rgb(var(--status-warning-10));\n  --mds-button-color: rgb(var(--status-warning-01));\n  --mds-button-border-width: var(--mds-button-border-high-contrast-hover-width);\n\n  fill: rgb(var(--status-warning-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="warning"][tone="weak"][active]) {\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-context(.pref-contrast-more):host([variant="warning"][tone="ghost"]) {\n  --mds-button-border-color: var(--status-warning-03);\n  --mds-button-color: rgb(var(--status-warning-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="warning"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--status-warning-03);\n  --mds-button-color: rgb(var(--status-warning-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="warning"][tone="ghost"][active]) {\n  --mds-button-border-color: var(--status-warning-04);\n  --mds-button-color: rgb(var(--status-warning-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="warning"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--status-warning-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="warning"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--status-warning-03));\n}\n\n:host-context(.pref-contrast-more):host([variant="warning"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--status-warning-01));\n}\n\n@media (prefers-contrast: more) {\n  :host-context(.pref-contrast-system):host([variant="warning"][tone="strong"]) {\n    --mds-button-background: rgb(var(--status-warning-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="warning"][tone="strong"][active]),\n  :host-context(.pref-contrast-system):host([variant="warning"][tone="strong"]:hover) {\n    --mds-button-background: rgb(var(--status-warning-02));\n    --mds-button-border-color: var(--status-warning-02);\n  }\n\n  :host-context(.pref-contrast-system):host([variant="warning"][tone="weak"]) {\n    --mds-button-background: rgb(var(--status-warning-09));\n    --mds-button-color: rgb(var(--status-warning-02));\n    --mds-button-border-color: var(--status-warning-06);\n    --mds-button-border-width: var(--mds-button-border-high-contrast-width);\n\n    fill: rgb(var(--status-warning-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="warning"][tone="weak"]:hover) {\n    --mds-button-background: rgb(var(--status-warning-10));\n    --mds-button-color: rgb(var(--status-warning-01));\n    --mds-button-border-width: var(--mds-button-border-high-contrast-hover-width);\n\n    fill: rgb(var(--status-warning-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="warning"][tone="weak"][active]) {\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-context(.pref-contrast-system):host([variant="warning"][tone="ghost"]) {\n    --mds-button-border-color: var(--status-warning-03);\n    --mds-button-color: rgb(var(--status-warning-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="warning"][tone="ghost"]:hover) {\n    --mds-button-border-color: var(--status-warning-03);\n    --mds-button-color: rgb(var(--status-warning-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="warning"][tone="ghost"][active]) {\n    --mds-button-border-color: var(--status-warning-04);\n    --mds-button-color: rgb(var(--status-warning-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="warning"][tone="quiet"]) {\n    --mds-button-color: rgb(var(--status-warning-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="warning"][tone="quiet"]:hover) {\n    --mds-button-color: rgb(var(--status-warning-03));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="warning"][tone="quiet"][active]) {\n    --mds-button-color: rgb(var(--status-warning-01));\n  }\n}\n\n:host([variant="warning"][tone="strong"]) {\n  --mds-button-background: rgb(var(--status-warning-05));\n  --mds-button-border-color: var(--status-warning-05);\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host([variant="warning"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--status-warning-04));\n  --mds-button-border-color: var(--status-warning-04);\n}\n\n:host([variant="warning"][tone="weak"]) {\n  --mds-button-background: rgb(var(--status-warning-09));\n  --mds-button-border-color: 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  --mds-button-background: rgb(var(--status-warning-08));\n  --mds-button-border-color: var(--status-warning-08);\n}\n\n:host([variant="warning"][tone="ghost"]) {\n  --mds-button-border-color: var(--status-warning-04);\n  --mds-button-color: rgb(var(--status-warning-03));\n}\n\n:host([variant="warning"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--status-warning-04);\n  --mds-button-color: rgb(var(--status-warning-02));\n}\n\n:host([variant="warning"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--status-warning-02));\n}\n\n:host([variant="warning"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--status-warning-04));\n}\n\n:host([variant="warning"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--status-warning-01));\n}\n\n:host([tone="quiet"]),\n:host([tone="quiet"]:hover),\n:host([tone="ghost"]) {\n  --mds-button-background: transparent;\n}\n\n:host([tone="strong"]),\n:host([tone="weak"]) {\n  --mds-button-border-default-opacity: 1;\n  --mds-button-border-width: 0;\n}\n\n:host([tone="strong"]),\n:host([tone="weak"]),\n:host([tone="ghost"]) {\n  --mds-button-border-opacity: var(--mds-button-border-default-opacity);\n}\n\n:host([tone="strong"]:hover),\n:host([tone="strong"][active]) {\n  --mds-button-border-width: var(--mds-button-border-tone-strong-hover-width);\n}\n\n:host([tone="weak"]:hover),\n:host([tone="weak"][active]) {\n  --mds-button-border-width: var(--mds-button-border-tone-weak-hover-width);\n}\n\n:host([tone="ghost"]:hover),\n:host([tone="ghost"][active]) {\n  --mds-button-background: transparent;\n  --mds-button-border-width: var(--mds-button-border-tone-ghost-hover-width);\n  --mds-button-border-opacity: var(--mds-button-border-hover-opacity);\n}\n\n:host([variant="google"]),\n:host([variant="google"][tone]) {\n  --mds-button-background: rgb(var(--tone-neutral));\n  --mds-button-border-hover-opacity: 0.5;\n  --mds-button-border-hover-width: 0.125rem;\n  --mds-button-border-opacity: 0.2;\n  --mds-button-border-width: 0.0625rem;\n  --mds-button-color: rgb(var(--tone-neutral-03));\n  --mds-button-border-color: var(--tone-neutral-01);\n\n  -webkit-box-shadow: 0 0 0 var(--mds-button-border-width) rgb(var(--mds-button-border-color) / var(--mds-button-border-opacity));\n\n  box-shadow: 0 0 0 var(--mds-button-border-width) rgb(var(--mds-button-border-color) / var(--mds-button-border-opacity));\n}\n\n:host([variant="google"]:hover),\n:host([variant="google"][tone]:hover) {\n  --mds-button-border-width: var(--mds-button-border-hover-width);\n  --mds-button-border-opacity: var(--mds-button-border-hover-opacity);\n}\n\n:host([variant="apple"]),\n:host([variant="apple"][tone]) {\n  --mds-button-background: rgb(var(--tone-neutral-02));\n  --mds-button-color: rgb(var(--tone-neutral));\n  --mds-button-border-width: 0;\n}\n\n:host-context(.pref-theme-dark):host([variant="google"]),\n:host-context(.pref-theme-dark):host([variant="google"][tone]) {\n  --mds-button-border-width: 0.125rem;\n  --mds-button-border-opacity: 0.3;\n}\n\n:host-context(.pref-theme-dark):host([variant="google"]:hover),\n:host-context(.pref-theme-dark):host([variant="google"][tone]:hover) {\n  --mds-button-border-opacity: 0.5;\n}\n\n:host-context(.pref-theme-dark):host([variant="apple"]),\n:host-context(.pref-theme-dark):host([variant="apple"][tone]) {\n  --mds-button-background: rgb(var(--tone-neutral-01));\n}\n\n@media (prefers-color-scheme: dark) {\n  :host-context(.pref-theme-system):host([variant="apple"]),\n  :host-context(.pref-theme-system):host([variant="apple"][tone]) {\n    --mds-button-background: rgb(var(--tone-neutral-01));\n  }\n\n  :host-context(.pref-theme-system):host([variant="google"]),\n  :host-context(.pref-theme-system):host([variant="google"][tone]) {\n    --mds-button-border-width: 0.125rem;\n    --mds-button-border-opacity: 0.3;\n  }\n\n  :host-context(.pref-theme-system):host([variant="google"]:hover),\n  :host-context(.pref-theme-system):host([variant="google"][tone]:hover) {\n    --mds-button-border-opacity: 0.5;\n  }\n}\n\n:host-context(.pref-animation-reduce),\n:host-context(.pref-animation-reduce) .await,\n:host-context(.pref-animation-reduce) .icon {\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n}\n\n@media (prefers-reduced-motion) {\n  :host-context(.pref-animation-system),\n  :host-context(.pref-animation-system) .await,\n  :host-context(.pref-animation-system) .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n';class l{resolveIconName(t){return this._resolveIconName(t,this.name,this.path)}constructor(t,n,r){this.name=t,this.path=n,this._resolveIconName=r}get resolver(){return this._resolveIconName}}const y=new class{constructor(){this._svgPathKey="mdsIconSvgPath",this._iconsSets=new Map,this._svgPathUpdate="mdsIconSvgPathUpdate",this.cacheExp=864e5,this.listeners=[],this.memoryCache={},this.isCacheAvailable=async t=>{try{const n=await function(t){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:v())("readonly",(function(n){return m(n.get(t))}))}(`loader_${t}`);if(!n)return!1;const r=JSON.parse(n);return Date.now()<r.expiry?r.data:(function(t){(arguments.length>1&&void 0!==arguments[1]?arguments[1]:v())("readwrite",(function(n){return n.delete(t),m(n.transaction)}))}(`loader_${t}`),!1)}catch(t){return console.error("isCacheAvailable error",t),!1}},this.setCache=async(t,n)=>{try{await function(t,n){return(arguments.length>2&&void 0!==arguments[2]?arguments[2]:v())("readwrite",(function(r){return r.put(n,t),m(r.transaction)}))}(`loader_${t}`,JSON.stringify({data:n,expiry:Date.now()+this.cacheExp}))}catch(t){console.error("setCache error",t)}},this.setUpListener()}addIconSet(t,n,r){let o=r;const a=this._iconsSets.get(t);if(!o&&a&&"function"==typeof a.resolver)o=a.resolver;else{if(o&&"function"!=typeof o)return console.error("MdsIconSvg: the third input of addIconSet should be a function that parses and returns the icons's filename."),!1;if(!o)return console.error(`MdsIconSvg: the set ${t} needs a resolve function for the icon names.`),!1}return this._iconsSets.set(t,new l(t,n,o)),!0}getIconSet(t){return t?{set:this._iconsSets.get(t.split("/")[0])}:{set:null}}setSvgPath(t){const n=/^(((https?:\/\/)?[.\w]+(:\d+)?)|\/)([\w/-]+)*/.exec(t);if(!n)throw Error(`Svg path not recognize ${t}, ensure is a absolute path starting with '/' or a url`);"undefined"!=typeof window&&(this._svgPath=n[1]?n[0]:window.location.origin.concat(n[0]),window.dispatchEvent(new Event(this._svgPathUpdate)))}getSvgPath(){return this._svgPath}registerListener(t){this.listeners.push(t)}setUpListener(){"undefined"!=typeof window&&window.addEventListener(this._svgPathUpdate,(()=>{for(const t of this.listeners)t()}))}async fetchSvg(t){var n;try{if(!this._svgPath&&"undefined"==typeof window)throw Error("Cant find svgPath, ensure you set it");this._svgPath||this.setSvgPath(null!==(n=window.sessionStorage.getItem(y._svgPathKey))&&void 0!==n?n:"");const r=this._svgPath&&!t.startsWith("http")?this._svgPath.concat(t,".svg"):t,o=await this.isCacheAvailable(r);if(this.memoryCache[r]||o)return this.memoryCache[r]||o;const a=await fetch(r);if(!a.ok)throw Error(`Request for '${r}' returned ${a.status} (${a.statusText})`);const s=await a.text(),e=s.toLowerCase().trim();if(!e.startsWith("<svg")&&!e.startsWith("<?xml"))throw Error(`Resource '${r}' returned an invalid SVG file`);return this.setCache(r,s),this.memoryCache[r]=s,s}catch(t){return console.error("fetchSvg error",t),""}}},g=class{constructor(n){t(this,n),this.convertBase64ToSvg=()=>{const t=this.name.replace(i,"").replace(/\=/i,"");return atob(t)}}componentWillLoad(){this.updateIcon(),y.registerListener((()=>this.updateIcon()))}static setSvgPathStatic(t){y.setSvgPath(t)}async setSvgPath(t){y.setSvgPath(t)}async updateIcon(){return this.name?h(this.name)?(this.svgHTML=this.convertBase64ToSvg(),Promise.resolve()):c(this.name)?(this.svgHTML=this.name,Promise.resolve()):void(this.svgHTML=await y.fetchSvg(this.name)):Promise.resolve()}render(){return n(r,{key:"b64516e083273f19955d483ace9a7bf2b8c25903"},this.svgHTML&&n("i",{key:"e9e61853cb3895c0e291f39358d9ab545cb3cfa6","aria-hidden":"true",class:"icon",part:"svg",innerHTML:this.svgHTML}))}get hostElement(){return o(this)}static get watchers(){return{name:["updateIcon"]}}};g.style=":host{aspect-ratio:1/1;width:1.5rem;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center}.icon{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;font-style:normal;-ms-flex-pack:center;justify-content:center;width:100%}.icon svg{height:auto;width:100%}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}";const p=class{constructor(n){t(this,n),this.running=!1}handleRunning(t){!1===t&&(this.running=void 0)}render(){return n(r,{key:"26cc04164b95792fbabf4248eceff7b630d14171"},n("i",{key:"15a3883a3c6777b5475974269e1a946a955b315a",class:"await-icon",innerHTML:'<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path opacity="0.25" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="4"/>\n  <path opacity="0.75" d="M10 2.2002C5.43552 3.12674 2 7.16224 2 12.0002C2 13.5118 2.3354 14.9451 2.93585 16.2297" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>\n</svg>\n'}))}static get watchers(){return{running:["handleRunning"]}}};p.style=":host{--mds-spinner-duration:0.725s;height:3rem;width:3rem;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);-ms-flex-align:center;align-items:center;color:rgb(var(--variant-primary-03));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;opacity:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:opacity, transform;transition-property:opacity, transform, -webkit-transform}:host([running]){-webkit-transition-duration:700ms;transition-duration:700ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);opacity:1;-webkit-transform:scale(1);transform:scale(1)}.await-icon{aspect-ratio:1/1;width:100%}@-webkit-keyframes spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.await-icon{-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);-webkit-animation-duration:var(--mds-spinner-duration);animation-duration:var(--mds-spinner-duration);-webkit-animation-play-state:paused;animation-play-state:paused;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;stroke:currentcolor;-webkit-transition-property:stroke;transition-property:stroke}.await-icon svg{width:100%}:host([running]) .await-icon{-webkit-animation-play-state:running;animation-play-state:running}:host-context(.pref-animation-reduce){--mds-spinner-duration:8s}@media (prefers-reduced-motion){:host-context(.pref-animation-system){--mds-spinner-duration:8s}}:host-context(.pref-contrast-more){color:rgb(var(--variant-primary-01))}@media (prefers-contrast: more){:host-context(.pref-contrast-system){color:rgb(var(--variant-primary-01))}}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}";export{b as mds_button,g as mds_icon,p as mds_spinner}
+import{r as t,h as n,H as r,g as o}from"./p-3a6b32e7.js";import{K as a}from"./p-23e7e277.js";import{u as s,s as e}from"./p-f00c93f4.js";const d={sm:"action",md:"action",lg:"h6",xl:"h4"},i="data:image/svg+xml;base64,",h=t=>!!t&&t.startsWith(i),c=t=>!!t&&t.startsWith("<svg "),b=class{constructor(n){t(this,n),n.$hostElement$["s-ei"]?this.internals=n.$hostElement$["s-ei"]:(this.internals=n.$hostElement$.attachInternals(),n.$hostElement$["s-ei"]=this.internals),this.km=new a,this.iconPosition="left",this.type="submit",this.variant="primary",this.tone="strong",this.size="md",this.target="self",this.truncate="word",this.handleRequestSubmitForm=t=>{var n;t.preventDefault(),null===(n=this.internals.form)||void 0===n||n.requestSubmit()},this.handleReset=t=>{var n;t.preventDefault(),null===(n=this.internals.form)||void 0===n||n.reset()},this.mouseDown=()=>{this.active=!0},this.mouseUp=()=>{this.active=!1},this.redirectBlank=()=>{if("undefined"==typeof window)throw Error("Object window is not defined");window.open(this.href,"_blank")},this.onSlotChangeHandler=()=>{this.hasText=""!==this.host.innerHTML.trim()||this.host.children.length>0}}disabledChanged(t){t?this.km.attachClickBehavior():(this.km.detachClickBehavior(),this.disabled=void 0)}awaitChanged(t){this.host.setAttribute("aria-busy",(!!t).toString()),t?this.km.attachClickBehavior():this.km.detachClickBehavior()}handleTypeChange(t){this.internals.form&&("submit"===t?(this.host.removeEventListener("click",this.handleReset),this.host.addEventListener("click",this.handleRequestSubmitForm)):"reset"===t?(this.host.removeEventListener("click",this.handleRequestSubmitForm),this.host.addEventListener("click",this.handleReset)):(this.host.removeEventListener("click",this.handleRequestSubmitForm),this.host.removeEventListener("click",this.handleReset)))}handleVariantChange(t){"google"!==t?"apple"!==t||(this.icon='<svg xmlns="http://www.w3.org/2000/svg" id="mdi-apple" viewBox="0 0 24 24"><path d="M18.71,19.5C17.88,20.74 17,21.95 15.66,21.97C14.32,22 13.89,21.18 12.37,21.18C10.84,21.18 10.37,21.95 9.1,22C7.79,22.05 6.8,20.68 5.96,19.47C4.25,17 2.94,12.45 4.7,9.39C5.57,7.87 7.13,6.91 8.82,6.88C10.1,6.86 11.32,7.75 12.11,7.75C12.89,7.75 14.37,6.68 15.92,6.84C16.57,6.87 18.39,7.1 19.56,8.82C19.47,8.88 17.39,10.1 17.41,12.63C17.44,15.65 20.06,16.66 20.09,16.67C20.06,16.74 19.67,18.11 18.71,19.5M13,3.5C13.73,2.67 14.94,2.04 15.94,2C16.07,3.17 15.6,4.35 14.9,5.19C14.21,6.04 13.07,6.7 11.95,6.61C11.8,5.46 12.36,4.26 13,3.5Z" /></svg>'):this.icon='<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" xmlnsXlink="http://www.w3.org/1999/xlink"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path><path fill="none" d="M0 0h48v48H0z"></path></svg>\n'}componentWillLoad(){this.hasNotification=null!==this.host.querySelector(':scope > [slot="notification"]'),this.hasText=""!==this.host.innerHTML.trim()||this.host.children.length>0,this.handleVariantChange(this.variant),this.href?this.host.addEventListener("click",(t=>{var n;t.preventDefault(),"blank"!==this.target?"undefined"!=typeof window&&(window.location.href=null!==(n=this.href)&&void 0!==n?n:""):this.redirectBlank()})):this.internals.form&&("submit"===this.type?this.host.addEventListener("click",this.handleRequestSubmitForm):"reset"===this.type&&this.host.addEventListener("click",this.handleReset))}componentDidLoad(){if(this.km.addElement(this.host),this.await||this.km.attachClickBehavior(),this.host.setAttribute("aria-busy",this.await?"true":"false"),this.autoFocus&&this.host.focus(),!h(this.icon)&&!c(this.icon)){if(!this.hasText&&this.icon){const t=s(this.icon);this.host.hasAttribute("aria-label")||e(this.host,"title",t),this.host.hasAttribute("title")||e(this.host,"aria-label",t)}e(this.host,"role","button")}}handleAwaitChange(t){if(!1===t)return this.await=void 0,void this.km.detachClickBehavior();this.km.attachClickBehavior()}connectedCallback(){this.disabled||this.host.removeAttribute("disabled")}disconnectedCallback(){this.km.detachClickBehavior()}render(){return this.typography=d[this.size],n(r,{key:"4686bd8d7cb9225f100a4127b6a126377b518d19",onMouseDown:this.mouseDown,onMouseUp:this.mouseUp,onMouseOut:this.mouseUp,tabindex:"0"},n("div",{key:"df39bb0ebb2a804af20924648169709397af2c7e",class:"await"},n("mds-spinner",{key:"2815525a17ea474db3f4064a3bbdf6e953211b13",class:"spinner",running:this.await})),this.icon&&"left"===this.iconPosition&&n("mds-icon",{key:"f464e79898cfa4f68d05fefcb454c26e6088cfaf","aria-hidden":"true",class:"icon",name:this.icon,part:"icon"}),n("mds-text",{key:"0f30b6ca2508f8928f4fc28c6deb28e93e963db5",class:"text",part:"label",typography:this.typography,truncate:this.truncate},n("slot",{key:"1d5d0ae7bcdf9abbc87ddbb4bea702971b618e9d",onSlotchange:this.onSlotChangeHandler})),this.hasNotification&&n("slot",{key:"0d9dca292a5cb40f51e4c517a399e85286047fc4",name:"notification"}),this.icon&&"right"===this.iconPosition&&n("mds-icon",{key:"f97aff53f85a69e3bd51517fb66f781123c37373","aria-hidden":"true",class:"icon",name:this.icon,part:"icon"}))}static get formAssociated(){return!0}get host(){return o(this)}static get watchers(){return{disabled:["disabledChanged"],await:["awaitChanged","handleAwaitChange"],type:["handleTypeChange"],variant:["handleVariantChange"]}}};function m(t){return new Promise((function(n,r){t.oncomplete=t.onsuccess=function(){return n(t.result)},t.onabort=t.onerror=function(){return r(t.error)}}))}var u;function v(){return u||(u=function(t,n){var r=indexedDB.open("keyval-store");r.onupgradeneeded=function(){return r.result.createObjectStore(n)};var o=m(r);return function(t,r){return o.then((function(o){return r(o.transaction(n,t).objectStore(n))}))}}(0,"keyval")),u}b.style='@-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\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 color of the border of the component (based on box-shadow declaration)\n * @prop --mds-button-border-default-opacity: Sets the default opacity of the border color of the component (based on box-shadow declaration)\n * @prop --mds-button-border-high-contrast-hover-width: Sets the width of the border when the component is hovered and the contrast is high (based on box-shadow declaration)\n * @prop --mds-button-border-high-contrast-width: Sets the width of the border of the component and the contrast is high (based on box-shadow declaration)\n * @prop --mds-button-border-hover-opacity: Sets the opacity of the border color when the component is hovered (based on box-shadow declaration)\n * @prop --mds-button-border-opacity: Sets the border opacity of the component (based on box-shadow declaration)\n * @prop --mds-button-border-tone-ghost-hover-width: Sets the width of the border when the component is hovered when the tone is set to `ghost` (based on box-shadow declaration)\n * @prop --mds-button-border-tone-strong-hover-width: Sets the width of the border when the component is hovered when the tone is set to `strong` (based on box-shadow declaration)\n * @prop --mds-button-border-tone-weak-hover-width: Sets the width of the border when the component is hovered when the tone is set to `weak` (based on box-shadow declaration)\n * @prop --mds-button-border-width: Sets the border width of the component (based on box-shadow declaration)\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  --mds-button-await-duration: 0.725s;\n  --mds-button-background: rgb(var(--variant-primary-02));\n  --mds-button-border-color: 0 0 0;\n  --mds-button-border-hover-opacity: 0.75;\n  --mds-button-border-default-opacity: 0.5;\n  --mds-button-border-tone-strong-hover-width: 0.0625rem;\n  --mds-button-border-tone-ghost-hover-width: 3px;\n  --mds-button-border-tone-weak-hover-width: 0.0625rem;\n  --mds-button-border-high-contrast-width: 0.125rem;\n  --mds-button-border-high-contrast-hover-width: 3px;\n  --mds-button-border-opacity: 0;\n  --mds-button-border-width: 0.125rem;\n  --mds-button-color: rgb(var(--tone-neutral));\n  --mds-button-gap: 0.5rem;\n  --mds-button-line-clamp: 1;\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    --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: 0.75rem;\n  padding-right: 0.75rem;\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-radius: var(--mds-button-radius);\n  -webkit-box-shadow: 0 0 0 var(--mds-button-border-width) rgb(var(--mds-button-border-color) / var(--mds-button-border-opacity));\n  box-shadow: 0 0 0 var(--mds-button-border-width) rgb(var(--mds-button-border-color) / var(--mds-button-border-opacity));\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, padding-left, padding-right, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, color, outline, outline-offset, padding-left, padding-right, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, box-shadow, color, outline, outline-offset, padding-left, padding-right, transform;\n  transition-property: background-color, border-color, box-shadow, color, outline, outline-offset, padding-left, padding-right, transform, -webkit-box-shadow, -webkit-transform;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n:host(:focus-visible) {\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  --mds-text-line-clamp: var(--mds-button-line-clamp);\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-context(mds-button-group):host(:not(:first-child)) {\n  border-bottom-left-radius: 0;\n  border-top-left-radius: 0;\n}\n\n:host-context(mds-button-group):host(:not(:last-child)) {\n  border-bottom-right-radius: 0;\n  border-top-right-radius: 0;\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:host([disabled]:not([disabled="false"])) {\n  opacity: 0.5;\n\n  pointer-events: none;\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([size="sm"]:not([has-text])) {\n  padding: 0rem;\n}\n\n:host([size="sm"]) .text {\n  font-weight: 500;\n}\n\n:host([size="sm"]) .icon {\n  height: 1rem;\n  width: 1rem;\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([size="md"]:not([has-text])) {\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: 3rem;\n  min-width: 3rem;\n}\n\n:host([size="lg"]:not([has-text])) {\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([size="xl"]:not([has-text])) {\n  padding: 0.5rem;\n}\n\n:host(:not([has-text])) .text {\n  display: none;\n}\n\n:host([variant="dark"][tone="strong"]) {\n  --mds-button-background: rgb(var(--tone-neutral-04));\n  --mds-button-border-color: var(--tone-neutral-04);\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host([variant="dark"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--tone-neutral-05));\n  --mds-button-border-color: var(--tone-neutral-05);\n}\n\n:host([variant="dark"][tone="weak"]) {\n  --mds-button-background: rgb(var(--tone-neutral-08));\n  --mds-button-border-color: var(--tone-neutral-08);\n  --mds-button-color: rgb(var(--tone-neutral-03));\n\n  fill: rgb(var(--tone-neutral-03));\n}\n\n:host([variant="dark"][tone="weak"]:hover) {\n  --mds-button-background: rgb(var(--tone-neutral-07));\n  --mds-button-border-color: var(--tone-neutral-07);\n  --mds-button-color: rgb(var(--tone-neutral-02));\n}\n\n:host([variant="dark"][tone="ghost"]) {\n  --mds-button-border-color: var(--tone-neutral-04);\n  --mds-button-color: rgb(var(--tone-neutral-03));\n}\n\n:host([variant="dark"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--tone-neutral-04);\n  --mds-button-color: rgb(var(--tone-neutral-02));\n}\n\n:host([variant="dark"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--tone-neutral-02));\n}\n\n:host([variant="dark"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--tone-neutral-04));\n}\n\n:host([variant="dark"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--tone-neutral-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="ai"][tone="strong"]) {\n  --mds-button-background: rgb(var(--variant-ai-03));\n  --mds-button-color: rgb(var(--tone-neutral));\n  --mds-button-border-color: var(--variant-ai-03);\n}\n\n:host-context(.pref-contrast-more):host([variant="ai"][tone="strong"][active]),\n:host-context(.pref-contrast-more):host([variant="ai"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--variant-ai-02));\n  --mds-button-border-color: var(--variant-ai-02);\n}\n\n:host-context(.pref-contrast-more):host([variant="ai"][tone="weak"]) {\n  --mds-button-background: rgb(var(--variant-ai-09));\n  --mds-button-color: rgb(var(--variant-ai-02));\n  --mds-button-border-color: var(--variant-ai-06);\n  --mds-button-border-width: var(--mds-button-border-high-contrast-width);\n\n  fill: rgb(var(--variant-ai-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="ai"][tone="weak"]:hover) {\n  --mds-button-background: rgb(var(--variant-ai-10));\n  --mds-button-color: rgb(var(--variant-ai-01));\n  --mds-button-border-width: var(--mds-button-border-high-contrast-hover-width);\n\n  fill: rgb(var(--variant-ai-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="ai"][tone="weak"][active]) {\n  --mds-button-background: rgb(var(--variant-ai-08));\n  --mds-button-color: rgb(var(--variant-ai-01));\n\n  fill: rgb(var(--variant-ai-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="ai"][tone="ghost"]) {\n  --mds-button-border-color: var(--variant-ai-03);\n  --mds-button-color: rgb(var(--variant-ai-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="ai"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--variant-ai-03);\n  --mds-button-color: rgb(var(--variant-ai-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="ai"][tone="ghost"][active]) {\n  --mds-button-border-color: var(--variant-ai-04);\n  --mds-button-color: rgb(var(--variant-ai-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="ai"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--variant-ai-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="ai"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--variant-ai-03));\n}\n\n:host-context(.pref-contrast-more):host([variant="ai"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--variant-ai-01));\n}\n\n@media (prefers-contrast: more) {\n  :host-context(.pref-contrast-system):host([variant="ai"][tone="strong"]) {\n    --mds-button-background: rgb(var(--variant-ai-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="ai"][tone="strong"][active]),\n  :host-context(.pref-contrast-system):host([variant="ai"][tone="strong"]:hover) {\n    --mds-button-background: rgb(var(--variant-ai-02));\n    --mds-button-border-color: var(--variant-ai-02);\n  }\n\n  :host-context(.pref-contrast-system):host([variant="ai"][tone="weak"]) {\n    --mds-button-background: rgb(var(--variant-ai-09));\n    --mds-button-color: rgb(var(--variant-ai-02));\n    --mds-button-border-color: var(--variant-ai-06);\n    --mds-button-border-width: var(--mds-button-border-high-contrast-width);\n\n    fill: rgb(var(--variant-ai-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="ai"][tone="weak"]:hover) {\n    --mds-button-background: rgb(var(--variant-ai-10));\n    --mds-button-color: rgb(var(--variant-ai-01));\n    --mds-button-border-width: var(--mds-button-border-high-contrast-hover-width);\n\n    fill: rgb(var(--variant-ai-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="ai"][tone="weak"][active]) {\n    --mds-button-background: rgb(var(--variant-ai-08));\n    --mds-button-color: rgb(var(--variant-ai-01));\n\n    fill: rgb(var(--variant-ai-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="ai"][tone="ghost"]) {\n    --mds-button-border-color: var(--variant-ai-03);\n    --mds-button-color: rgb(var(--variant-ai-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="ai"][tone="ghost"]:hover) {\n    --mds-button-border-color: var(--variant-ai-03);\n    --mds-button-color: rgb(var(--variant-ai-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="ai"][tone="ghost"][active]) {\n    --mds-button-border-color: var(--variant-ai-04);\n    --mds-button-color: rgb(var(--variant-ai-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="ai"][tone="quiet"]) {\n    --mds-button-color: rgb(var(--variant-ai-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="ai"][tone="quiet"]:hover) {\n    --mds-button-color: rgb(var(--variant-ai-03));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="ai"][tone="quiet"][active]) {\n    --mds-button-color: rgb(var(--variant-ai-01));\n  }\n}\n\n:host([variant="ai"][tone="strong"]) {\n  --mds-button-background: rgb(var(--variant-ai-05));\n  --mds-button-border-color: var(--variant-ai-05);\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host([variant="ai"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--variant-ai-04));\n  --mds-button-border-color: var(--variant-ai-04);\n}\n\n:host([variant="ai"][tone="weak"]) {\n  --mds-button-background: rgb(var(--variant-ai-09));\n  --mds-button-border-color: var(--variant-ai-09);\n  --mds-button-color: rgb(var(--variant-ai-03));\n\n  fill: rgb(var(--variant-ai-03));\n}\n\n:host([variant="ai"][tone="weak"]:hover) {\n  --mds-button-background: rgb(var(--variant-ai-08));\n  --mds-button-border-color: var(--variant-ai-08);\n}\n\n:host([variant="ai"][tone="ghost"]) {\n  --mds-button-border-color: var(--variant-ai-04);\n  --mds-button-color: rgb(var(--variant-ai-03));\n}\n\n:host([variant="ai"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--variant-ai-04);\n  --mds-button-color: rgb(var(--variant-ai-02));\n}\n\n:host([variant="ai"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--variant-ai-02));\n}\n\n:host([variant="ai"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--variant-ai-04));\n}\n\n:host([variant="ai"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--variant-ai-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="error"][tone="strong"]) {\n  --mds-button-background: rgb(var(--status-error-03));\n  --mds-button-color: rgb(var(--tone-neutral));\n  --mds-button-border-color: var(--status-error-03);\n}\n\n:host-context(.pref-contrast-more):host([variant="error"][tone="strong"][active]),\n:host-context(.pref-contrast-more):host([variant="error"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--status-error-02));\n  --mds-button-border-color: var(--status-error-02);\n}\n\n:host-context(.pref-contrast-more):host([variant="error"][tone="weak"]) {\n  --mds-button-background: rgb(var(--status-error-09));\n  --mds-button-color: rgb(var(--status-error-02));\n  --mds-button-border-color: var(--status-error-06);\n  --mds-button-border-width: var(--mds-button-border-high-contrast-width);\n\n  fill: rgb(var(--status-error-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="error"][tone="weak"]:hover) {\n  --mds-button-background: rgb(var(--status-error-10));\n  --mds-button-color: rgb(var(--status-error-01));\n  --mds-button-border-width: var(--mds-button-border-high-contrast-hover-width);\n\n  fill: rgb(var(--status-error-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="error"][tone="weak"][active]) {\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-context(.pref-contrast-more):host([variant="error"][tone="ghost"]) {\n  --mds-button-border-color: var(--status-error-03);\n  --mds-button-color: rgb(var(--status-error-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="error"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--status-error-03);\n  --mds-button-color: rgb(var(--status-error-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="error"][tone="ghost"][active]) {\n  --mds-button-border-color: var(--status-error-04);\n  --mds-button-color: rgb(var(--status-error-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="error"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--status-error-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="error"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--status-error-03));\n}\n\n:host-context(.pref-contrast-more):host([variant="error"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--status-error-01));\n}\n\n@media (prefers-contrast: more) {\n  :host-context(.pref-contrast-system):host([variant="error"][tone="strong"]) {\n    --mds-button-background: rgb(var(--status-error-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="error"][tone="strong"][active]),\n  :host-context(.pref-contrast-system):host([variant="error"][tone="strong"]:hover) {\n    --mds-button-background: rgb(var(--status-error-02));\n    --mds-button-border-color: var(--status-error-02);\n  }\n\n  :host-context(.pref-contrast-system):host([variant="error"][tone="weak"]) {\n    --mds-button-background: rgb(var(--status-error-09));\n    --mds-button-color: rgb(var(--status-error-02));\n    --mds-button-border-color: var(--status-error-06);\n    --mds-button-border-width: var(--mds-button-border-high-contrast-width);\n\n    fill: rgb(var(--status-error-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="error"][tone="weak"]:hover) {\n    --mds-button-background: rgb(var(--status-error-10));\n    --mds-button-color: rgb(var(--status-error-01));\n    --mds-button-border-width: var(--mds-button-border-high-contrast-hover-width);\n\n    fill: rgb(var(--status-error-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="error"][tone="weak"][active]) {\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-context(.pref-contrast-system):host([variant="error"][tone="ghost"]) {\n    --mds-button-border-color: var(--status-error-03);\n    --mds-button-color: rgb(var(--status-error-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="error"][tone="ghost"]:hover) {\n    --mds-button-border-color: var(--status-error-03);\n    --mds-button-color: rgb(var(--status-error-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="error"][tone="ghost"][active]) {\n    --mds-button-border-color: var(--status-error-04);\n    --mds-button-color: rgb(var(--status-error-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="error"][tone="quiet"]) {\n    --mds-button-color: rgb(var(--status-error-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="error"][tone="quiet"]:hover) {\n    --mds-button-color: rgb(var(--status-error-03));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="error"][tone="quiet"][active]) {\n    --mds-button-color: rgb(var(--status-error-01));\n  }\n}\n\n:host([variant="error"][tone="strong"]) {\n  --mds-button-background: rgb(var(--status-error-05));\n  --mds-button-border-color: var(--status-error-05);\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host([variant="error"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--status-error-04));\n  --mds-button-border-color: var(--status-error-04);\n}\n\n:host([variant="error"][tone="weak"]) {\n  --mds-button-background: rgb(var(--status-error-09));\n  --mds-button-border-color: 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  --mds-button-background: rgb(var(--status-error-08));\n  --mds-button-border-color: var(--status-error-08);\n}\n\n:host([variant="error"][tone="ghost"]) {\n  --mds-button-border-color: var(--status-error-04);\n  --mds-button-color: rgb(var(--status-error-03));\n}\n\n:host([variant="error"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--status-error-04);\n  --mds-button-color: rgb(var(--status-error-02));\n}\n\n:host([variant="error"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--status-error-02));\n}\n\n:host([variant="error"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--status-error-04));\n}\n\n:host([variant="error"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--status-error-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="info"][tone="strong"]) {\n  --mds-button-background: rgb(var(--status-info-03));\n  --mds-button-color: rgb(var(--tone-neutral));\n  --mds-button-border-color: var(--status-info-03);\n}\n\n:host-context(.pref-contrast-more):host([variant="info"][tone="strong"][active]),\n:host-context(.pref-contrast-more):host([variant="info"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--status-info-02));\n  --mds-button-border-color: var(--status-info-02);\n}\n\n:host-context(.pref-contrast-more):host([variant="info"][tone="weak"]) {\n  --mds-button-background: rgb(var(--status-info-09));\n  --mds-button-color: rgb(var(--status-info-02));\n  --mds-button-border-color: var(--status-info-06);\n  --mds-button-border-width: var(--mds-button-border-high-contrast-width);\n\n  fill: rgb(var(--status-info-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="info"][tone="weak"]:hover) {\n  --mds-button-background: rgb(var(--status-info-10));\n  --mds-button-color: rgb(var(--status-info-01));\n  --mds-button-border-width: var(--mds-button-border-high-contrast-hover-width);\n\n  fill: rgb(var(--status-info-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="info"][tone="weak"][active]) {\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-context(.pref-contrast-more):host([variant="info"][tone="ghost"]) {\n  --mds-button-border-color: var(--status-info-03);\n  --mds-button-color: rgb(var(--status-info-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="info"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--status-info-03);\n  --mds-button-color: rgb(var(--status-info-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="info"][tone="ghost"][active]) {\n  --mds-button-border-color: var(--status-info-04);\n  --mds-button-color: rgb(var(--status-info-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="info"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--status-info-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="info"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--status-info-03));\n}\n\n:host-context(.pref-contrast-more):host([variant="info"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--status-info-01));\n}\n\n@media (prefers-contrast: more) {\n  :host-context(.pref-contrast-system):host([variant="info"][tone="strong"]) {\n    --mds-button-background: rgb(var(--status-info-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="info"][tone="strong"][active]),\n  :host-context(.pref-contrast-system):host([variant="info"][tone="strong"]:hover) {\n    --mds-button-background: rgb(var(--status-info-02));\n    --mds-button-border-color: var(--status-info-02);\n  }\n\n  :host-context(.pref-contrast-system):host([variant="info"][tone="weak"]) {\n    --mds-button-background: rgb(var(--status-info-09));\n    --mds-button-color: rgb(var(--status-info-02));\n    --mds-button-border-color: var(--status-info-06);\n    --mds-button-border-width: var(--mds-button-border-high-contrast-width);\n\n    fill: rgb(var(--status-info-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="info"][tone="weak"]:hover) {\n    --mds-button-background: rgb(var(--status-info-10));\n    --mds-button-color: rgb(var(--status-info-01));\n    --mds-button-border-width: var(--mds-button-border-high-contrast-hover-width);\n\n    fill: rgb(var(--status-info-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="info"][tone="weak"][active]) {\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-context(.pref-contrast-system):host([variant="info"][tone="ghost"]) {\n    --mds-button-border-color: var(--status-info-03);\n    --mds-button-color: rgb(var(--status-info-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="info"][tone="ghost"]:hover) {\n    --mds-button-border-color: var(--status-info-03);\n    --mds-button-color: rgb(var(--status-info-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="info"][tone="ghost"][active]) {\n    --mds-button-border-color: var(--status-info-04);\n    --mds-button-color: rgb(var(--status-info-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="info"][tone="quiet"]) {\n    --mds-button-color: rgb(var(--status-info-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="info"][tone="quiet"]:hover) {\n    --mds-button-color: rgb(var(--status-info-03));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="info"][tone="quiet"][active]) {\n    --mds-button-color: rgb(var(--status-info-01));\n  }\n}\n\n:host([variant="info"][tone="strong"]) {\n  --mds-button-background: rgb(var(--status-info-05));\n  --mds-button-border-color: var(--status-info-05);\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host([variant="info"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--status-info-04));\n  --mds-button-border-color: var(--status-info-04);\n}\n\n:host([variant="info"][tone="weak"]) {\n  --mds-button-background: rgb(var(--status-info-09));\n  --mds-button-border-color: 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  --mds-button-background: rgb(var(--status-info-08));\n  --mds-button-border-color: var(--status-info-08);\n}\n\n:host([variant="info"][tone="ghost"]) {\n  --mds-button-border-color: var(--status-info-04);\n  --mds-button-color: rgb(var(--status-info-03));\n}\n\n:host([variant="info"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--status-info-04);\n  --mds-button-color: rgb(var(--status-info-02));\n}\n\n:host([variant="info"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--status-info-02));\n}\n\n:host([variant="info"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--status-info-04));\n}\n\n:host([variant="info"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--status-info-01));\n}\n\n:host([variant="light"][tone="strong"]) {\n  --mds-button-background: rgb(var(--tone-neutral));\n  --mds-button-border-color: var(--tone-neutral);\n  --mds-button-color: rgb(var(--tone-neutral-03));\n}\n\n:host([variant="light"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--tone-neutral));\n  --mds-button-border-color: var(--tone-neutral);\n}\n\n:host([variant="light"][tone="weak"]) {\n  --mds-button-background: rgb(var(--tone-neutral));\n  --mds-button-border-color: var(--tone-neutral);\n  --mds-button-color: rgb(var(--tone-neutral-03));\n\n  fill: rgb(var(--tone-neutral-03));\n}\n\n:host([variant="light"][tone="weak"]:hover) {\n  --mds-button-background: rgb(var(--tone-neutral));\n  --mds-button-border-color: var(--tone-neutral);\n  --mds-button-color: rgb(var(--tone-neutral-02));\n}\n\n:host([variant="light"][tone="ghost"]) {\n  --mds-button-border-color: var(--tone-neutral);\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host([variant="light"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--tone-neutral);\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host([variant="light"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host([variant="light"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host([variant="light"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host-context(.pref-contrast-more):host([variant="primary"][tone="strong"]) {\n  --mds-button-background: rgb(var(--variant-primary-03));\n  --mds-button-color: rgb(var(--tone-neutral));\n  --mds-button-border-color: var(--variant-primary-03);\n}\n\n:host-context(.pref-contrast-more):host([variant="primary"][tone="strong"][active]),\n:host-context(.pref-contrast-more):host([variant="primary"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--variant-primary-02));\n  --mds-button-border-color: var(--variant-primary-02);\n}\n\n:host-context(.pref-contrast-more):host([variant="primary"][tone="weak"]) {\n  --mds-button-background: rgb(var(--variant-primary-09));\n  --mds-button-color: rgb(var(--variant-primary-02));\n  --mds-button-border-color: var(--variant-primary-06);\n  --mds-button-border-width: var(--mds-button-border-high-contrast-width);\n\n  fill: rgb(var(--variant-primary-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="primary"][tone="weak"]:hover) {\n  --mds-button-background: rgb(var(--variant-primary-10));\n  --mds-button-color: rgb(var(--variant-primary-01));\n  --mds-button-border-width: var(--mds-button-border-high-contrast-hover-width);\n\n  fill: rgb(var(--variant-primary-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="primary"][tone="weak"][active]) {\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-context(.pref-contrast-more):host([variant="primary"][tone="ghost"]) {\n  --mds-button-border-color: var(--variant-primary-03);\n  --mds-button-color: rgb(var(--variant-primary-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="primary"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--variant-primary-03);\n  --mds-button-color: rgb(var(--variant-primary-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="primary"][tone="ghost"][active]) {\n  --mds-button-border-color: var(--variant-primary-04);\n  --mds-button-color: rgb(var(--variant-primary-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="primary"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--variant-primary-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="primary"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--variant-primary-03));\n}\n\n:host-context(.pref-contrast-more):host([variant="primary"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--variant-primary-01));\n}\n\n@media (prefers-contrast: more) {\n  :host-context(.pref-contrast-system):host([variant="primary"][tone="strong"]) {\n    --mds-button-background: rgb(var(--variant-primary-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="primary"][tone="strong"][active]),\n  :host-context(.pref-contrast-system):host([variant="primary"][tone="strong"]:hover) {\n    --mds-button-background: rgb(var(--variant-primary-02));\n    --mds-button-border-color: var(--variant-primary-02);\n  }\n\n  :host-context(.pref-contrast-system):host([variant="primary"][tone="weak"]) {\n    --mds-button-background: rgb(var(--variant-primary-09));\n    --mds-button-color: rgb(var(--variant-primary-02));\n    --mds-button-border-color: var(--variant-primary-06);\n    --mds-button-border-width: var(--mds-button-border-high-contrast-width);\n\n    fill: rgb(var(--variant-primary-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="primary"][tone="weak"]:hover) {\n    --mds-button-background: rgb(var(--variant-primary-10));\n    --mds-button-color: rgb(var(--variant-primary-01));\n    --mds-button-border-width: var(--mds-button-border-high-contrast-hover-width);\n\n    fill: rgb(var(--variant-primary-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="primary"][tone="weak"][active]) {\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-context(.pref-contrast-system):host([variant="primary"][tone="ghost"]) {\n    --mds-button-border-color: var(--variant-primary-03);\n    --mds-button-color: rgb(var(--variant-primary-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="primary"][tone="ghost"]:hover) {\n    --mds-button-border-color: var(--variant-primary-03);\n    --mds-button-color: rgb(var(--variant-primary-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="primary"][tone="ghost"][active]) {\n    --mds-button-border-color: var(--variant-primary-04);\n    --mds-button-color: rgb(var(--variant-primary-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="primary"][tone="quiet"]) {\n    --mds-button-color: rgb(var(--variant-primary-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="primary"][tone="quiet"]:hover) {\n    --mds-button-color: rgb(var(--variant-primary-03));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="primary"][tone="quiet"][active]) {\n    --mds-button-color: rgb(var(--variant-primary-01));\n  }\n}\n\n:host([variant="primary"][tone="strong"]) {\n  --mds-button-background: rgb(var(--variant-primary-04));\n  --mds-button-border-color: var(--variant-primary-04);\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host([variant="primary"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--variant-primary-03));\n  --mds-button-border-color: var(--variant-primary-03);\n}\n\n:host([variant="primary"][tone="weak"]) {\n  --mds-button-background: rgb(var(--variant-primary-09));\n  --mds-button-border-color: 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  --mds-button-background: rgb(var(--variant-primary-08));\n  --mds-button-border-color: var(--variant-primary-08);\n}\n\n:host([variant="primary"][tone="ghost"]) {\n  --mds-button-border-color: var(--variant-primary-04);\n  --mds-button-color: rgb(var(--variant-primary-03));\n}\n\n:host([variant="primary"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--variant-primary-04);\n  --mds-button-color: rgb(var(--variant-primary-02));\n}\n\n:host([variant="primary"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--variant-primary-02));\n}\n\n:host([variant="primary"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--variant-primary-04));\n}\n\n:host([variant="primary"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--variant-primary-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="secondary"][tone="strong"]) {\n  --mds-button-background: rgb(var(--variant-secondary-03));\n  --mds-button-color: rgb(var(--tone-neutral));\n  --mds-button-border-color: var(--variant-secondary-03);\n}\n\n:host-context(.pref-contrast-more):host([variant="secondary"][tone="strong"][active]),\n:host-context(.pref-contrast-more):host([variant="secondary"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--variant-secondary-02));\n  --mds-button-border-color: var(--variant-secondary-02);\n}\n\n:host-context(.pref-contrast-more):host([variant="secondary"][tone="weak"]) {\n  --mds-button-background: rgb(var(--variant-secondary-09));\n  --mds-button-color: rgb(var(--variant-secondary-02));\n  --mds-button-border-color: var(--variant-secondary-06);\n  --mds-button-border-width: var(--mds-button-border-high-contrast-width);\n\n  fill: rgb(var(--variant-secondary-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="secondary"][tone="weak"]:hover) {\n  --mds-button-background: rgb(var(--variant-secondary-10));\n  --mds-button-color: rgb(var(--variant-secondary-01));\n  --mds-button-border-width: var(--mds-button-border-high-contrast-hover-width);\n\n  fill: rgb(var(--variant-secondary-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="secondary"][tone="weak"][active]) {\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-context(.pref-contrast-more):host([variant="secondary"][tone="ghost"]) {\n  --mds-button-border-color: var(--variant-secondary-03);\n  --mds-button-color: rgb(var(--variant-secondary-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="secondary"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--variant-secondary-03);\n  --mds-button-color: rgb(var(--variant-secondary-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="secondary"][tone="ghost"][active]) {\n  --mds-button-border-color: var(--variant-secondary-04);\n  --mds-button-color: rgb(var(--variant-secondary-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="secondary"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--variant-secondary-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="secondary"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--variant-secondary-03));\n}\n\n:host-context(.pref-contrast-more):host([variant="secondary"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--variant-secondary-01));\n}\n\n@media (prefers-contrast: more) {\n  :host-context(.pref-contrast-system):host([variant="secondary"][tone="strong"]) {\n    --mds-button-background: rgb(var(--variant-secondary-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="secondary"][tone="strong"][active]),\n  :host-context(.pref-contrast-system):host([variant="secondary"][tone="strong"]:hover) {\n    --mds-button-background: rgb(var(--variant-secondary-02));\n    --mds-button-border-color: var(--variant-secondary-02);\n  }\n\n  :host-context(.pref-contrast-system):host([variant="secondary"][tone="weak"]) {\n    --mds-button-background: rgb(var(--variant-secondary-09));\n    --mds-button-color: rgb(var(--variant-secondary-02));\n    --mds-button-border-color: var(--variant-secondary-06);\n    --mds-button-border-width: var(--mds-button-border-high-contrast-width);\n\n    fill: rgb(var(--variant-secondary-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="secondary"][tone="weak"]:hover) {\n    --mds-button-background: rgb(var(--variant-secondary-10));\n    --mds-button-color: rgb(var(--variant-secondary-01));\n    --mds-button-border-width: var(--mds-button-border-high-contrast-hover-width);\n\n    fill: rgb(var(--variant-secondary-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="secondary"][tone="weak"][active]) {\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-context(.pref-contrast-system):host([variant="secondary"][tone="ghost"]) {\n    --mds-button-border-color: var(--variant-secondary-03);\n    --mds-button-color: rgb(var(--variant-secondary-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="secondary"][tone="ghost"]:hover) {\n    --mds-button-border-color: var(--variant-secondary-03);\n    --mds-button-color: rgb(var(--variant-secondary-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="secondary"][tone="ghost"][active]) {\n    --mds-button-border-color: var(--variant-secondary-04);\n    --mds-button-color: rgb(var(--variant-secondary-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="secondary"][tone="quiet"]) {\n    --mds-button-color: rgb(var(--variant-secondary-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="secondary"][tone="quiet"]:hover) {\n    --mds-button-color: rgb(var(--variant-secondary-03));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="secondary"][tone="quiet"][active]) {\n    --mds-button-color: rgb(var(--variant-secondary-01));\n  }\n}\n\n:host([variant="secondary"][tone="strong"]) {\n  --mds-button-background: rgb(var(--variant-secondary-04));\n  --mds-button-border-color: var(--variant-secondary-04);\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host([variant="secondary"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--variant-secondary-03));\n  --mds-button-border-color: var(--variant-secondary-03);\n}\n\n:host([variant="secondary"][tone="weak"]) {\n  --mds-button-background: rgb(var(--variant-secondary-09));\n  --mds-button-border-color: 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  --mds-button-background: rgb(var(--variant-secondary-08));\n  --mds-button-border-color: var(--variant-secondary-08);\n}\n\n:host([variant="secondary"][tone="ghost"]) {\n  --mds-button-border-color: var(--variant-secondary-04);\n  --mds-button-color: rgb(var(--variant-secondary-03));\n}\n\n:host([variant="secondary"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--variant-secondary-04);\n  --mds-button-color: rgb(var(--variant-secondary-02));\n}\n\n:host([variant="secondary"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--variant-secondary-02));\n}\n\n:host([variant="secondary"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--variant-secondary-04));\n}\n\n:host([variant="secondary"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--variant-secondary-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="success"][tone="strong"]) {\n  --mds-button-background: rgb(var(--status-success-03));\n  --mds-button-color: rgb(var(--tone-neutral));\n  --mds-button-border-color: var(--status-success-03);\n}\n\n:host-context(.pref-contrast-more):host([variant="success"][tone="strong"][active]),\n:host-context(.pref-contrast-more):host([variant="success"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--status-success-02));\n  --mds-button-border-color: var(--status-success-02);\n}\n\n:host-context(.pref-contrast-more):host([variant="success"][tone="weak"]) {\n  --mds-button-background: rgb(var(--status-success-09));\n  --mds-button-color: rgb(var(--status-success-02));\n  --mds-button-border-color: var(--status-success-06);\n  --mds-button-border-width: var(--mds-button-border-high-contrast-width);\n\n  fill: rgb(var(--status-success-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="success"][tone="weak"]:hover) {\n  --mds-button-background: rgb(var(--status-success-10));\n  --mds-button-color: rgb(var(--status-success-01));\n  --mds-button-border-width: var(--mds-button-border-high-contrast-hover-width);\n\n  fill: rgb(var(--status-success-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="success"][tone="weak"][active]) {\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-context(.pref-contrast-more):host([variant="success"][tone="ghost"]) {\n  --mds-button-border-color: var(--status-success-03);\n  --mds-button-color: rgb(var(--status-success-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="success"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--status-success-03);\n  --mds-button-color: rgb(var(--status-success-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="success"][tone="ghost"][active]) {\n  --mds-button-border-color: var(--status-success-04);\n  --mds-button-color: rgb(var(--status-success-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="success"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--status-success-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="success"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--status-success-03));\n}\n\n:host-context(.pref-contrast-more):host([variant="success"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--status-success-01));\n}\n\n@media (prefers-contrast: more) {\n  :host-context(.pref-contrast-system):host([variant="success"][tone="strong"]) {\n    --mds-button-background: rgb(var(--status-success-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="success"][tone="strong"][active]),\n  :host-context(.pref-contrast-system):host([variant="success"][tone="strong"]:hover) {\n    --mds-button-background: rgb(var(--status-success-02));\n    --mds-button-border-color: var(--status-success-02);\n  }\n\n  :host-context(.pref-contrast-system):host([variant="success"][tone="weak"]) {\n    --mds-button-background: rgb(var(--status-success-09));\n    --mds-button-color: rgb(var(--status-success-02));\n    --mds-button-border-color: var(--status-success-06);\n    --mds-button-border-width: var(--mds-button-border-high-contrast-width);\n\n    fill: rgb(var(--status-success-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="success"][tone="weak"]:hover) {\n    --mds-button-background: rgb(var(--status-success-10));\n    --mds-button-color: rgb(var(--status-success-01));\n    --mds-button-border-width: var(--mds-button-border-high-contrast-hover-width);\n\n    fill: rgb(var(--status-success-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="success"][tone="weak"][active]) {\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-context(.pref-contrast-system):host([variant="success"][tone="ghost"]) {\n    --mds-button-border-color: var(--status-success-03);\n    --mds-button-color: rgb(var(--status-success-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="success"][tone="ghost"]:hover) {\n    --mds-button-border-color: var(--status-success-03);\n    --mds-button-color: rgb(var(--status-success-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="success"][tone="ghost"][active]) {\n    --mds-button-border-color: var(--status-success-04);\n    --mds-button-color: rgb(var(--status-success-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="success"][tone="quiet"]) {\n    --mds-button-color: rgb(var(--status-success-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="success"][tone="quiet"]:hover) {\n    --mds-button-color: rgb(var(--status-success-03));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="success"][tone="quiet"][active]) {\n    --mds-button-color: rgb(var(--status-success-01));\n  }\n}\n\n:host([variant="success"][tone="strong"]) {\n  --mds-button-background: rgb(var(--status-success-05));\n  --mds-button-border-color: var(--status-success-05);\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host([variant="success"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--status-success-04));\n  --mds-button-border-color: var(--status-success-04);\n}\n\n:host([variant="success"][tone="weak"]) {\n  --mds-button-background: rgb(var(--status-success-09));\n  --mds-button-border-color: 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  --mds-button-background: rgb(var(--status-success-08));\n  --mds-button-border-color: var(--status-success-08);\n}\n\n:host([variant="success"][tone="ghost"]) {\n  --mds-button-border-color: var(--status-success-04);\n  --mds-button-color: rgb(var(--status-success-03));\n}\n\n:host([variant="success"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--status-success-04);\n  --mds-button-color: rgb(var(--status-success-02));\n}\n\n:host([variant="success"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--status-success-02));\n}\n\n:host([variant="success"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--status-success-04));\n}\n\n:host([variant="success"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--status-success-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="warning"][tone="strong"]) {\n  --mds-button-background: rgb(var(--status-warning-03));\n  --mds-button-color: rgb(var(--tone-neutral));\n  --mds-button-border-color: var(--status-warning-03);\n}\n\n:host-context(.pref-contrast-more):host([variant="warning"][tone="strong"][active]),\n:host-context(.pref-contrast-more):host([variant="warning"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--status-warning-02));\n  --mds-button-border-color: var(--status-warning-02);\n}\n\n:host-context(.pref-contrast-more):host([variant="warning"][tone="weak"]) {\n  --mds-button-background: rgb(var(--status-warning-09));\n  --mds-button-color: rgb(var(--status-warning-02));\n  --mds-button-border-color: var(--status-warning-06);\n  --mds-button-border-width: var(--mds-button-border-high-contrast-width);\n\n  fill: rgb(var(--status-warning-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="warning"][tone="weak"]:hover) {\n  --mds-button-background: rgb(var(--status-warning-10));\n  --mds-button-color: rgb(var(--status-warning-01));\n  --mds-button-border-width: var(--mds-button-border-high-contrast-hover-width);\n\n  fill: rgb(var(--status-warning-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="warning"][tone="weak"][active]) {\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-context(.pref-contrast-more):host([variant="warning"][tone="ghost"]) {\n  --mds-button-border-color: var(--status-warning-03);\n  --mds-button-color: rgb(var(--status-warning-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="warning"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--status-warning-03);\n  --mds-button-color: rgb(var(--status-warning-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="warning"][tone="ghost"][active]) {\n  --mds-button-border-color: var(--status-warning-04);\n  --mds-button-color: rgb(var(--status-warning-02));\n}\n\n:host-context(.pref-contrast-more):host([variant="warning"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--status-warning-01));\n}\n\n:host-context(.pref-contrast-more):host([variant="warning"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--status-warning-03));\n}\n\n:host-context(.pref-contrast-more):host([variant="warning"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--status-warning-01));\n}\n\n@media (prefers-contrast: more) {\n  :host-context(.pref-contrast-system):host([variant="warning"][tone="strong"]) {\n    --mds-button-background: rgb(var(--status-warning-03));\n    --mds-button-color: rgb(var(--tone-neutral));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="warning"][tone="strong"][active]),\n  :host-context(.pref-contrast-system):host([variant="warning"][tone="strong"]:hover) {\n    --mds-button-background: rgb(var(--status-warning-02));\n    --mds-button-border-color: var(--status-warning-02);\n  }\n\n  :host-context(.pref-contrast-system):host([variant="warning"][tone="weak"]) {\n    --mds-button-background: rgb(var(--status-warning-09));\n    --mds-button-color: rgb(var(--status-warning-02));\n    --mds-button-border-color: var(--status-warning-06);\n    --mds-button-border-width: var(--mds-button-border-high-contrast-width);\n\n    fill: rgb(var(--status-warning-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="warning"][tone="weak"]:hover) {\n    --mds-button-background: rgb(var(--status-warning-10));\n    --mds-button-color: rgb(var(--status-warning-01));\n    --mds-button-border-width: var(--mds-button-border-high-contrast-hover-width);\n\n    fill: rgb(var(--status-warning-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="warning"][tone="weak"][active]) {\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-context(.pref-contrast-system):host([variant="warning"][tone="ghost"]) {\n    --mds-button-border-color: var(--status-warning-03);\n    --mds-button-color: rgb(var(--status-warning-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="warning"][tone="ghost"]:hover) {\n    --mds-button-border-color: var(--status-warning-03);\n    --mds-button-color: rgb(var(--status-warning-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="warning"][tone="ghost"][active]) {\n    --mds-button-border-color: var(--status-warning-04);\n    --mds-button-color: rgb(var(--status-warning-02));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="warning"][tone="quiet"]) {\n    --mds-button-color: rgb(var(--status-warning-01));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="warning"][tone="quiet"]:hover) {\n    --mds-button-color: rgb(var(--status-warning-03));\n  }\n\n  :host-context(.pref-contrast-system):host([variant="warning"][tone="quiet"][active]) {\n    --mds-button-color: rgb(var(--status-warning-01));\n  }\n}\n\n:host([variant="warning"][tone="strong"]) {\n  --mds-button-background: rgb(var(--status-warning-05));\n  --mds-button-border-color: var(--status-warning-05);\n  --mds-button-color: rgb(var(--tone-neutral));\n}\n\n:host([variant="warning"][tone="strong"]:hover) {\n  --mds-button-background: rgb(var(--status-warning-04));\n  --mds-button-border-color: var(--status-warning-04);\n}\n\n:host([variant="warning"][tone="weak"]) {\n  --mds-button-background: rgb(var(--status-warning-09));\n  --mds-button-border-color: 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  --mds-button-background: rgb(var(--status-warning-08));\n  --mds-button-border-color: var(--status-warning-08);\n}\n\n:host([variant="warning"][tone="ghost"]) {\n  --mds-button-border-color: var(--status-warning-04);\n  --mds-button-color: rgb(var(--status-warning-03));\n}\n\n:host([variant="warning"][tone="ghost"]:hover) {\n  --mds-button-border-color: var(--status-warning-04);\n  --mds-button-color: rgb(var(--status-warning-02));\n}\n\n:host([variant="warning"][tone="quiet"]) {\n  --mds-button-color: rgb(var(--status-warning-02));\n}\n\n:host([variant="warning"][tone="quiet"]:hover) {\n  --mds-button-color: rgb(var(--status-warning-04));\n}\n\n:host([variant="warning"][tone="quiet"][active]) {\n  --mds-button-color: rgb(var(--status-warning-01));\n}\n\n:host([tone="quiet"]),\n:host([tone="quiet"]:hover),\n:host([tone="ghost"]) {\n  --mds-button-background: transparent;\n}\n\n:host([tone="strong"]),\n:host([tone="weak"]) {\n  --mds-button-border-default-opacity: 1;\n  --mds-button-border-width: 0;\n}\n\n:host([tone="strong"]),\n:host([tone="weak"]),\n:host([tone="ghost"]) {\n  --mds-button-border-opacity: var(--mds-button-border-default-opacity);\n}\n\n:host([tone="strong"]:hover),\n:host([tone="strong"][active]) {\n  --mds-button-border-width: var(--mds-button-border-tone-strong-hover-width);\n}\n\n:host([tone="weak"]:hover),\n:host([tone="weak"][active]) {\n  --mds-button-border-width: var(--mds-button-border-tone-weak-hover-width);\n}\n\n:host([tone="ghost"]:hover),\n:host([tone="ghost"][active]) {\n  --mds-button-background: transparent;\n  --mds-button-border-width: var(--mds-button-border-tone-ghost-hover-width);\n  --mds-button-border-opacity: var(--mds-button-border-hover-opacity);\n}\n\n:host([variant="google"]),\n:host([variant="google"][tone]) {\n  --mds-button-background: rgb(var(--tone-neutral));\n  --mds-button-border-hover-opacity: 0.5;\n  --mds-button-border-hover-width: 0.125rem;\n  --mds-button-border-opacity: 0.2;\n  --mds-button-border-width: 0.0625rem;\n  --mds-button-color: rgb(var(--tone-neutral-03));\n  --mds-button-border-color: var(--tone-neutral-01);\n\n  -webkit-box-shadow: 0 0 0 var(--mds-button-border-width) rgb(var(--mds-button-border-color) / var(--mds-button-border-opacity));\n\n  box-shadow: 0 0 0 var(--mds-button-border-width) rgb(var(--mds-button-border-color) / var(--mds-button-border-opacity));\n}\n\n:host([variant="google"]:hover),\n:host([variant="google"][tone]:hover) {\n  --mds-button-border-width: var(--mds-button-border-hover-width);\n  --mds-button-border-opacity: var(--mds-button-border-hover-opacity);\n}\n\n:host([variant="apple"]),\n:host([variant="apple"][tone]) {\n  --mds-button-background: rgb(var(--tone-neutral-02));\n  --mds-button-color: rgb(var(--tone-neutral));\n  --mds-button-border-width: 0;\n}\n\n:host-context(.pref-theme-dark):host([variant="google"]),\n:host-context(.pref-theme-dark):host([variant="google"][tone]) {\n  --mds-button-border-width: 0.125rem;\n  --mds-button-border-opacity: 0.3;\n}\n\n:host-context(.pref-theme-dark):host([variant="google"]:hover),\n:host-context(.pref-theme-dark):host([variant="google"][tone]:hover) {\n  --mds-button-border-opacity: 0.5;\n}\n\n:host-context(.pref-theme-dark):host([variant="apple"]),\n:host-context(.pref-theme-dark):host([variant="apple"][tone]) {\n  --mds-button-background: rgb(var(--tone-neutral-01));\n}\n\n@media (prefers-color-scheme: dark) {\n  :host-context(.pref-theme-system):host([variant="apple"]),\n  :host-context(.pref-theme-system):host([variant="apple"][tone]) {\n    --mds-button-background: rgb(var(--tone-neutral-01));\n  }\n\n  :host-context(.pref-theme-system):host([variant="google"]),\n  :host-context(.pref-theme-system):host([variant="google"][tone]) {\n    --mds-button-border-width: 0.125rem;\n    --mds-button-border-opacity: 0.3;\n  }\n\n  :host-context(.pref-theme-system):host([variant="google"]:hover),\n  :host-context(.pref-theme-system):host([variant="google"][tone]:hover) {\n    --mds-button-border-opacity: 0.5;\n  }\n}\n\n:host-context(.pref-animation-reduce),\n:host-context(.pref-animation-reduce) .await,\n:host-context(.pref-animation-reduce) .icon {\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n}\n\n@media (prefers-reduced-motion) {\n  :host-context(.pref-animation-system),\n  :host-context(.pref-animation-system) .await,\n  :host-context(.pref-animation-system) .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n';class l{resolveIconName(t){return this._resolveIconName(t,this.name,this.path)}constructor(t,n,r){this.name=t,this.path=n,this._resolveIconName=r}get resolver(){return this._resolveIconName}}const y=new class{constructor(){this._svgPathKey="mdsIconSvgPath",this._iconsSets=new Map,this._svgPathUpdate="mdsIconSvgPathUpdate",this.cacheExp=864e5,this.listeners=[],this.memoryCache={},this.isCacheAvailable=async t=>{try{const n=await function(t){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:v())("readonly",(function(n){return m(n.get(t))}))}(`loader_${t}`);if(!n)return!1;const r=JSON.parse(n);return Date.now()<r.expiry?r.data:(function(t){(arguments.length>1&&void 0!==arguments[1]?arguments[1]:v())("readwrite",(function(n){return n.delete(t),m(n.transaction)}))}(`loader_${t}`),!1)}catch(t){return console.error("isCacheAvailable error",t),!1}},this.setCache=async(t,n)=>{try{await function(t,n){return(arguments.length>2&&void 0!==arguments[2]?arguments[2]:v())("readwrite",(function(r){return r.put(n,t),m(r.transaction)}))}(`loader_${t}`,JSON.stringify({data:n,expiry:Date.now()+this.cacheExp}))}catch(t){console.error("setCache error",t)}},this.setUpListener()}addIconSet(t,n,r){let o=r;const a=this._iconsSets.get(t);if(!o&&a&&"function"==typeof a.resolver)o=a.resolver;else{if(o&&"function"!=typeof o)return console.error("MdsIconSvg: the third input of addIconSet should be a function that parses and returns the icons's filename."),!1;if(!o)return console.error(`MdsIconSvg: the set ${t} needs a resolve function for the icon names.`),!1}return this._iconsSets.set(t,new l(t,n,o)),!0}getIconSet(t){return t?{set:this._iconsSets.get(t.split("/")[0])}:{set:null}}setSvgPath(t){const n=/^(((https?:\/\/)?[.\w]+(:\d+)?)|\/)([\w/-]+)*/.exec(t);if(!n)throw Error(`Svg path not recognize ${t}, ensure is a absolute path starting with '/' or a url`);"undefined"!=typeof window&&(this._svgPath=n[1]?n[0]:window.location.origin.concat(n[0]),window.dispatchEvent(new Event(this._svgPathUpdate)))}getSvgPath(){return this._svgPath}registerListener(t){this.listeners.push(t)}setUpListener(){"undefined"!=typeof window&&window.addEventListener(this._svgPathUpdate,(()=>{for(const t of this.listeners)t()}))}async fetchSvg(t){var n;try{if(!this._svgPath&&"undefined"==typeof window)throw Error("Cant find svgPath, ensure you set it");this._svgPath||this.setSvgPath(null!==(n=window.sessionStorage.getItem(y._svgPathKey))&&void 0!==n?n:"");const r=this._svgPath&&!t.startsWith("http")?this._svgPath.concat(t,".svg"):t,o=await this.isCacheAvailable(r);if(this.memoryCache[r]||o)return this.memoryCache[r]||o;const a=await fetch(r);if(!a.ok)throw Error(`Request for '${r}' returned ${a.status} (${a.statusText})`);const s=await a.text(),e=s.toLowerCase().trim();if(!e.startsWith("<svg")&&!e.startsWith("<?xml"))throw Error(`Resource '${r}' returned an invalid SVG file`);return this.setCache(r,s),this.memoryCache[r]=s,s}catch(t){return console.error("fetchSvg error",t),""}}},g=class{constructor(n){t(this,n),this.convertBase64ToSvg=()=>{const t=this.name.replace(i,"").replace(/\=/i,"");return atob(t)}}componentWillLoad(){this.updateIcon(),y.registerListener((()=>this.updateIcon()))}static setSvgPathStatic(t){y.setSvgPath(t)}async setSvgPath(t){y.setSvgPath(t)}async updateIcon(){return this.name?h(this.name)?(this.svgHTML=this.convertBase64ToSvg(),Promise.resolve()):c(this.name)?(this.svgHTML=this.name,Promise.resolve()):void(this.svgHTML=await y.fetchSvg(this.name)):Promise.resolve()}render(){return n(r,{key:"43b9527b1f2650abead16b06c90286fea09adb34"},this.svgHTML&&n("i",{key:"8527fafd0f60b6aa32a2d8e35cd33e9d2403d7b5","aria-hidden":"true",class:"icon",part:"svg",innerHTML:this.svgHTML}))}get hostElement(){return o(this)}static get watchers(){return{name:["updateIcon"]}}};g.style=":host{aspect-ratio:1/1;width:1.5rem;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center}.icon{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;font-style:normal;-ms-flex-pack:center;justify-content:center;width:100%}.icon svg{height:auto;width:100%}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}";const p=class{constructor(n){t(this,n),this.running=!1}handleRunning(t){!1===t&&(this.running=void 0)}render(){return n(r,{key:"26cc04164b95792fbabf4248eceff7b630d14171"},n("i",{key:"15a3883a3c6777b5475974269e1a946a955b315a",class:"await-icon",innerHTML:'<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path opacity="0.25" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="4"/>\n  <path opacity="0.75" d="M10 2.2002C5.43552 3.12674 2 7.16224 2 12.0002C2 13.5118 2.3354 14.9451 2.93585 16.2297" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>\n</svg>\n'}))}static get watchers(){return{running:["handleRunning"]}}};p.style=":host{--mds-spinner-duration:0.725s;height:3rem;width:3rem;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);-ms-flex-align:center;align-items:center;color:rgb(var(--variant-primary-03));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;opacity:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:opacity, transform;transition-property:opacity, transform, -webkit-transform}:host([running]){-webkit-transition-duration:700ms;transition-duration:700ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);opacity:1;-webkit-transform:scale(1);transform:scale(1)}.await-icon{aspect-ratio:1/1;width:100%}@-webkit-keyframes spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.await-icon{-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);-webkit-animation-duration:var(--mds-spinner-duration);animation-duration:var(--mds-spinner-duration);-webkit-animation-play-state:paused;animation-play-state:paused;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;stroke:currentcolor;-webkit-transition-property:stroke;transition-property:stroke}.await-icon svg{width:100%}:host([running]) .await-icon{-webkit-animation-play-state:running;animation-play-state:running}:host-context(.pref-animation-reduce){--mds-spinner-duration:8s}@media (prefers-reduced-motion){:host-context(.pref-animation-system){--mds-spinner-duration:8s}}:host-context(.pref-contrast-more){color:rgb(var(--variant-primary-01))}@media (prefers-contrast: more){:host-context(.pref-contrast-system){color:rgb(var(--variant-primary-01))}}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}";export{b as mds_button,g as mds_icon,p as mds_spinner}

package/dist/magma-components/{p-2de8157b.system.entry.js → p-432be440.system.entry.js}

@@ -1 +1 @@
-System.register(["./p-2aef517c.system.js"],(function(d){"use strict";var t,e,r;return{setters:[function(d){t=d.r;e=d.h;r=d.H}],execute:function(){var a=":host{height:0.25rem;width:100%;border-radius:0.25rem;background-color:rgb(var(--tone-neutral-08));border:0;display:-ms-flexbox;display:flex}:host-context(.pref-theme-dark){background-color:rgb(var(--tone-neutral-07))}@media (prefers-color-scheme: dark){:host-context(.pref-theme-system){background-color:rgb(var(--tone-neutral-07))}}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}";var s=a;var i=d("mds_hr",function(){function d(d){t(this,d)}d.prototype.render=function(){return e(r,{key:"cc9708f0bbede0b64897ded6362a273781ac97c4"})};return d}());i.style=s}}}));
+System.register(["./p-2aef517c.system.js"],(function(d){"use strict";var t,e,r;return{setters:[function(d){t=d.r;e=d.h;r=d.H}],execute:function(){var a=":host{height:0.25rem;width:100%;border-radius:0.25rem;background-color:rgb(var(--tone-neutral-08));border:0;display:-ms-flexbox;display:flex}:host-context(.pref-theme-dark){background-color:rgb(var(--tone-neutral-07))}@media (prefers-color-scheme: dark){:host-context(.pref-theme-system){background-color:rgb(var(--tone-neutral-07))}}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}";var s=a;var i=d("mds_hr",function(){function d(d){t(this,d)}d.prototype.render=function(){return e(r,{key:"1feeafb202973ecfbc1964d97f6c4689c71fbc01"})};return d}());i.style=s}}}));

package/dist/magma-components/{p-5eca660e.system.entry.js → p-43a2f192.system.entry.js}

@@ -1 +1 @@
-System.register(["./p-2aef517c.system.js","./p-b2cebe50.system.js"],(function(t){"use strict";var e,d,r,o,a,n;return{setters:[function(t){e=t.r;d=t.c;r=t.h;o=t.H;a=t.g},function(t){n=t.K}],execute:function(){var i='@-webkit-keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@tailwind components; :host{--mds-filter-item-count-background-default:rgb(var(--tone-neutral-08));--mds-filter-item-count-color-default:rgb(var(--tone-neutral-02));--mds-filter-item-count-background-selected:rgb(var(--tone-neutral-05));--mds-filter-item-count-color-selected:rgb(var(--tone-neutral));-webkit-animation-duration:var(--magma-outline-animation-duration, 1s);animation-duration:var(--magma-outline-animation-duration, 1s);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:focus-bounce;animation-name:focus-bounce;-webkit-animation-play-state:paused;animation-play-state:paused;-webkit-animation-timing-function:cubic-bezier(0, 0, 0.2, 1);animation-timing-function:cubic-bezier(0, 0, 0.2, 1);outline:var(--magma-outline-blur);-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}:host:focus-visible{--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}:host{gap:0.25rem;border-radius:9999px;padding-left:1rem;padding-right:1rem;padding-top:0.5rem;padding-bottom:0.5rem;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);-ms-flex-align:center;align-items:center;color:rgb(var(--tone-neutral-03));cursor:pointer;display:-ms-flexbox;display:flex;fill:currentcolor;-ms-flex-pack:center;justify-content:center;-webkit-transition-property:background-color, color, outline, outline-offset, -webkit-box-shadow;transition-property:background-color, color, outline, outline-offset, -webkit-box-shadow;transition-property:background-color, box-shadow, color, outline, outline-offset;transition-property:background-color, box-shadow, color, outline, outline-offset, -webkit-box-shadow;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}mds-text{white-space:nowrap}.count{-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);-ms-flex-align:center;align-items:center;background-color:var(--mds-filter-item-count-background-default);border-radius:1rem;-webkit-box-sizing:border-box;box-sizing:border-box;color:currentcolor;color:var(--mds-filter-item-count-color-default);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;height:1rem;-ms-flex-pack:center;justify-content:center;min-width:1rem;padding-left:0.375rem;padding-right:0.375rem;-webkit-transition-property:background-color, color;transition-property:background-color, color;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(:focus-visible){--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}:host([icon]:not([label])){height:2.25rem;width:2.25rem;padding:0rem}:host([selected]:not([selected="false"])),:host(:hover){background-color:rgb(var(--tone-neutral))}:host(:hover){-webkit-box-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);box-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05)}:host([selected]:not([selected="false"])){color:rgb(var(--tone-neutral-01))}:host([selected]:not([selected="false"])) .count{background-color:var(--mds-filter-item-count-background-selected);color:var(--mds-filter-item-count-color-selected)}:host-context(.pref-animation-reduce){-webkit-transition-duration:0s;transition-duration:0s}@media (prefers-reduced-motion){:host-context(.pref-animation-system){-webkit-transition-duration:0s;transition-duration:0s}}:host-context(.pref-theme-dark){background-color:rgb(var(--tone-neutral-10))}:host-context(.pref-theme-dark):host([selected]:not([selected="false"])){background-color:rgb(var(--tone-neutral-08));-webkit-box-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);box-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3)}:host-context(.pref-theme-dark):host(:hover){-webkit-box-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);box-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3)}@media (prefers-color-scheme: dark){:host-context(.pref-theme-system){background-color:rgb(var(--tone-neutral-10))}:host-context(.pref-theme-system):host([selected]:not([selected="false"])){background-color:rgb(var(--tone-neutral-08));-webkit-box-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);box-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3)}:host-context(.pref-theme-system):host(:hover){-webkit-box-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);box-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3)}}:host-context(.pref-contrast-more):host([selected]:not([selected="false"])),:host-context(.pref-contrast-more):host(:hover){-webkit-box-shadow:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);box-shadow:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6)}@media (prefers-contrast: more){:host-context(.pref-contrast-system):host([selected]:not([selected="false"])),:host-context(.pref-contrast-system):host(:hover){-webkit-box-shadow:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);box-shadow:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6)}}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}';var s=i;var h=t("mds_filter_item",function(){function t(t){var r=this;e(this,t);this.selectedEvent=d(this,"mdsFilterItemSelect",7);this.km=new n;this.toggle=function(){r.selected=!r.selected;r.selectedEvent.emit({id:r.element.id,selected:r.selected})};this.disconnectedCallback=function(){r.km.detachClickBehavior()}}t.prototype.componentDidLoad=function(){this.km.addElement(this.element);this.km.attachClickBehavior()};t.prototype.render=function(){var t;return r(o,{key:"2c895fbc29ea9a0a3821a0dc60dee5dea65ab6cd",tabindex:this.disabled?"-1":"0",role:"menuitem","aria-label":(t=this.label)!==null&&t!==void 0?t:this.icon,onClick:this.toggle},this.icon&&r("mds-icon",{key:"a4bc5acb9550092fa6fdea9004a602c6e3912b7a","aria-hidden":"true",name:this.icon}),this.label&&r("mds-text",{key:"14d86de48ed76faeee001c5d4a7077b1997693a1","aria-hidden":"true",variant:"info",typography:"caption"},this.label),this.count&&r("div",{key:"8fb24204fd2f30917f5041fda4e92c1271877294",class:"count"},r("mds-text",{key:"2a282fdf25234f0e07c3be767408967070d2d33a","aria-hidden":"true",variant:"info",typography:"option"},this.count)))};Object.defineProperty(t.prototype,"element",{get:function(){return a(this)},enumerable:false,configurable:true});return t}());h.style=s}}}));
+System.register(["./p-2aef517c.system.js","./p-b2cebe50.system.js"],(function(t){"use strict";var e,d,r,o,a,n;return{setters:[function(t){e=t.r;d=t.c;r=t.h;o=t.H;a=t.g},function(t){n=t.K}],execute:function(){var i='@-webkit-keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@tailwind components; :host{--mds-filter-item-count-background-default:rgb(var(--tone-neutral-08));--mds-filter-item-count-color-default:rgb(var(--tone-neutral-02));--mds-filter-item-count-background-selected:rgb(var(--tone-neutral-05));--mds-filter-item-count-color-selected:rgb(var(--tone-neutral));-webkit-animation-duration:var(--magma-outline-animation-duration, 1s);animation-duration:var(--magma-outline-animation-duration, 1s);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:focus-bounce;animation-name:focus-bounce;-webkit-animation-play-state:paused;animation-play-state:paused;-webkit-animation-timing-function:cubic-bezier(0, 0, 0.2, 1);animation-timing-function:cubic-bezier(0, 0, 0.2, 1);outline:var(--magma-outline-blur);-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}:host:focus-visible{--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}:host{gap:0.25rem;border-radius:9999px;padding-left:1rem;padding-right:1rem;padding-top:0.5rem;padding-bottom:0.5rem;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);-ms-flex-align:center;align-items:center;color:rgb(var(--tone-neutral-03));cursor:pointer;display:-ms-flexbox;display:flex;fill:currentcolor;-ms-flex-pack:center;justify-content:center;-webkit-transition-property:background-color, color, outline, outline-offset, -webkit-box-shadow;transition-property:background-color, color, outline, outline-offset, -webkit-box-shadow;transition-property:background-color, box-shadow, color, outline, outline-offset;transition-property:background-color, box-shadow, color, outline, outline-offset, -webkit-box-shadow;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}mds-text{white-space:nowrap}.count{-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);-ms-flex-align:center;align-items:center;background-color:var(--mds-filter-item-count-background-default);border-radius:1rem;-webkit-box-sizing:border-box;box-sizing:border-box;color:currentcolor;color:var(--mds-filter-item-count-color-default);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;height:1rem;-ms-flex-pack:center;justify-content:center;min-width:1rem;padding-left:0.375rem;padding-right:0.375rem;-webkit-transition-property:background-color, color;transition-property:background-color, color;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(:focus-visible){--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}:host([icon]:not([label])){height:2.25rem;width:2.25rem;padding:0rem}:host([selected]:not([selected="false"])),:host(:hover){background-color:rgb(var(--tone-neutral))}:host(:hover){-webkit-box-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);box-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05)}:host([selected]:not([selected="false"])){color:rgb(var(--tone-neutral-01))}:host([selected]:not([selected="false"])) .count{background-color:var(--mds-filter-item-count-background-selected);color:var(--mds-filter-item-count-color-selected)}:host-context(.pref-animation-reduce){-webkit-transition-duration:0s;transition-duration:0s}@media (prefers-reduced-motion){:host-context(.pref-animation-system){-webkit-transition-duration:0s;transition-duration:0s}}:host-context(.pref-theme-dark){background-color:rgb(var(--tone-neutral-10))}:host-context(.pref-theme-dark):host([selected]:not([selected="false"])){background-color:rgb(var(--tone-neutral-08));-webkit-box-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);box-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3)}:host-context(.pref-theme-dark):host(:hover){-webkit-box-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);box-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3)}@media (prefers-color-scheme: dark){:host-context(.pref-theme-system){background-color:rgb(var(--tone-neutral-10))}:host-context(.pref-theme-system):host([selected]:not([selected="false"])){background-color:rgb(var(--tone-neutral-08));-webkit-box-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);box-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3)}:host-context(.pref-theme-system):host(:hover){-webkit-box-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);box-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3)}}:host-context(.pref-contrast-more):host([selected]:not([selected="false"])),:host-context(.pref-contrast-more):host(:hover){-webkit-box-shadow:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);box-shadow:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6)}@media (prefers-contrast: more){:host-context(.pref-contrast-system):host([selected]:not([selected="false"])),:host-context(.pref-contrast-system):host(:hover){-webkit-box-shadow:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);box-shadow:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6)}}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}';var s=i;var h=t("mds_filter_item",function(){function t(t){var r=this;e(this,t);this.selectedEvent=d(this,"mdsFilterItemSelect",7);this.km=new n;this.toggle=function(){r.selected=!r.selected;r.selectedEvent.emit({id:r.element.id,selected:r.selected})};this.disconnectedCallback=function(){r.km.detachClickBehavior()}}t.prototype.componentDidLoad=function(){this.km.addElement(this.element);this.km.attachClickBehavior()};t.prototype.render=function(){var t;return r(o,{key:"cce4de5afd4da30374952cbbc4c6b694757d3d5f",tabindex:this.disabled?"-1":"0",role:"menuitem","aria-label":(t=this.label)!==null&&t!==void 0?t:this.icon,onClick:this.toggle},this.icon&&r("mds-icon",{key:"b03f521485192a0149f70b83730988214dd304d6","aria-hidden":"true",name:this.icon}),this.label&&r("mds-text",{key:"5fa46497d02b5e05b056cdea546d1b9d9eecc3af","aria-hidden":"true",variant:"info",typography:"caption"},this.label),this.count&&r("div",{key:"9cdc8d67fcb81c58db3943dec77709fba4a03e3b",class:"count"},r("mds-text",{key:"b402310eb0d4043987776008c6584ed95b8e8e7d","aria-hidden":"true",variant:"info",typography:"option"},this.count)))};Object.defineProperty(t.prototype,"element",{get:function(){return a(this)},enumerable:false,configurable:true});return t}());h.style=s}}}));