@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.7

package/dist/collection/components/notification/notification.host.css

@@ -1 +1 @@
-:host{--_notification-position: var(--notification-position, var(--mod-notification-position, static));--_notification-top: var(--notification-top, var(--mod-notification-top));--_notification-right: var(--notification-right, var(--mod-notification-right));--_notification-bottom: var(--notification-bottom, var(--mod-notification-bottom));--_notification-left: var(--notification-left, var(--mod-notification-left));position:var(--_notification-position);top:var(--_notification-top);right:var(--_notification-right);bottom:var(--_notification-bottom);left:var(--_notification-left);--_notification-m: var(--notification-m, var(--mod-notification-m, 0));--_notification-my: var(--notification-my, var(--mod-notification-my));--_notification-mx: var(--notification-mx, var(--mod-notification-mx));--_notification-ml: var(--notification-ml, var(--mod-notification-ml));--_notification-mr: var(--notification-mr, var(--mod-notification-mr));--_notification-mt: var(--notification-mt, var(--mod-notification-mt));--_notification-mb: var(--notification-mb, var(--mod-notification-mb));margin:var(--_notification-m);margin-inline:var(--_notification-mx);margin-block:var(--_notification-my);margin-left:var(--_notification-ml);margin-right:var(--_notification-mr);margin-top:var(--_notification-mt);margin-bottom:var(--_notification-mb);--_notification-radius: var(--notification-radius, var(--mod-notification-radius, var(--ds-notification-radius)));--_notification-color-background: var(--notification-color-background, var(--mod-notification-color-background, var(--ds-notification-color-base-background)));--_notification-color-border: var(--notification-color-border, var(--mod-notification-color-border, var(--ds-notification-color-base-border)));--_notification-color-text: var(--notification-color-text, var(--mod-notification-color-text, var(--ds-notification-color-base-text)));--_notification-heading-family: var(--notification-heading-family, var(--mod-notification-heading-family, var(--ds-text-family-heading)));--_notification-heading-weight: var(--notification-heading-weight, var(--mod-notification-heading-weight, var(--ds-text-weight-bold)));--_notification-heading-size: var(--notification-heading-size, var(--mod-notification-heading-size, var(--ds-text-size-lg-device)));--_notification-heading-line-height: var(--notification-heading-line-height, var(--mod-notification-heading-line-height, var(--ds-text-line-height-heading)));--_notification-content-family: var(--notification-content-family, var(--mod-notification-content-family, var(--ds-text-family-body)));--_notification-content-weight: var(--notification-content-weight, var(--mod-notification-content-weight, inherit));--_notification-content-size: var(--notification-content-size, var(--mod-notification-content-size, var(--ds-text-size-base-device)));--_notification-content-line-height: var(--notification-content-line-height, var(--mod-notification-content-line-height, var(--ds-text-line-height-body)));--_notification-icon: var(--notification-icon, var(--mod-notification-icon, var(--ds-notification-color-base-icon)));--_notification-icon-display: var(--notification-icon-display, var(--mod-notification-icon-display, block));--_notification-space: var(--notification-space, var(--mod-notification-space, var(--ds-card-space-base-device, 1.5rem)));--_notification-icon-space: var(--notification-icon-space, var(--mod-notification-icon-space, 1.5rem));--_notification-close-offset: var(--notification-close-offset, var(--mod-notification-close-offset, 2rem));--_notification-gap: var(--notification-gap, var(--mod-notification-gap, 0.125rem));--_notification-close-position: var(--notification-close-position, var(--mod-notification-close-position, absolute));--_notification-close-right: var(--notification-close-right, var(--mod-notification-close-right, var(--_notification-space)));--_notification-close-top: var(--notification-close-top, var(--mod-notification-close-top, var(--_notification-space)));--_notification-animation-start-opacity: var(--notification-animation-start-opacity, var(--mod-notification-animation-start-opacity, 1));--_notification-animation-start-transform: var(--notification-animation-start-transform, var(--mod-notification-animation-start-transform, none));--_notification-animation-transition: var(--notification-animation-transition, var(--mod-notification-animation-transition, none));--_notification-animation-end-opacity: var(--notification-animation-end-opacity, var(--mod-notification-animation-end-opacity, 1));--_notification-animation-end-transform: var(--notification-animation-end-transform, var(--mod-notification-animation-end-transform, none))}#notification{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;flex:1;position:relative;hyphens:auto;border:var(--ds-alias-border-width-base) solid var(--_notification-color-border);border-radius:var(--_notification-radius);background:var(--_notification-color-background);color:var(--_notification-color-text);padding-top:var(--_notification-space);padding-right:var(--_notification-space);padding-bottom:var(--_notification-space);padding-left:calc(var(--_notification-space) + var(--_notification-icon-space));display:flex;flex-direction:column;gap:var(--_notification-gap)}#notification ds-close,#notification .close{position:var(--_notification-close-position);top:var(--_notification-close-top);right:var(--_notification-close-right)}#notification>h2{font-family:var(--_notification-heading-family);font-weight:var(--_notification-heading-weight);line-height:var(--_notification-heading-line-height);font-size:var(--_notification-heading-size);margin:0 !important}#notification:has(.close)>h2::before,#notification:has(ds-close)>h2::before{content:"";float:right;width:24px;height:calc(var(--_notification-heading-line-height)*16px)}#notification>span,#notification>p{font-family:var(--_notification-content-family);font-size:var(--_notification-content-size);font-weight:var(--_notification-content-weight);line-height:var(--_notification-content-line-height);margin:0 !important}#notification::before{display:var(--_notification-icon-display);background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;position:absolute;height:1.5rem;width:1.5rem;left:-0.25rem;top:calc((var(--_notification-space)));transform:translateX(var(--_notification-space));content:"";-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;mask-image:var(--_notification-icon);-webkit-mask-image:var(--_notification-icon)}:host(.has-no-icon){--mod-notification-icon-display: none;--mod-notification-icon-space: 0rem}:host(.is-info){--mod-notification-color-text: var(--ds-notification-color-info-text);--mod-notification-color-border: var(--ds-notification-color-info-border);--mod-notification-color-background: var(--ds-notification-color-info-background);--mod-notification-icon: var(--ds-notification-color-info-icon)}:host(.is-success){--mod-notification-color-text: var(--ds-notification-color-success-text);--mod-notification-color-border: var(--ds-notification-color-success-border);--mod-notification-color-background: var(--ds-notification-color-success-background);--mod-notification-icon: var(--ds-notification-color-success-icon)}:host(.is-warning){--mod-notification-color-text: var(--ds-notification-color-warning-text);--mod-notification-color-border: var(--ds-notification-color-warning-border);--mod-notification-color-background: var(--ds-notification-color-warning-background);--mod-notification-icon: var(--ds-notification-color-warning-icon)}:host(.is-danger){--mod-notification-color-text: var(--ds-notification-color-danger-text);--mod-notification-color-border: var(--ds-notification-color-danger-border);--mod-notification-color-background: var(--ds-notification-color-danger-background);--mod-notification-icon: var(--ds-notification-color-danger-icon)}:host(.is-outline-base){--mod-notification-color-text: var(--ds-notification-color-outline-base-text);--mod-notification-color-border: var(--ds-notification-color-outline-base-border);--mod-notification-color-background: var(--ds-notification-color-outline-base-background);--mod-notification-icon: var(--ds-notification-color-outline-base-icon)}:host(.is-outline-purple){--mod-notification-color-text: var(--ds-notification-color-outline-purple-text);--mod-notification-color-border: var(--ds-notification-color-outline-purple-border);--mod-notification-color-background: var(--ds-notification-color-outline-purple-background);--mod-notification-icon: var(--ds-notification-color-outline-purple-icon)}:host(.is-outline-green){--mod-notification-color-text: var(--ds-notification-color-outline-green-text);--mod-notification-color-border: var(--ds-notification-color-outline-green-border);--mod-notification-color-background: var(--ds-notification-color-outline-green-background);--mod-notification-icon: var(--ds-notification-color-outline-green-icon)}:host(.is-outline-yellow){--mod-notification-color-text: var(--ds-notification-color-outline-yellow-text);--mod-notification-color-border: var(--ds-notification-color-outline-yellow-border);--mod-notification-color-background: var(--ds-notification-color-outline-yellow-background);--mod-notification-icon: var(--ds-notification-color-outline-yellow-icon)}:host(.is-outline-red){--mod-notification-color-text: var(--ds-notification-color-outline-red-text);--mod-notification-color-border: var(--ds-notification-color-outline-red-border);--mod-notification-color-background: var(--ds-notification-color-outline-red-background);--mod-notification-icon: var(--ds-notification-color-outline-red-icon)}:host(.is-sm){--mod-notification-space: var(--ds-card-space-sm-device)}:host(.is-md){--mod-notification-space: var(--ds-card-space-md-device)}:host(.is-lg){--mod-notification-space: var(--ds-card-space-lg-device)}:host{display:block}
+:host{--_notification-position: var(--notification-position, var(--mod-notification-position, static));--_notification-top: var(--notification-top, var(--mod-notification-top));--_notification-right: var(--notification-right, var(--mod-notification-right));--_notification-bottom: var(--notification-bottom, var(--mod-notification-bottom));--_notification-left: var(--notification-left, var(--mod-notification-left));position:var(--_notification-position);top:var(--_notification-top);right:var(--_notification-right);bottom:var(--_notification-bottom);left:var(--_notification-left);--_notification-m: var(--notification-m, var(--mod-notification-m, 0));--_notification-my: var(--notification-my, var(--mod-notification-my));--_notification-mx: var(--notification-mx, var(--mod-notification-mx));--_notification-ml: var(--notification-ml, var(--mod-notification-ml));--_notification-mr: var(--notification-mr, var(--mod-notification-mr));--_notification-mt: var(--notification-mt, var(--mod-notification-mt));--_notification-mb: var(--notification-mb, var(--mod-notification-mb));margin:var(--_notification-m);margin-inline:var(--_notification-mx);margin-block:var(--_notification-my);margin-left:var(--_notification-ml);margin-right:var(--_notification-mr);margin-top:var(--_notification-mt);margin-bottom:var(--_notification-mb);--_notification-radius: var(--notification-radius, var(--mod-notification-radius, var(--ds-notification-radius)));--_notification-color-background: var(--notification-color-background, var(--mod-notification-color-background, var(--ds-notification-color-base-background)));--_notification-color-border: var(--notification-color-border, var(--mod-notification-color-border, var(--ds-notification-color-base-border)));--_notification-color-text: var(--notification-color-text, var(--mod-notification-color-text, var(--ds-notification-color-base-text)));--_notification-heading-family: var(--notification-heading-family, var(--mod-notification-heading-family, var(--ds-alias-text-family-heading)));--_notification-heading-weight: var(--notification-heading-weight, var(--mod-notification-heading-weight, var(--ds-alias-text-weight-bold)));--_notification-heading-size: var(--notification-heading-size, var(--mod-notification-heading-size, var(--ds-alias-text-size-lg-device)));--_notification-heading-line-height: var(--notification-heading-line-height, var(--mod-notification-heading-line-height, var(--ds-alias-text-line-height-heading)));--_notification-content-family: var(--notification-content-family, var(--mod-notification-content-family, var(--ds-alias-text-family-body)));--_notification-content-weight: var(--notification-content-weight, var(--mod-notification-content-weight, inherit));--_notification-content-size: var(--notification-content-size, var(--mod-notification-content-size, var(--ds-alias-text-size-base-device)));--_notification-content-line-height: var(--notification-content-line-height, var(--mod-notification-content-line-height, var(--ds-alias-text-line-height-body)));--_notification-icon: var(--notification-icon, var(--mod-notification-icon, var(--ds-notification-color-base-icon)));--_notification-icon-display: var(--notification-icon-display, var(--mod-notification-icon-display, block));--_notification-space: var(--notification-space, var(--mod-notification-space, var(--ds-card-space-base-device, 1.5rem)));--_notification-icon-space: var(--notification-icon-space, var(--mod-notification-icon-space, 1.5rem));--_notification-close-offset: var(--notification-close-offset, var(--mod-notification-close-offset, 2rem));--_notification-gap: var(--notification-gap, var(--mod-notification-gap, 0.125rem));--_notification-close-position: var(--notification-close-position, var(--mod-notification-close-position, absolute));--_notification-close-right: var(--notification-close-right, var(--mod-notification-close-right, var(--_notification-space)));--_notification-close-top: var(--notification-close-top, var(--mod-notification-close-top, var(--_notification-space)));--_notification-animation-start-opacity: var(--notification-animation-start-opacity, var(--mod-notification-animation-start-opacity, 1));--_notification-animation-start-transform: var(--notification-animation-start-transform, var(--mod-notification-animation-start-transform, none));--_notification-animation-transition: var(--notification-animation-transition, var(--mod-notification-animation-transition, none));--_notification-animation-end-opacity: var(--notification-animation-end-opacity, var(--mod-notification-animation-end-opacity, 1));--_notification-animation-end-transform: var(--notification-animation-end-transform, var(--mod-notification-animation-end-transform, none))}#notification{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;flex:1;position:relative;hyphens:auto;border:var(--ds-alias-border-width-base) solid var(--_notification-color-border);border-radius:var(--_notification-radius);background:var(--_notification-color-background);color:var(--_notification-color-text);padding-top:var(--_notification-space);padding-right:var(--_notification-space);padding-bottom:var(--_notification-space);padding-left:calc(var(--_notification-space) + var(--_notification-icon-space));display:flex;flex-direction:column;gap:var(--_notification-gap)}#notification ds-close,#notification .close{position:var(--_notification-close-position);top:var(--_notification-close-top);right:var(--_notification-close-right)}#notification>h2{font-family:var(--_notification-heading-family);font-weight:var(--_notification-heading-weight);line-height:var(--_notification-heading-line-height);font-size:var(--_notification-heading-size);margin:0 !important}#notification:has(.close)>h2::before,#notification:has(ds-close)>h2::before{content:"";float:right;width:24px;height:calc(var(--_notification-heading-line-height)*16px)}#notification>span,#notification>p{font-family:var(--_notification-content-family);font-size:var(--_notification-content-size);font-weight:var(--_notification-content-weight);line-height:var(--_notification-content-line-height);margin:0 !important}#notification::before{display:var(--_notification-icon-display);background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;position:absolute;height:1.5rem;width:1.5rem;left:-0.25rem;top:calc((var(--_notification-space)));transform:translateX(var(--_notification-space));content:"";-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;mask-image:var(--_notification-icon);-webkit-mask-image:var(--_notification-icon)}:host(.has-no-icon){--mod-notification-icon-display: none;--mod-notification-icon-space: 0rem}:host(.is-info){--mod-notification-color-text: var(--ds-notification-color-info-text);--mod-notification-color-border: var(--ds-notification-color-info-border);--mod-notification-color-background: var(--ds-notification-color-info-background);--mod-notification-icon: var(--ds-notification-color-info-icon)}:host(.is-success){--mod-notification-color-text: var(--ds-notification-color-success-text);--mod-notification-color-border: var(--ds-notification-color-success-border);--mod-notification-color-background: var(--ds-notification-color-success-background);--mod-notification-icon: var(--ds-notification-color-success-icon)}:host(.is-warning){--mod-notification-color-text: var(--ds-notification-color-warning-text);--mod-notification-color-border: var(--ds-notification-color-warning-border);--mod-notification-color-background: var(--ds-notification-color-warning-background);--mod-notification-icon: var(--ds-notification-color-warning-icon)}:host(.is-danger){--mod-notification-color-text: var(--ds-notification-color-danger-text);--mod-notification-color-border: var(--ds-notification-color-danger-border);--mod-notification-color-background: var(--ds-notification-color-danger-background);--mod-notification-icon: var(--ds-notification-color-danger-icon)}:host(.is-outline-base){--mod-notification-color-text: var(--ds-notification-color-outline-base-text);--mod-notification-color-border: var(--ds-notification-color-outline-base-border);--mod-notification-color-background: var(--ds-notification-color-outline-base-background);--mod-notification-icon: var(--ds-notification-color-outline-base-icon)}:host(.is-outline-purple){--mod-notification-color-text: var(--ds-notification-color-outline-purple-text);--mod-notification-color-border: var(--ds-notification-color-outline-purple-border);--mod-notification-color-background: var(--ds-notification-color-outline-purple-background);--mod-notification-icon: var(--ds-notification-color-outline-purple-icon)}:host(.is-outline-green){--mod-notification-color-text: var(--ds-notification-color-outline-green-text);--mod-notification-color-border: var(--ds-notification-color-outline-green-border);--mod-notification-color-background: var(--ds-notification-color-outline-green-background);--mod-notification-icon: var(--ds-notification-color-outline-green-icon)}:host(.is-outline-yellow){--mod-notification-color-text: var(--ds-notification-color-outline-yellow-text);--mod-notification-color-border: var(--ds-notification-color-outline-yellow-border);--mod-notification-color-background: var(--ds-notification-color-outline-yellow-background);--mod-notification-icon: var(--ds-notification-color-outline-yellow-icon)}:host(.is-outline-red){--mod-notification-color-text: var(--ds-notification-color-outline-red-text);--mod-notification-color-border: var(--ds-notification-color-outline-red-border);--mod-notification-color-background: var(--ds-notification-color-outline-red-background);--mod-notification-icon: var(--ds-notification-color-outline-red-icon)}:host(.is-sm){--mod-notification-space: var(--ds-card-space-sm-device)}:host(.is-md){--mod-notification-space: var(--ds-card-space-md-device)}:host(.is-lg){--mod-notification-space: var(--ds-card-space-lg-device)}:host{display:block}

package/dist/collection/components/notification/notification.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
-import { stopEventBubbling, normalizeDeprecatedTShirtSize, Logger, ValidateOneOf, ValidateType, setupValidation, } from "../../utils/index";
+import { stopEventBubbling, normalizeDeprecatedTShirtSize, Logger, hasValue, OneOf, Type, } from "../../utils/index";
 import { NOTIFICATION_COLORS, NOTIFICATION_SIZES, } from "./notification.interfaces";
 /**
  * Notification presents inline feedback messages for success, warning, error, or informational states with optional close action.
@@ -49,17 +49,10 @@ export class Notification {
     createLogger(log) {
         this.log = log;
     }
-    sizeChanged(newValue) {
-        this.size = normalizeDeprecatedTShirtSize(newValue);
-    }
     /**
      * LIFECYCLE
      * ------------------------------------------------------
      */
-    connectedCallback() {
-        setupValidation(this);
-        this.size = normalizeDeprecatedTShirtSize(this.size);
-    }
     componentDidLoad() {
         this.didLoad = true;
         this.dsDidLoad.emit();
@@ -80,17 +73,18 @@ export class Notification {
      * ------------------------------------------------------
      */
     render() {
+        const size = normalizeDeprecatedTShirtSize(this.size) || '';
         const a11yAttributes = this.alert
             ? { 'role': 'alert', 'aria-live': 'assertive', 'aria-atomic': 'true' }
             : { 'role': 'status', 'aria-live': 'polite', 'aria-atomic': 'true' };
-        return (h(Host, Object.assign({ key: 'fba49f38b57b8aeb384390ab0598d2d34b53152c' }, a11yAttributes, { class: {
+        return (h(Host, Object.assign({ key: 'f3e829a86b22c64fe93b06b2664b398a7248d49f' }, a11yAttributes, { class: {
                 'has-no-icon': this.noIcon,
-                [`is-${this.color}`]: !!this.color,
-                [`is-${this.size}`]: !!this.size,
-            } }), h("section", { key: '386f8968955fd0eeb7b46e89adca731b84ae2f3b', id: "notification", part: "section" }, this.closable && (h("ds-close", { key: 'c6dcd83a7a89d5a081e3c8360a2dd3d02653ac85', part: "close", onClick: ev => {
+                [`is-${this.color}`]: hasValue(this.color),
+                [`is-${size}`]: hasValue(this.size),
+            } }), h("section", { key: 'f8ff4cdc8379ec73ac00a6654478a0039dd746f1', id: "notification", part: "section" }, this.closable && (h("ds-close", { key: 'f72f440db26de1ef40ca24ec9c9f06015ce31126', part: "close", onClick: ev => {
                 stopEventBubbling(ev);
                 this.close();
-            } })), this.heading && h("h2", { key: 'b660129e85391c5e9e916868f16e7275af9305df', part: "heading" }, this.heading), h("span", { key: '23a99ca6186f906ecfc69e65290bf424abb7c9f6' }, h("slot", { key: '5a276328a4438b0f8ca0a9a0702e61236e7eecd6' })))));
+            } })), hasValue(this.heading) && h("h2", { key: 'adae5186e4009153c2d93645bdf8ab49e4da9df7', part: "heading" }, this.heading), h("span", { key: '979fc05e46a6c9220826efeac704f87f23f9ce49' }, h("slot", { key: '88929c8c561498c89755da6bd6d36819a7e6d390' })))));
     }
     static get is() { return "ds-notification"; }
     static get encapsulation() { return "shadow"; }
@@ -236,7 +230,7 @@ export class Notification {
             },
             "size": {
                 "type": "string",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "NotificationSize",
                     "resolved": "\"\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\" | undefined",
@@ -329,12 +323,6 @@ export class Notification {
         };
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "size",
-                "methodName": "sizeChanged"
-            }];
-    }
 }
 __decorate([
     Logger('notification'),
@@ -343,26 +331,26 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Notification.prototype, "createLogger", null);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Notification.prototype, "alert", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Notification.prototype, "closable", void 0);
 __decorate([
-    ValidateOneOf(...NOTIFICATION_COLORS),
+    OneOf(NOTIFICATION_COLORS),
     __metadata("design:type", String)
 ], Notification.prototype, "color", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Notification.prototype, "heading", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Notification.prototype, "noIcon", void 0);
 __decorate([
-    ValidateOneOf(...NOTIFICATION_SIZES),
+    OneOf(NOTIFICATION_SIZES),
     __metadata("design:type", String)
 ], Notification.prototype, "size", void 0);

package/dist/collection/components/number-input/number-input.host.css

@@ -1 +1 @@
-:host{--_input-family: var(--input-family, var(--mod-input-family, var(--ds-input-control-family)));--_input-weight: var(--input-weight, var(--mod-input-weight, var(--ds-input-control-weight)));--_input-line-height: var(--input-line-height, var(--mod-input-line-height, var(--ds-input-control-line-height)));--_input-size: var(--input-size, var(--mod-input-size, var(--ds-input-control-size-device)));--_input-color: var(--input-color, var(--mod-input-color, var(--ds-input-control-color-value-base)));--_input-placeholder: var(--input-placeholder, var(--mod-input-placeholder, var(--ds-input-control-color-placeholder-base)));--_input-container-background: var(--input-container-background, var(--mod-input-container-background, var(--ds-input-container-color-base-background)));--_input-container-border-color: var(--input-container-border-color, var(--mod-input-container-border-color, var(--ds-input-container-color-base-border)));--_input-container-border-width: var(--input-container-border-width, var(--mod-input-container-border-width, var(--ds-input-container-border-width)));--_input-container-radius: var(--input-container-radius, var(--mod-input-container-radius, var(--ds-input-container-radius)));--_input-container-hover-background: var(--input-container-hover-background, var(--mod-input-container-hover-background, var(--ds-input-container-color-hover-background)));--_input-container-active-background: var(--input-container-active-background, var(--mod-input-container-active-background, var(--ds-input-container-color-active-background)));--_input-container-focus-background: var(--input-container-focus-background, var(--mod-input-container-focus-background, var(--ds-input-container-color-focus-background)));--_input-container-hover-border: var(--input-container-hover-border, var(--mod-input-container-hover-border, var(--ds-input-container-color-hover-border)));--_input-container-active-border: var(--input-container-active-border, var(--mod-input-container-active-border, var(--ds-input-container-color-active-border)));--_input-container-focus-border: var(--input-container-focus-border, var(--mod-input-container-focus-border, var(--ds-input-container-color-focus-border)));--_input-label-color: var(--input-label-color, var(--mod-input-label-color, var(--ds-input-label-color-base)));--_input-label-family: var(--input-label-family, var(--mod-input-label-family, var(--ds-input-label-family)));--_input-label-weight: var(--input-label-weight, var(--mod-input-label-weight, var(--ds-input-label-weight)));--_input-label-line-height: var(--input-label-line-height, var(--mod-input-label-line-height, var(--ds-input-label-line-height)));--_input-label-size: var(--input-label-size, var(--mod-input-label-size, var(--ds-input-label-size-device)));--_input-description-color: var(--input-description-color, var(--mod-input-description-color, var(--ds-input-description-color-base)));--_input-description-family: var(--input-description-family, var(--mod-input-description-family, var(--ds-input-description-family)));--_input-description-weight: var(--input-description-weight, var(--mod-input-description-weight, var(--ds-input-description-weight)));--_input-description-line-height: var(--input-description-line-height, var(--mod-input-description-line-height, var(--ds-input-description-line-height)));--_input-description-size: var(--input-description-size, var(--mod-input-description-size, var(--ds-input-description-size-device)))}:host{position:relative;display:grid;gap:.25rem}:host #input{border:none;outline:none;box-shadow:none;position:relative;background:inherit;flex:1;color:var(--_input-color);font-family:var(--_input-family);font-weight:var(--_input-weight);font-size:var(--_input-size);line-height:var(--_input-line-height);border-radius:var(--_input-container-radius)}:host #input::placeholder{color:var(--_input-placeholder)}:host #input::-moz-placeholder{color:var(--_input-placeholder)}:host #input::-webkit-input-placeholder{color:var(--_input-placeholder)}:host #input:-moz-placeholder{color:var(--_input-placeholder)}:host #input:-ms-input-placeholder{color:var(--_input-placeholder)}:host #container{box-sizing:border-box;clear:both;display:flex;width:100%;align-items:center;min-height:3rem;gap:.25rem;padding-inline:.5rem;background:var(--_input-container-background);border:var(--_input-container-border-width) solid var(--_input-container-border-color);border-radius:var(--_input-container-radius)}@media(hover: hover)and (pointer: fine){:host #container:hover,:host #container.is-hovered{background:var(--_input-container-hover-background);border-color:var(--_input-container-hover-border)}}:host #container:active,:host #container.is-pressed{background:var(--_input-container-active-background);border-color:var(--_input-container-active-border)}:host #container:focus-within:not(:active),:host #container.is-focused:not(:active){background:var(--_input-container-focus-background);border-color:var(--_input-container-focus-border)}:host :where(fieldset){margin:0;padding:0;border:none}:host :where(legend){padding:0;float:left;width:100%}:host label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;color:var(--_input-label-color);font-family:var(--_input-label-family);font-weight:var(--_input-label-weight);font-size:var(--_input-label-size);line-height:var(--_input-label-line-height)}:host #description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;gap:.25rem;min-height:1.125rem;color:var(--_input-description-color);font-family:var(--_input-description-family);font-weight:var(--_input-description-weight);font-size:var(--_input-description-size);line-height:var(--_input-description-line-height)}:host #description ds-icon{--icon-color: var(--_input-description-color)}:host(.is-danger){--mod-input-container-border-color: var(--ds-input-container-color-danger-border);--mod-input-description-color: var(--ds-input-description-color-danger);--mod-input-container-hover-border: var(--ds-input-container-color-danger-border);--mod-input-container-active-border: var(--ds-input-container-color-danger-border)}:host(.is-success){--mod-input-container-border-color: var(--ds-input-container-color-success-border);--mod-input-description-color: var(--ds-input-description-color-success);--mod-input-container-hover-border: var(--ds-input-container-color-success-border);--mod-input-container-active-border: var(--ds-input-container-color-success-border)}:host(.is-warning){--mod-input-container-border-color: var(--ds-input-container-color-warning-border);--mod-input-description-color: var(--ds-input-description-color-warning);--mod-input-container-hover-border: var(--ds-input-container-color-warning-border);--mod-input-container-active-border: var(--ds-input-container-color-warning-border)}:host(.is-disabled),:host(.is-disabled) #label,:host(.is-disabled) #description,:host(.is-disabled) #input{pointer-events:none;cursor:default}:host(.is-disabled){--mod-input-container-background: var(--ds-input-container-color-disabled-background);--mod-input-container-border-color: var(--ds-input-container-color-disabled-border);--mod-input-label-color: var(--ds-input-label-color-disabled);--mod-input-description-color: var(--ds-input-description-color-disabled);--mod-input-color: var(--ds-input-control-color-value-disabled);--mod-input-placeholder: var(--ds-input-control-color-placeholder-disabled)}
+:host{--_form-field-gap: var(--form-field-gap, var(--mod-form-field-gap, 0.25rem));--_form-container-background: var(--form-container-background, var(--mod-form-container-background, var(--ds-form-container-color-base-background)));--_form-container-border-color: var(--form-container-border-color, var(--mod-form-container-border-color, var(--ds-form-container-color-base-border)));--_form-container-border-width: var(--form-container-border-width, var(--mod-form-container-border-width, var(--ds-form-container-border-width)));--_form-container-radius: var(--form-container-radius, var(--mod-form-container-radius, var(--ds-form-container-radius)));--_form-container-hover-background: var(--form-container-hover-background, var(--mod-form-container-hover-background, var(--ds-form-container-color-hover-background)));--_form-container-active-background: var(--form-container-active-background, var(--mod-form-container-active-background, var(--ds-form-container-color-active-background)));--_form-container-focus-background: var(--form-container-focus-background, var(--mod-form-container-focus-background, var(--ds-form-container-color-focus-background)));--_form-container-hover-border: var(--form-container-hover-border, var(--mod-form-container-hover-border, var(--ds-form-container-color-hover-border)));--_form-container-active-border: var(--form-container-active-border, var(--mod-form-container-active-border, var(--ds-form-container-color-active-border)));--_form-container-focus-border: var(--form-container-focus-border, var(--mod-form-container-focus-border, var(--ds-form-container-color-focus-border)));--_form-label-color: var(--form-label-color, var(--mod-form-label-color, var(--ds-form-label-color-base)));--_form-label-family: var(--form-label-family, var(--mod-form-label-family, var(--ds-form-label-family)));--_form-label-weight: var(--form-label-weight, var(--mod-form-label-weight, var(--ds-form-label-weight)));--_form-label-line-height: var(--form-label-line-height, var(--mod-form-label-line-height, var(--ds-form-label-line-height)));--_form-label-size: var(--form-label-size, var(--mod-form-label-size, var(--ds-form-label-size-device)));--_form-description-color: var(--form-description-color, var(--mod-form-description-color, var(--ds-form-description-color-base)));--_form-description-family: var(--form-description-family, var(--mod-form-description-family, var(--ds-form-description-family)));--_form-description-weight: var(--form-description-weight, var(--mod-form-description-weight, var(--ds-form-description-weight)));--_form-description-line-height: var(--form-description-line-height, var(--mod-form-description-line-height, var(--ds-form-description-line-height)));--_form-description-size: var(--form-description-size, var(--mod-form-description-size, var(--ds-form-description-size-device)));--_input-family: var(--input-family, var(--mod-input-family, var(--ds-form-control-family)));--_input-weight: var(--input-weight, var(--mod-input-weight, var(--ds-form-control-weight)));--_input-line-height: var(--input-line-height, var(--mod-input-line-height, var(--ds-form-control-line-height)));--_input-size: var(--input-size, var(--mod-input-size, var(--ds-form-control-size-device)));--_input-color: var(--input-color, var(--mod-input-color, var(--ds-form-control-color-value-base)));--_input-placeholder: var(--input-placeholder, var(--mod-input-placeholder, var(--ds-form-control-color-placeholder-base)))}:host{position:relative;display:grid;gap:var(--_form-field-gap)}:host #container{box-sizing:border-box;clear:both;display:flex;width:100%;align-items:center;min-height:3rem;gap:.25rem;padding-inline:.5rem;background:var(--_form-container-background);border:var(--_form-container-border-width) solid var(--_form-container-border-color);border-radius:var(--_form-container-radius)}@media(hover: hover)and (pointer: fine){:host #container:hover,:host #container.is-hovered{background:var(--_form-container-hover-background);border-color:var(--_form-container-hover-border)}}:host #container:active,:host #container.is-pressed{background:var(--_form-container-active-background);border-color:var(--_form-container-active-border)}:host #container:focus-within:not(:active),:host #container.is-focused:not(:active){background:var(--_form-container-focus-background);border-color:var(--_form-container-focus-border)}:host :where(fieldset){margin:0;padding:0;border:none}:host :where(legend){padding:0;float:left;width:100%}:host label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;color:var(--_form-label-color);font-family:var(--_form-label-family);font-weight:var(--_form-label-weight);font-size:var(--_form-label-size);line-height:var(--_form-label-line-height)}:host #description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;gap:.25rem;min-height:1.125rem;color:var(--_form-description-color);font-family:var(--_form-description-family);font-weight:var(--_form-description-weight);font-size:var(--_form-description-size);line-height:var(--_form-description-line-height)}:host #description ds-icon{--icon-color: var(--_form-description-color)}:host #input{border:none;outline:none;box-shadow:none;position:relative;background:inherit;flex:1;color:var(--_input-color);font-family:var(--_input-family);font-weight:var(--_input-weight);font-size:var(--_input-size);line-height:var(--_input-line-height);border-radius:var(--_input-container-radius)}:host #input::placeholder{color:var(--_input-placeholder)}:host #input::-moz-placeholder{color:var(--_input-placeholder)}:host #input::-webkit-input-placeholder{color:var(--_input-placeholder)}:host #input:-moz-placeholder{color:var(--_input-placeholder)}:host #input:-ms-input-placeholder{color:var(--_input-placeholder)}:host #inner{position:relative;display:grid;gap:var(--_form-field-gap)}:host(.is-danger){--mod-form-container-border-color: var(--ds-form-container-color-danger-border);--mod-form-description-color: var(--ds-form-description-color-danger);--mod-form-container-hover-border: var(--ds-form-container-color-danger-border);--mod-form-container-active-border: var(--ds-form-container-color-danger-border)}:host(.is-success){--mod-form-container-border-color: var(--ds-form-container-color-success-border);--mod-form-description-color: var(--ds-form-description-color-success);--mod-form-container-hover-border: var(--ds-form-container-color-success-border);--mod-form-container-active-border: var(--ds-form-container-color-success-border)}:host(.is-warning){--mod-form-container-border-color: var(--ds-form-container-color-warning-border);--mod-form-description-color: var(--ds-form-description-color-warning);--mod-form-container-hover-border: var(--ds-form-container-color-warning-border);--mod-form-container-active-border: var(--ds-form-container-color-warning-border)}:host(.is-disabled),:host(.is-disabled) #label,:host(.is-disabled) #description,:host(.is-disabled) #input{pointer-events:none;cursor:default}:host(.is-disabled){--mod-form-container-background: var(--ds-form-container-color-disabled-background);--mod-form-container-border-color: var(--ds-form-container-color-disabled-border);--mod-form-label-color: var(--ds-form-label-color-disabled);--mod-form-description-color: var(--ds-form-description-color-disabled);--mod-input-color: var(--ds-form-control-color-value-disabled);--mod-input-placeholder: var(--ds-form-control-color-placeholder-disabled)}

package/dist/collection/components/number-input/number-input.js

@@ -6,7 +6,7 @@ import { h, } from "@stencil/core";
 import isEmpty from "lodash/isEmpty";
 import isNaN from "lodash/isNaN";
 import isNil from "lodash/isNil";
-import { inheritAttributes, FormControl, stopEventBubbling, debounceEvent, Logger, getDecimalSeparator, getThousandSeparator, ValidateOneOf, ValidateType, setupValidation, } from "../../utils/index";
+import { inheritAttributes, FormControl, stopEventBubbling, debounceEvent, Logger, getDecimalSeparator, getThousandSeparator, hasValue, OneOf, Type, } from "../../utils/index";
 import { defaultConfig, ListenToConfig } from "../../global/index";
 import { isNotNumber, mapDecimalSeparator, toFixedNumber, toNumber, toUserFormattedNumber, validateKeyDown, } from "./number-input.utils";
 import { Field } from "../input/field.util";
@@ -195,7 +195,6 @@ export class NumberInput {
      * ------------------------------------------------------
      */
     connectedCallback() {
-        setupValidation(this);
         this.debounceChanged();
         this.control.connectedCallback();
     }
@@ -276,10 +275,10 @@ export class NumberInput {
         return this.lastValue;
     }
     createPattern() {
-        if (this.pattern)
+        if (hasValue(this.pattern))
             return this.pattern;
         let suffix = this.suffix || '';
-        if (suffix !== '')
+        if (hasValue(suffix))
             suffix = ` ${suffix}`;
         const thousandSeparator = getThousandSeparator();
         let decimalSeparator = getDecimalSeparator();
@@ -293,7 +292,7 @@ export class NumberInput {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Field, { key: '5c5ba92b21eec307179337c8a781513103c87d2a', disabled: this.disabled, color: this.color, invalid: this.invalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language }, h("input", Object.assign({ key: '006a70b2fcc4a88c1ecc124c957ab8dccb4f2a34', id: "input", part: "input", type: "text", inputMode: "decimal", pattern: this.inputPattern, ref: el => (this.control.nativeEl = el), "aria-describedby": "description", "aria-invalid": this.invalid === true ? 'true' : 'false', name: this.name, disabled: this.disabled, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, min: this.min, max: this.max, value: this.nativeInputValue, onInput: ev => this.handleInput(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onClick: ev => this.control.onClick(ev), onKeyDown: ev => this.handleKeydown(ev), onKeyPress: ev => this.dsKeyPress.emit(ev) }, this.inheritedAttributes))));
+        return (h(Field, { key: 'a7ccea6d0b98bd447e9fac8af180019eddbaff7b', disabled: this.disabled, color: this.color, invalid: this.invalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language }, h("input", Object.assign({ key: '76078e54d6f2dbfa6ad348e09b9987b741b8bdc1', id: "input", part: "input", type: "text", inputMode: "decimal", pattern: this.inputPattern, ref: el => (this.control.nativeEl = el), "aria-describedby": "description", "aria-invalid": this.invalid === true ? 'true' : 'false', name: this.name, disabled: this.disabled, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, min: this.min, max: this.max, value: this.nativeInputValue, onInput: ev => this.handleInput(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onClick: ev => this.control.onClick(ev), onKeyDown: ev => this.handleKeydown(ev), onKeyPress: ev => this.dsKeyPress.emit(ev) }, this.inheritedAttributes))));
     }
     static get is() { return "ds-number-input"; }
     static get encapsulation() { return "shadow"; }
@@ -553,7 +552,7 @@ export class NumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name",
                 "defaultValue": "this.numberInputId"
             },
@@ -969,75 +968,75 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], NumberInput.prototype, "createLogger", null);
 __decorate([
-    ValidateOneOf(...INPUT_COLORS),
+    OneOf(INPUT_COLORS),
     __metadata("design:type", String)
 ], NumberInput.prototype, "color", void 0);
 __decorate([
-    ValidateType('number'),
+    Type('number'),
     __metadata("design:type", Number)
 ], NumberInput.prototype, "debounce", void 0);
 __decorate([
-    ValidateType('number'),
+    Type('number'),
     __metadata("design:type", Number)
 ], NumberInput.prototype, "decimal", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], NumberInput.prototype, "description", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], NumberInput.prototype, "disabled", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], NumberInput.prototype, "exactNumber", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], NumberInput.prototype, "invalid", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], NumberInput.prototype, "invalidText", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], NumberInput.prototype, "label", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], NumberInput.prototype, "max", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], NumberInput.prototype, "min", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], NumberInput.prototype, "name", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], NumberInput.prototype, "onlyPositive", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], NumberInput.prototype, "pattern", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], NumberInput.prototype, "placeholder", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], NumberInput.prototype, "readonly", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], NumberInput.prototype, "required", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], NumberInput.prototype, "suffix", void 0);
 __decorate([

package/dist/collection/components/pagination/pagination.host.css

@@ -1 +1 @@
-.button{--_button-position: var(--button-position, var(--mod-button-position, static));--_button-top: var(--button-top, var(--mod-button-top));--_button-right: var(--button-right, var(--mod-button-right));--_button-bottom: var(--button-bottom, var(--mod-button-bottom));--_button-left: var(--button-left, var(--mod-button-left));position:var(--_button-position);top:var(--_button-top);right:var(--_button-right);bottom:var(--_button-bottom);left:var(--_button-left);--_button-m: var(--button-m, var(--mod-button-m, 0));--_button-my: var(--button-my, var(--mod-button-my));--_button-mx: var(--button-mx, var(--mod-button-mx));--_button-ml: var(--button-ml, var(--mod-button-ml));--_button-mr: var(--button-mr, var(--mod-button-mr));--_button-mt: var(--button-mt, var(--mod-button-mt));--_button-mb: var(--button-mb, var(--mod-button-mb));margin:var(--_button-m);margin-inline:var(--_button-mx);margin-block:var(--_button-my);margin-left:var(--_button-ml);margin-right:var(--_button-mr);margin-top:var(--_button-mt);margin-bottom:var(--_button-mb);--_button-font-family: var(--button-font-family, var(--mod-button-font-family, var(--ds-button-family)));--_button-font-weight: var(--button-font-weight, var(--mod-button-font-weight, var(--ds-button-weight)));--_button-font-size: var(--button-font-size, var(--mod-button-font-size, var(--ds-button-size-base)));--_button-line-height: var(--button-line-height, var(--mod-button-line-height, var(--ds-button-line-height)));--_button-radius: var(--button-radius, var(--mod-button-radius, var(--ds-button-radius-base)));--_button-color-text: var(--button-color-text, var(--mod-button-color-text, var(--ds-button-color-primary-base-text)));--_button-color-border: var(--button-color-border, var(--mod-button-color-border, var(--ds-button-color-primary-base-border)));--_button-color-background: var(--button-color-background, var(--mod-button-color-background, var(--ds-button-color-primary-base-background)));--_button-color-text-hover: var(--button-color-text-hover, var(--mod-button-color-text-hover, var(--ds-button-color-primary-hover-text)));--_button-color-border-hover: var(--button-color-border-hover, var(--mod-button-color-border-hover, var(--ds-button-color-primary-hover-border)));--_button-color-background-hover: var(--button-color-background-hover, var(--mod-button-color-background-hover, var(--ds-button-color-primary-hover-background)));--_button-color-text-active: var(--button-color-text-active, var(--mod-button-color-text-active, var(--ds-button-color-primary-active-text)));--_button-color-border-active: var(--button-color-border-active, var(--mod-button-color-border-active, var(--ds-button-color-primary-active-border)));--_button-color-background-active: var(--button-color-background-active, var(--mod-button-color-background-active, var(--ds-button-color-primary-active-background)));--_button-width: var(--button-width, var(--mod-button-width, var(--ds-button-width, fit-content)));--_button-border-style: var(--button-border-style, var(--mod-button-border-style, solid));--_button-gap: var(--button-gap, var(--mod-button-gap, 0.5rem));--_button-min-height: var(--button-min-height, var(--mod-button-min-height, 3rem));--_button-min-width: var(--button-min-width, var(--mod-button-min-width, 3rem));--_button-padding-inline: var(--button-padding-inline, var(--mod-button-padding-inline, 1.5rem));--_button-box-shadow: var(--button-box-shadow, var(--mod-button-box-shadow, none));--_button-text-shadow: var(--button-text-shadow, var(--mod-button-text-shadow, none))}.button{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@media print{.button{display:none !important}}.button{appearance:auto;position:relative;display:inline-flex;flex-wrap:nowrap;flex-shrink:0;justify-content:center;align-items:center;text-align:center;vertical-align:middle;cursor:pointer;word-break:normal;box-shadow:none;outline:none;box-sizing:border-box;text-decoration:none;user-select:none;box-shadow:var(--_button-box-shadow);text-shadow:var(--_button-text-shadow);touch-action:manipulation;transition-property:color,background-color,border-color,box-shadow,text-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);font-size:var(--_button-font-size);font-family:var(--_button-font-family);font-weight:var(--_button-font-weight);line-height:var(--_button-line-height);border-radius:var(--_button-radius);border-style:var(--_button-border-style);border-width:var(--ds-alias-border-width-base);width:var(--_button-width, fit-content);min-width:var(--_button-min-width);min-height:var(--_button-min-height);gap:var(--_button-gap);padding-inline:var(--_button-padding-inline);background-color:var(--_button-color-background);color:var(--_button-color-text);border-color:var(--_button-color-border)}.button::-moz-focus-inner{border:0}.button{--spinner-size: 1.5rem;--icon-color: var(--_button-color-text)}.button:focus,.button:active{outline:none}@media(hover: hover)and (pointer: fine){.button:focus-visible:not(:active),.button.is-focused:not(:active){box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--ds-alias-interaction-focus-color-base) 0 0 0 5px !important}}@media(hover: hover)and (pointer: fine){.button:hover,.button.is-hovered{--icon-color: var(--_button-color-text-hover);color:var(--_button-color-text-hover);background-color:var(--_button-color-background-hover);border-color:var(--_button-color-border-hover)}}.button:active,.button.is-pressed{--icon-color: var(--_button-color-text-active);background-color:var(--_button-color-background-active);color:var(--_button-color-text-active);border-color:var(--_button-color-border-active);translate:0 .5px}.button.is-wide{width:100%;flex:1 1 auto}.button.is-link{text-decoration:underline;text-underline-offset:.25rem;text-decoration-thickness:var(--ds-link-border-width)}.button .badge,.button ds-badge{--badge-position: absolute;--badge-top: -0.5rem;--badge-right: -0.5rem}.button.is-primary:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-primary-base-text);--mod-button-color-background: var(--ds-button-color-primary-base-background);--mod-button-color-border: var(--ds-button-color-primary-base-border);--mod-button-color-text-hover: var(--ds-button-color-primary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-primary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-primary-hover-border);--mod-button-color-text-active: var(--ds-button-color-primary-active-text);--mod-button-color-background-active: var(--ds-button-color-primary-active-background);--mod-button-color-border-active: var(--ds-button-color-primary-active-border)}.button.is-secondary:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-secondary-base-text);--mod-button-color-background: var(--ds-button-color-secondary-base-background);--mod-button-color-border: var(--ds-button-color-secondary-base-border);--mod-button-color-text-hover: var(--ds-button-color-secondary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-secondary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-secondary-hover-border);--mod-button-color-text-active: var(--ds-button-color-secondary-active-text);--mod-button-color-background-active: var(--ds-button-color-secondary-active-background);--mod-button-color-border-active: var(--ds-button-color-secondary-active-border)}.button.is-tertiary:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-tertiary-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-active-border)}.button.is-tertiary-yellow:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-tertiary-yellow-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-yellow-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-yellow-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-yellow-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-yellow-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-yellow-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-yellow-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-yellow-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-yellow-active-border)}.button.is-tertiary-purple:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-tertiary-purple-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-purple-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-purple-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-purple-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-purple-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-purple-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-purple-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-purple-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-purple-active-border)}.button.is-tertiary-green:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-tertiary-green-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-green-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-green-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-green-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-green-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-green-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-green-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-green-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-green-active-border)}.button.is-tertiary-red:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-tertiary-red-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-red-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-red-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-red-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-red-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-red-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-red-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-red-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-red-active-border)}.button.is-info:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-info-base-text);--mod-button-color-background: var(--ds-button-color-info-base-background);--mod-button-color-border: var(--ds-button-color-info-base-border);--mod-button-color-text-hover: var(--ds-button-color-info-hover-text);--mod-button-color-background-hover: var(--ds-button-color-info-hover-background);--mod-button-color-border-hover: var(--ds-button-color-info-hover-border);--mod-button-color-text-active: var(--ds-button-color-info-active-text);--mod-button-color-background-active: var(--ds-button-color-info-active-background);--mod-button-color-border-active: var(--ds-button-color-info-active-border)}.button.is-success:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-success-base-text);--mod-button-color-background: var(--ds-button-color-success-base-background);--mod-button-color-border: var(--ds-button-color-success-base-border);--mod-button-color-text-hover: var(--ds-button-color-success-hover-text);--mod-button-color-background-hover: var(--ds-button-color-success-hover-background);--mod-button-color-border-hover: var(--ds-button-color-success-hover-border);--mod-button-color-text-active: var(--ds-button-color-success-active-text);--mod-button-color-background-active: var(--ds-button-color-success-active-background);--mod-button-color-border-active: var(--ds-button-color-success-active-border)}.button.is-warning:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-warning-base-text);--mod-button-color-background: var(--ds-button-color-warning-base-background);--mod-button-color-border: var(--ds-button-color-warning-base-border);--mod-button-color-text-hover: var(--ds-button-color-warning-hover-text);--mod-button-color-background-hover: var(--ds-button-color-warning-hover-background);--mod-button-color-border-hover: var(--ds-button-color-warning-hover-border);--mod-button-color-text-active: var(--ds-button-color-warning-active-text);--mod-button-color-background-active: var(--ds-button-color-warning-active-background);--mod-button-color-border-active: var(--ds-button-color-warning-active-border)}.button.is-danger:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-danger-base-text);--mod-button-color-background: var(--ds-button-color-danger-base-background);--mod-button-color-border: var(--ds-button-color-danger-base-border);--mod-button-color-text-hover: var(--ds-button-color-danger-hover-text);--mod-button-color-background-hover: var(--ds-button-color-danger-hover-background);--mod-button-color-border-hover: var(--ds-button-color-danger-hover-border);--mod-button-color-text-active: var(--ds-button-color-danger-active-text);--mod-button-color-background-active: var(--ds-button-color-danger-active-background);--mod-button-color-border-active: var(--ds-button-color-danger-active-border)}.button.is-link:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-link-base-text);--mod-button-color-background: var(--ds-button-color-link-base-background);--mod-button-color-border: var(--ds-button-color-link-base-border);--mod-button-color-text-hover: var(--ds-button-color-link-hover-text);--mod-button-color-background-hover: var(--ds-button-color-link-hover-background);--mod-button-color-border-hover: var(--ds-button-color-link-hover-border);--mod-button-color-text-active: var(--ds-button-color-link-active-text);--mod-button-color-background-active: var(--ds-button-color-link-active-background);--mod-button-color-border-active: var(--ds-button-color-link-active-border)}.button.is-text:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-text-base-text);--mod-button-color-background: var(--ds-button-color-text-base-background);--mod-button-color-border: var(--ds-button-color-text-base-border);--mod-button-color-text-hover: var(--ds-button-color-text-hover-text);--mod-button-color-background-hover: var(--ds-button-color-text-hover-background);--mod-button-color-border-hover: var(--ds-button-color-text-hover-border);--mod-button-color-text-active: var(--ds-button-color-text-active-text);--mod-button-color-background-active: var(--ds-button-color-text-active-background);--mod-button-color-border-active: var(--ds-button-color-text-active-border)}.button.is-primary.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-tertiary-yellow.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-tertiary-purple.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-tertiary-green.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-tertiary-red.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-info.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-success.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-warning.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-danger.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-secondary.is-inverted:not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-secondary-base-text);--mod-button-color-background: var(--ds-button-color-inverted-secondary-base-background);--mod-button-color-border: var(--ds-button-color-inverted-secondary-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-secondary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-secondary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-secondary-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-secondary-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-secondary-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-secondary-active-border)}.button.is-tertiary.is-inverted:not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-tertiary-base-text);--mod-button-color-background: var(--ds-button-color-inverted-tertiary-base-background);--mod-button-color-border: var(--ds-button-color-inverted-tertiary-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-tertiary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-tertiary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-tertiary-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-tertiary-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-tertiary-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-tertiary-active-border)}.button.is-text.is-inverted:not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-text-base-text);--mod-button-color-background: var(--ds-button-color-inverted-text-base-background);--mod-button-color-border: var(--ds-button-color-inverted-text-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-text-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-text-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-text-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-text-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-text-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-text-active-border)}.button.is-link.is-inverted:not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-link-base-text);--mod-button-color-background: var(--ds-button-color-inverted-link-base-background);--mod-button-color-border: var(--ds-button-color-inverted-link-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-link-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-link-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-link-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-link-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-link-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-link-active-border)}.button.is-sm,.button.is-small{--mod-button-font-size: var(--ds-button-size-sm);--mod-button-min-height: 2rem;--mod-button-min-width: 2rem;--mod-button-padding-inline: 0.75rem}.button.is-lg,.button.is-large{--mod-button-font-size: var(--ds-button-size-lg);--mod-button-min-height: 3.5rem;--mod-button-min-width: 3.5rem;--mod-button-padding-inline: 1.5rem}.button.is-xl{--mod-button-font-size: var(--ds-button-size-xl);--mod-button-min-height: 5.5rem;--mod-button-min-width: 5.5rem;--mod-button-padding-inline: 1.5rem}.button.is-flat{--mod-button-padding-inline: 0;--mod-button-min-height: 1.75rem}.button.is-rounded{--mod-button-radius: var(--ds-button-radius-rounded)}.button.is-square:not(.is-sm),.button.is-square:not(.is-small){--mod-button-padding-inline: 0;--mod-button-gap: 0;--mod-button-min-height: 3rem;--mod-button-min-width: 3rem;--icon-size: 1.5rem}.button.is-square.is-sm,.button.is-square.is-small{--mod-button-padding-inline: 0;--mod-button-gap: 0;--mod-button-min-height: 2rem;--mod-button-min-width: 2rem;--icon-size: var(--ds-icon-size-sm)}.button.is-circle:not(.is-sm),.button.is-circle:not(.is-small){--mod-button-radius: var(--ds-button-radius-rounded);--mod-button-padding-inline: 0;--mod-button-gap: 0;--mod-button-min-height: 3rem;--mod-button-min-width: 3rem;--icon-size: 1.5rem}.button.is-circle.is-small,.button.is-circle.is-sm{--mod-button-radius: var(--ds-button-radius-rounded);--mod-button-padding-inline: 0;--mod-button-gap: 0;--mod-button-min-height: 2rem;--mod-button-min-width: 2rem;--icon-size: var(--ds-icon-size-sm)}.button.is-tertiary-purple.is-dashed{--mod-button-border-style: dashed;--icon-shape: var(--_button-color-border);--mod-button-color-text: var(--ds-button-color-tertiary-purple-dashed-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-purple-dashed-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-purple-dashed-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-purple-dashed-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-purple-dashed-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-purple-dashed-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-purple-dashed-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-purple-dashed-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-purple-dashed-active-border)}.button.is-tertiary-red.is-dashed{--mod-button-border-style: dashed;--icon-shape: var(--_button-color-border);--mod-button-color-text: var(--ds-button-color-tertiary-red-dashed-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-red-dashed-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-red-dashed-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-red-dashed-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-red-dashed-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-red-dashed-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-red-dashed-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-red-dashed-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-red-dashed-active-border)}.button.is-tertiary-green.is-dashed{--mod-button-border-style: dashed;--icon-shape: var(--_button-color-border);--mod-button-color-text: var(--ds-button-color-tertiary-green-dashed-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-green-dashed-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-green-dashed-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-green-dashed-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-green-dashed-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-green-dashed-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-green-dashed-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-green-dashed-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-green-dashed-active-border)}.button.is-tertiary-yellow.is-dashed{--mod-button-border-style: dashed;--icon-shape: var(--_button-color-border);--mod-button-color-text: var(--ds-button-color-tertiary-yellow-dashed-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-yellow-dashed-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-yellow-dashed-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-yellow-dashed-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-yellow-dashed-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-yellow-dashed-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-yellow-dashed-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-yellow-dashed-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-yellow-dashed-active-border)}.button.has-shadow:not(.is-link,.is-text){--mod-button-box-shadow: var(--ds-alias-shadow-box-base)}.button.is-text.has-shadow,.button.is-link.has-shadow{--mod-button-text-shadow: var(--ds-alias-shadow-text)}.button.has-no-wrap{display:inline-block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:stretch}.button:is(input[type=checkbox],input[type=radio])[aria-label]::after{--_button-content: attr(aria-label);content:var(--_button-content)}.button:is(input[type=checkbox],input[type=radio]){--mod-button-color-text: var(--ds-button-color-secondary-base-text);--mod-button-color-background: var(--ds-button-color-secondary-base-background);--mod-button-color-border: var(--ds-button-color-secondary-base-border);--mod-button-color-text-hover: var(--ds-button-color-secondary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-secondary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-secondary-hover-border);--mod-button-color-text-active: var(--ds-button-color-secondary-active-text);--mod-button-color-background-active: var(--ds-button-color-secondary-active-background);--mod-button-color-border-active: var(--ds-button-color-secondary-active-border);appearance:none;vertical-align:middle}.button:is(input[type=checkbox],input[type=radio]):where(input:checked){--mod-button-color-text: var(--ds-button-color-primary-base-text);--mod-button-color-background: var(--ds-button-color-primary-base-background);--mod-button-color-border: var(--ds-button-color-primary-base-border);--mod-button-color-text-hover: var(--ds-button-color-primary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-primary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-primary-hover-border);--mod-button-color-text-active: var(--ds-button-color-primary-active-text);--mod-button-color-background-active: var(--ds-button-color-primary-active-background);--mod-button-color-border-active: var(--ds-button-color-primary-active-border);isolation:isolate}fieldset[disabled] .button,fieldset[disabled] .button:hover,fieldset[disabled] .button.is-hovered,fieldset[disabled] .button:active,fieldset[disabled] .button.is-pressed,fieldset[disabled] .button:focus,fieldset[disabled] .button.is-focused,.button.is-loading,.button.is-loading:hover,.button.is-loading.is-hovered,.button.is-loading:active,.button.is-loading.is-pressed,.button.is-loading:focus,.button.is-loading.is-focused,.button.is-disabled,.button.is-disabled:hover,.button.is-disabled.is-hovered,.button.is-disabled:active,.button.is-disabled.is-pressed,.button.is-disabled:focus,.button.is-disabled.is-focused,.button.is-inverted.is-disabled,.button.is-inverted.is-disabled:hover,.button.is-inverted.is-disabled.is-hovered,.button.is-inverted.is-disabled:active,.button.is-inverted.is-disabled.is-pressed,.button.is-inverted.is-disabled:focus,.button.is-inverted.is-disabled.is-focused,.button[disabled],.button[disabled]:hover,.button[disabled].is-hovered,.button[disabled]:active,.button[disabled].is-pressed,.button[disabled]:focus,.button[disabled].is-focused{pointer-events:none;opacity:1;box-shadow:none;text-decoration:none;cursor:default;translate:0 0;background-color:var(--ds-button-color-disabled-base-background);border-color:var(--ds-button-color-disabled-base-border);color:var(--ds-button-color-disabled-base-text)}fieldset[disabled] .button>ds-icon,fieldset[disabled] .button:hover>ds-icon,fieldset[disabled] .button.is-hovered>ds-icon,fieldset[disabled] .button:active>ds-icon,fieldset[disabled] .button.is-pressed>ds-icon,fieldset[disabled] .button:focus>ds-icon,fieldset[disabled] .button.is-focused>ds-icon,.button.is-loading>ds-icon,.button.is-loading:hover>ds-icon,.button.is-loading.is-hovered>ds-icon,.button.is-loading:active>ds-icon,.button.is-loading.is-pressed>ds-icon,.button.is-loading:focus>ds-icon,.button.is-loading.is-focused>ds-icon,.button.is-disabled>ds-icon,.button.is-disabled:hover>ds-icon,.button.is-disabled.is-hovered>ds-icon,.button.is-disabled:active>ds-icon,.button.is-disabled.is-pressed>ds-icon,.button.is-disabled:focus>ds-icon,.button.is-disabled.is-focused>ds-icon,.button.is-inverted.is-disabled>ds-icon,.button.is-inverted.is-disabled:hover>ds-icon,.button.is-inverted.is-disabled.is-hovered>ds-icon,.button.is-inverted.is-disabled:active>ds-icon,.button.is-inverted.is-disabled.is-pressed>ds-icon,.button.is-inverted.is-disabled:focus>ds-icon,.button.is-inverted.is-disabled.is-focused>ds-icon,.button[disabled]>ds-icon,.button[disabled]:hover>ds-icon,.button[disabled].is-hovered>ds-icon,.button[disabled]:active>ds-icon,.button[disabled].is-pressed>ds-icon,.button[disabled]:focus>ds-icon,.button[disabled].is-focused>ds-icon{--icon-color: var(--ds-button-color-disabled-base-text)}fieldset[disabled] .button>ds-spinner,fieldset[disabled] .button:hover>ds-spinner,fieldset[disabled] .button.is-hovered>ds-spinner,fieldset[disabled] .button:active>ds-spinner,fieldset[disabled] .button.is-pressed>ds-spinner,fieldset[disabled] .button:focus>ds-spinner,fieldset[disabled] .button.is-focused>ds-spinner,.button.is-loading>ds-spinner,.button.is-loading:hover>ds-spinner,.button.is-loading.is-hovered>ds-spinner,.button.is-loading:active>ds-spinner,.button.is-loading.is-pressed>ds-spinner,.button.is-loading:focus>ds-spinner,.button.is-loading.is-focused>ds-spinner,.button.is-disabled>ds-spinner,.button.is-disabled:hover>ds-spinner,.button.is-disabled.is-hovered>ds-spinner,.button.is-disabled:active>ds-spinner,.button.is-disabled.is-pressed>ds-spinner,.button.is-disabled:focus>ds-spinner,.button.is-disabled.is-focused>ds-spinner,.button.is-inverted.is-disabled>ds-spinner,.button.is-inverted.is-disabled:hover>ds-spinner,.button.is-inverted.is-disabled.is-hovered>ds-spinner,.button.is-inverted.is-disabled:active>ds-spinner,.button.is-inverted.is-disabled.is-pressed>ds-spinner,.button.is-inverted.is-disabled:focus>ds-spinner,.button.is-inverted.is-disabled.is-focused>ds-spinner,.button[disabled]>ds-spinner,.button[disabled]:hover>ds-spinner,.button[disabled].is-hovered>ds-spinner,.button[disabled]:active>ds-spinner,.button[disabled].is-pressed>ds-spinner,.button[disabled]:focus>ds-spinner,.button[disabled].is-focused>ds-spinner{--spinner-color: var(--ds-button-color-disabled-base-text)}fieldset[disabled] .button>ds-spinner.is-circle,fieldset[disabled] .button:hover>ds-spinner.is-circle,fieldset[disabled] .button.is-hovered>ds-spinner.is-circle,fieldset[disabled] .button:active>ds-spinner.is-circle,fieldset[disabled] .button.is-pressed>ds-spinner.is-circle,fieldset[disabled] .button:focus>ds-spinner.is-circle,fieldset[disabled] .button.is-focused>ds-spinner.is-circle,.button.is-loading>ds-spinner.is-circle,.button.is-loading:hover>ds-spinner.is-circle,.button.is-loading.is-hovered>ds-spinner.is-circle,.button.is-loading:active>ds-spinner.is-circle,.button.is-loading.is-pressed>ds-spinner.is-circle,.button.is-loading:focus>ds-spinner.is-circle,.button.is-loading.is-focused>ds-spinner.is-circle,.button.is-disabled>ds-spinner.is-circle,.button.is-disabled:hover>ds-spinner.is-circle,.button.is-disabled.is-hovered>ds-spinner.is-circle,.button.is-disabled:active>ds-spinner.is-circle,.button.is-disabled.is-pressed>ds-spinner.is-circle,.button.is-disabled:focus>ds-spinner.is-circle,.button.is-disabled.is-focused>ds-spinner.is-circle,.button.is-inverted.is-disabled>ds-spinner.is-circle,.button.is-inverted.is-disabled:hover>ds-spinner.is-circle,.button.is-inverted.is-disabled.is-hovered>ds-spinner.is-circle,.button.is-inverted.is-disabled:active>ds-spinner.is-circle,.button.is-inverted.is-disabled.is-pressed>ds-spinner.is-circle,.button.is-inverted.is-disabled:focus>ds-spinner.is-circle,.button.is-inverted.is-disabled.is-focused>ds-spinner.is-circle,.button[disabled]>ds-spinner.is-circle,.button[disabled]:hover>ds-spinner.is-circle,.button[disabled].is-hovered>ds-spinner.is-circle,.button[disabled]:active>ds-spinner.is-circle,.button[disabled].is-pressed>ds-spinner.is-circle,.button[disabled]:focus>ds-spinner.is-circle,.button[disabled].is-focused>ds-spinner.is-circle{--spinner-circle-color-border-background: var(--ds-global-color-grey-4);--spinner-circle-color-border-progress: var(--ds-button-color-disabled-base-text)}.buttons{--_buttons-align-items: var(--buttons-align-items, var(--mod-buttons-align-items, center));--_buttons-justify-content: var(--buttons-justify-content, var(--mod-buttons-justify-content, flex-start));--_buttons-direction: var(--buttons-direction, var(--mod-buttons-direction, row));--_buttons-gap: var(--buttons-gap, var(--mod-buttons-gap, 0.25rem));--_buttons-wrap: var(--buttons-wrap, var(--mod-buttons-wrap, wrap));display:flex;gap:var(--_buttons-gap);flex-direction:var(--_buttons-direction);align-items:var(--_buttons-align-items);justify-content:var(--_buttons-justify-content);flex-wrap:var(--_buttons-wrap);width:100%}@media screen and (max-width: 768px){.buttons ::slotted(.button:not(.is-square,.is-circle)),.buttons .button:not(.is-square,.is-circle){flex:1 1 auto}.buttons ::slotted(ds-button:not(.is-square,.is-circle)),.buttons ds-button:not(.is-square,.is-circle){flex:1 1 auto;--button-width: 100%}}.buttons.as-col-reverse{--mod-buttons-direction: column-reverse}.buttons.as-row-reverse{--mod-buttons-direction: row-reverse}.buttons.as-row{--mod-buttons-direction: row}.buttons.as-col{--mod-buttons-direction: column}@media screen and (max-width: 768px){.buttons.as-col ::slotted(.button),.buttons.as-col .button,.buttons.as-col ::slotted(ds-button),.buttons.as-col ds-button,.buttons.as-col-reverse ::slotted(.button),.buttons.as-col-reverse .button,.buttons.as-col-reverse ::slotted(ds-button),.buttons.as-col-reverse ds-button{width:100%}}@media screen and (min-width: 769px){.buttons.as-col.is-center,.buttons.as-col.is-centered,.buttons.as-col-reverse.is-center,.buttons.as-col-reverse.is-centered{--mod-buttons-align-items: center}.buttons.as-col.is-left,.buttons.as-col-reverse.is-left{--mod-buttons-align-items: flex-start}.buttons.as-col.is-right,.buttons.as-col-reverse.is-right{--mod-buttons-align-items: flex-end}}@media screen and (min-width: 769px){.buttons.as-row.is-center,.buttons.as-row.is-centered,.buttons.is-center:not(.as-col),.buttons.is-centered:not(.as-col){--mod-buttons-justify-content: center}.buttons.as-row.is-left,.buttons.is-left:not(.as-col){--mod-buttons-justify-content: flex-start}.buttons.as-row.is-right,.buttons.is-right:not(.as-col){--mod-buttons-justify-content: flex-end}}@media screen and (min-width: 769px){.buttons.is-wide ::slotted(.button:not(.is-square,.is-circle)),.buttons.is-wide .button:not(.is-square,.is-circle),.buttons.is-wide ::slotted(ds-button:not(.is-square,.is-circle)),.buttons.is-wide ds-button:not(.is-square,.is-circle){flex:1 1 auto;--button-width: 100%}}:host{--_pagination-position: var(--pagination-position, var(--mod-pagination-position, static));--_pagination-top: var(--pagination-top, var(--mod-pagination-top));--_pagination-right: var(--pagination-right, var(--mod-pagination-right));--_pagination-bottom: var(--pagination-bottom, var(--mod-pagination-bottom));--_pagination-left: var(--pagination-left, var(--mod-pagination-left));position:var(--_pagination-position);top:var(--_pagination-top);right:var(--_pagination-right);bottom:var(--_pagination-bottom);left:var(--_pagination-left);--_pagination-m: var(--pagination-m, var(--mod-pagination-m, 0));--_pagination-my: var(--pagination-my, var(--mod-pagination-my));--_pagination-mx: var(--pagination-mx, var(--mod-pagination-mx));--_pagination-ml: var(--pagination-ml, var(--mod-pagination-ml));--_pagination-mr: var(--pagination-mr, var(--mod-pagination-mr));--_pagination-mt: var(--pagination-mt, var(--mod-pagination-mt));--_pagination-mb: var(--pagination-mb, var(--mod-pagination-mb));margin:var(--_pagination-m);margin-inline:var(--_pagination-mx);margin-block:var(--_pagination-my);margin-left:var(--_pagination-ml);margin-right:var(--_pagination-mr);margin-top:var(--_pagination-mt);margin-bottom:var(--_pagination-mb);--_pagination-gap-mobile: var(--pagination-gap-mobile, var(--mod-pagination-gap-mobile, var(--ds-pagination-gap-mobile)));--_pagination-gap-tablet: var(--pagination-gap-tablet, var(--mod-pagination-gap-tablet, var(--ds-pagination-gap-tablet)));--_pagination-gap-desktop: var(--pagination-gap-desktop, var(--mod-pagination-gap-desktop, var(--ds-pagination-gap-desktop)));--_pagination-dots-background: var(--pagination-dots-background, var(--mod-pagination-dots-background, var(--ds-pagination-dots-background)));--_pagination-dots-radius: var(--pagination-dots-radius, var(--mod-pagination-dots-radius, var(--ds-pagination-dots-radius)));--_pagination-disabled-text-color: var(--pagination-disabled-text-color, var(--mod-pagination-disabled-text-color, var(--ds-pagination-disabled-text-color)));--_pagination-elevation-sticky: var(--pagination-elevation-sticky, var(--mod-pagination-elevation-sticky, var(--ds-pagination-elevation-sticky)));--_pagination-text-weight: var(--pagination-text-weight, var(--mod-pagination-text-weight, var(--ds-pagination-text-weight)));--_pagination-dots-inactive-color: var(--pagination-dots-inactive-color, var(--mod-pagination-dots-inactive-color, var(--ds-pagination-dots-inactive-color)));--_pagination-dots-active-color: var(--pagination-dots-active-color, var(--mod-pagination-dots-active-color, var(--ds-pagination-dots-active-color)))}:host{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;display:block}:host #nav{display:flex;align-items:center;justify-content:center;text-align:center}:host #nav ul{display:flex;align-items:center;justify-content:center;gap:var(--_pagination-gap-mobile);order:2;width:unset;text-align:center}@media screen and (min-width: 769px){:host #nav ul{gap:var(--_pagination-gap-tablet)}}@media screen and (min-width: 1024px){:host #nav ul{gap:var(--_pagination-gap-desktop)}}:host #previous{order:1}:host #next{order:3}:host #ellipsis{width:2rem;font-weight:700}@media screen and (min-width: 769px){:host #ellipsis{width:3rem}}:host button.is-disabled.is-text{background:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}:host(.is-sticky){position:sticky;z-index:var(--_pagination-elevation-sticky)}:host(.is-disabled){pointer-events:none}:host(.is-disabled) #ellipsis{color:var(--_pagination-disabled-text-color)}:host(.is-size-small){--mod-pagination-gap: 0.125rem}:host(.is-size-small) #ellipsis{width:2rem}:host(.is-align-start) #nav{justify-content:flex-start}:host(.is-align-end) #nav{justify-content:flex-end}:host(.is-variant-dots) .dots{order:2;max-width:88px;min-width:63px;min-height:2rem;margin:0 20px 0 !important;background:var(--_pagination-dots-background);border-radius:var(--_pagination-dots-radius);display:flex;justify-content:center;align-items:center;gap:.125rem}:host(.is-variant-dots) .dots li{display:flex;justify-content:center;align-items:center}:host(.is-variant-dots) .dots strong{font-weight:var(--_pagination-text-weight)}:host(.is-variant-dots) .dots button.dot{cursor:pointer;width:.625rem;height:.625rem;border-radius:50%;background-color:var(--_pagination-dots-inactive-color);border:none;padding:0}:host(.is-variant-dots) .dots button.dot.is-active{background-color:var(--_pagination-dots-active-color)}
+.button{--_button-position: var(--button-position, var(--mod-button-position, static));--_button-top: var(--button-top, var(--mod-button-top));--_button-right: var(--button-right, var(--mod-button-right));--_button-bottom: var(--button-bottom, var(--mod-button-bottom));--_button-left: var(--button-left, var(--mod-button-left));position:var(--_button-position);top:var(--_button-top);right:var(--_button-right);bottom:var(--_button-bottom);left:var(--_button-left);--_button-m: var(--button-m, var(--mod-button-m, 0));--_button-my: var(--button-my, var(--mod-button-my));--_button-mx: var(--button-mx, var(--mod-button-mx));--_button-ml: var(--button-ml, var(--mod-button-ml));--_button-mr: var(--button-mr, var(--mod-button-mr));--_button-mt: var(--button-mt, var(--mod-button-mt));--_button-mb: var(--button-mb, var(--mod-button-mb));margin:var(--_button-m);margin-inline:var(--_button-mx);margin-block:var(--_button-my);margin-left:var(--_button-ml);margin-right:var(--_button-mr);margin-top:var(--_button-mt);margin-bottom:var(--_button-mb);--_button-font-family: var(--button-font-family, var(--mod-button-font-family, var(--ds-button-family)));--_button-font-weight: var(--button-font-weight, var(--mod-button-font-weight, var(--ds-button-weight)));--_button-font-size: var(--button-font-size, var(--mod-button-font-size, var(--ds-button-size-base)));--_button-line-height: var(--button-line-height, var(--mod-button-line-height, var(--ds-button-line-height)));--_button-radius: var(--button-radius, var(--mod-button-radius, var(--ds-button-radius-base)));--_button-color-text: var(--button-color-text, var(--mod-button-color-text, var(--ds-button-color-primary-base-text)));--_button-color-border: var(--button-color-border, var(--mod-button-color-border, var(--ds-button-color-primary-base-border)));--_button-color-background: var(--button-color-background, var(--mod-button-color-background, var(--ds-button-color-primary-base-background)));--_button-color-text-hover: var(--button-color-text-hover, var(--mod-button-color-text-hover, var(--ds-button-color-primary-hover-text)));--_button-color-border-hover: var(--button-color-border-hover, var(--mod-button-color-border-hover, var(--ds-button-color-primary-hover-border)));--_button-color-background-hover: var(--button-color-background-hover, var(--mod-button-color-background-hover, var(--ds-button-color-primary-hover-background)));--_button-color-text-active: var(--button-color-text-active, var(--mod-button-color-text-active, var(--ds-button-color-primary-active-text)));--_button-color-border-active: var(--button-color-border-active, var(--mod-button-color-border-active, var(--ds-button-color-primary-active-border)));--_button-color-background-active: var(--button-color-background-active, var(--mod-button-color-background-active, var(--ds-button-color-primary-active-background)));--_button-width: var(--button-width, var(--mod-button-width, var(--ds-button-width, fit-content)));--_button-border-style: var(--button-border-style, var(--mod-button-border-style, solid));--_button-gap: var(--button-gap, var(--mod-button-gap, 0.5rem));--_button-min-height: var(--button-min-height, var(--mod-button-min-height, 3rem));--_button-min-width: var(--button-min-width, var(--mod-button-min-width, 3rem));--_button-padding-inline: var(--button-padding-inline, var(--mod-button-padding-inline, 1.5rem));--_button-box-shadow: var(--button-box-shadow, var(--mod-button-box-shadow, none));--_button-text-shadow: var(--button-text-shadow, var(--mod-button-text-shadow, none));--_button-focus-shadow: var(--button-focus-shadow, var(--mod-button-focus-shadow, var(--ds-alias-interaction-focus-color-base)))}.button{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@media print{.button{display:none !important}}.button{appearance:auto;position:relative;display:inline-flex;flex-wrap:nowrap;flex-shrink:0;justify-content:center;align-items:center;text-align:center;vertical-align:middle;cursor:pointer;word-break:normal;box-shadow:none;outline:none;box-sizing:border-box;text-decoration:none;user-select:none;box-shadow:var(--_button-box-shadow);text-shadow:var(--_button-text-shadow);touch-action:manipulation;transition-property:color,background-color,border-color,box-shadow,text-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);font-size:var(--_button-font-size);font-family:var(--_button-font-family);font-weight:var(--_button-font-weight);line-height:var(--_button-line-height);border-radius:var(--_button-radius);border-style:var(--_button-border-style);border-width:var(--ds-alias-border-width-base);width:var(--_button-width, fit-content);min-width:var(--_button-min-width);min-height:var(--_button-min-height);gap:var(--_button-gap);padding-inline:var(--_button-padding-inline);background-color:var(--_button-color-background);color:var(--_button-color-text);border-color:var(--_button-color-border)}.button::-moz-focus-inner{border:0}.button{--spinner-size: 1.5rem;--icon-color: var(--_button-color-text)}.button:focus,.button:active{outline:none}@media(hover: hover)and (pointer: fine){.button:focus-visible:not(:active),.button.is-focused:not(:active){box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_button-focus-shadow) 0 0 0 5px !important}}@media(hover: hover)and (pointer: fine){.button:hover,.button.is-hovered{--icon-color: var(--_button-color-text-hover);color:var(--_button-color-text-hover);background-color:var(--_button-color-background-hover);border-color:var(--_button-color-border-hover)}}.button:active,.button.is-pressed{--icon-color: var(--_button-color-text-active);background-color:var(--_button-color-background-active);color:var(--_button-color-text-active);border-color:var(--_button-color-border-active);translate:0 .5px}.button.is-wide{width:100%;flex:1 1 auto}.button.is-link{text-decoration:underline;text-underline-offset:.25rem;text-decoration-thickness:var(--ds-link-border-width)}.button .badge,.button ds-badge{--badge-position: absolute;--badge-top: -0.5rem;--badge-right: -0.5rem}.button.is-primary:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-primary-base-text);--mod-button-color-background: var(--ds-button-color-primary-base-background);--mod-button-color-border: var(--ds-button-color-primary-base-border);--mod-button-color-text-hover: var(--ds-button-color-primary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-primary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-primary-hover-border);--mod-button-color-text-active: var(--ds-button-color-primary-active-text);--mod-button-color-background-active: var(--ds-button-color-primary-active-background);--mod-button-color-border-active: var(--ds-button-color-primary-active-border)}.button.is-secondary:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-secondary-base-text);--mod-button-color-background: var(--ds-button-color-secondary-base-background);--mod-button-color-border: var(--ds-button-color-secondary-base-border);--mod-button-color-text-hover: var(--ds-button-color-secondary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-secondary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-secondary-hover-border);--mod-button-color-text-active: var(--ds-button-color-secondary-active-text);--mod-button-color-background-active: var(--ds-button-color-secondary-active-background);--mod-button-color-border-active: var(--ds-button-color-secondary-active-border)}.button.is-tertiary:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-tertiary-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-active-border)}.button.is-tertiary-yellow:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-tertiary-yellow-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-yellow-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-yellow-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-yellow-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-yellow-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-yellow-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-yellow-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-yellow-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-yellow-active-border)}.button.is-tertiary-purple:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-tertiary-purple-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-purple-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-purple-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-purple-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-purple-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-purple-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-purple-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-purple-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-purple-active-border)}.button.is-tertiary-green:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-tertiary-green-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-green-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-green-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-green-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-green-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-green-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-green-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-green-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-green-active-border)}.button.is-tertiary-red:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-tertiary-red-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-red-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-red-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-red-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-red-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-red-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-red-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-red-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-red-active-border)}.button.is-info:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-info-base-text);--mod-button-color-background: var(--ds-button-color-info-base-background);--mod-button-color-border: var(--ds-button-color-info-base-border);--mod-button-color-text-hover: var(--ds-button-color-info-hover-text);--mod-button-color-background-hover: var(--ds-button-color-info-hover-background);--mod-button-color-border-hover: var(--ds-button-color-info-hover-border);--mod-button-color-text-active: var(--ds-button-color-info-active-text);--mod-button-color-background-active: var(--ds-button-color-info-active-background);--mod-button-color-border-active: var(--ds-button-color-info-active-border)}.button.is-success:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-success-base-text);--mod-button-color-background: var(--ds-button-color-success-base-background);--mod-button-color-border: var(--ds-button-color-success-base-border);--mod-button-color-text-hover: var(--ds-button-color-success-hover-text);--mod-button-color-background-hover: var(--ds-button-color-success-hover-background);--mod-button-color-border-hover: var(--ds-button-color-success-hover-border);--mod-button-color-text-active: var(--ds-button-color-success-active-text);--mod-button-color-background-active: var(--ds-button-color-success-active-background);--mod-button-color-border-active: var(--ds-button-color-success-active-border)}.button.is-warning:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-warning-base-text);--mod-button-color-background: var(--ds-button-color-warning-base-background);--mod-button-color-border: var(--ds-button-color-warning-base-border);--mod-button-color-text-hover: var(--ds-button-color-warning-hover-text);--mod-button-color-background-hover: var(--ds-button-color-warning-hover-background);--mod-button-color-border-hover: var(--ds-button-color-warning-hover-border);--mod-button-color-text-active: var(--ds-button-color-warning-active-text);--mod-button-color-background-active: var(--ds-button-color-warning-active-background);--mod-button-color-border-active: var(--ds-button-color-warning-active-border)}.button.is-danger:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-danger-base-text);--mod-button-color-background: var(--ds-button-color-danger-base-background);--mod-button-color-border: var(--ds-button-color-danger-base-border);--mod-button-color-text-hover: var(--ds-button-color-danger-hover-text);--mod-button-color-background-hover: var(--ds-button-color-danger-hover-background);--mod-button-color-border-hover: var(--ds-button-color-danger-hover-border);--mod-button-color-text-active: var(--ds-button-color-danger-active-text);--mod-button-color-background-active: var(--ds-button-color-danger-active-background);--mod-button-color-border-active: var(--ds-button-color-danger-active-border)}.button.is-link:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-link-base-text);--mod-button-color-background: var(--ds-button-color-link-base-background);--mod-button-color-border: var(--ds-button-color-link-base-border);--mod-button-color-text-hover: var(--ds-button-color-link-hover-text);--mod-button-color-background-hover: var(--ds-button-color-link-hover-background);--mod-button-color-border-hover: var(--ds-button-color-link-hover-border);--mod-button-color-text-active: var(--ds-button-color-link-active-text);--mod-button-color-background-active: var(--ds-button-color-link-active-background);--mod-button-color-border-active: var(--ds-button-color-link-active-border)}.button.is-text:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-text-base-text);--mod-button-color-background: var(--ds-button-color-text-base-background);--mod-button-color-border: var(--ds-button-color-text-base-border);--mod-button-color-text-hover: var(--ds-button-color-text-hover-text);--mod-button-color-background-hover: var(--ds-button-color-text-hover-background);--mod-button-color-border-hover: var(--ds-button-color-text-hover-border);--mod-button-color-text-active: var(--ds-button-color-text-active-text);--mod-button-color-background-active: var(--ds-button-color-text-active-background);--mod-button-color-border-active: var(--ds-button-color-text-active-border)}.button.is-primary.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-tertiary-yellow.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-tertiary-purple.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-tertiary-green.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-tertiary-red.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-info.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-success.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-warning.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-danger.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-base-text);--mod-button-color-background: var(--ds-button-color-inverted-base-background);--mod-button-color-border: var(--ds-button-color-inverted-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-active-border)}.button.is-secondary.is-inverted:not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-secondary-base-text);--mod-button-color-background: var(--ds-button-color-inverted-secondary-base-background);--mod-button-color-border: var(--ds-button-color-inverted-secondary-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-secondary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-secondary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-secondary-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-secondary-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-secondary-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-secondary-active-border)}.button.is-tertiary.is-inverted:not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-tertiary-base-text);--mod-button-color-background: var(--ds-button-color-inverted-tertiary-base-background);--mod-button-color-border: var(--ds-button-color-inverted-tertiary-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-tertiary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-tertiary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-tertiary-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-tertiary-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-tertiary-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-tertiary-active-border)}.button.is-text.is-inverted:not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-text-base-text);--mod-button-color-background: var(--ds-button-color-inverted-text-base-background);--mod-button-color-border: var(--ds-button-color-inverted-text-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-text-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-text-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-text-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-text-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-text-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-text-active-border)}.button.is-link.is-inverted:not(.is-disabled):not(.is-loading){--mod-button-color-text: var(--ds-button-color-inverted-link-base-text);--mod-button-color-background: var(--ds-button-color-inverted-link-base-background);--mod-button-color-border: var(--ds-button-color-inverted-link-base-border);--mod-button-color-text-hover: var(--ds-button-color-inverted-link-hover-text);--mod-button-color-background-hover: var(--ds-button-color-inverted-link-hover-background);--mod-button-color-border-hover: var(--ds-button-color-inverted-link-hover-border);--mod-button-color-text-active: var(--ds-button-color-inverted-link-active-text);--mod-button-color-background-active: var(--ds-button-color-inverted-link-active-background);--mod-button-color-border-active: var(--ds-button-color-inverted-link-active-border)}.button.is-sm,.button.is-small{--mod-button-font-size: var(--ds-button-size-sm);--mod-button-min-height: 2rem;--mod-button-min-width: 2rem;--mod-button-padding-inline: 0.75rem}.button.is-lg,.button.is-large{--mod-button-font-size: var(--ds-button-size-lg);--mod-button-min-height: 3.5rem;--mod-button-min-width: 3.5rem;--mod-button-padding-inline: 1.5rem}.button.is-xl{--mod-button-font-size: var(--ds-button-size-xl);--mod-button-min-height: 5.5rem;--mod-button-min-width: 5.5rem;--mod-button-padding-inline: 1.5rem}.button.is-flat{--mod-button-padding-inline: 0;--mod-button-min-height: 1.75rem}.button.is-rounded{--mod-button-radius: var(--ds-button-radius-rounded)}.button.is-square:not(.is-sm),.button.is-square:not(.is-small){--mod-button-padding-inline: 0;--mod-button-gap: 0;--mod-button-min-height: 3rem;--mod-button-min-width: 3rem;--icon-size: 1.5rem}.button.is-square.is-sm,.button.is-square.is-small{--mod-button-padding-inline: 0;--mod-button-gap: 0;--mod-button-min-height: 2rem;--mod-button-min-width: 2rem;--icon-size: var(--ds-icon-size-sm)}.button.is-circle:not(.is-sm),.button.is-circle:not(.is-small){--mod-button-radius: var(--ds-button-radius-rounded);--mod-button-padding-inline: 0;--mod-button-gap: 0;--mod-button-min-height: 3rem;--mod-button-min-width: 3rem;--icon-size: 1.5rem}.button.is-circle.is-small,.button.is-circle.is-sm{--mod-button-radius: var(--ds-button-radius-rounded);--mod-button-padding-inline: 0;--mod-button-gap: 0;--mod-button-min-height: 2rem;--mod-button-min-width: 2rem;--icon-size: var(--ds-icon-size-sm)}.button.is-tertiary-purple.is-dashed{--mod-button-border-style: dashed;--icon-shape: var(--_button-color-border);--mod-button-color-text: var(--ds-button-color-tertiary-purple-dashed-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-purple-dashed-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-purple-dashed-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-purple-dashed-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-purple-dashed-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-purple-dashed-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-purple-dashed-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-purple-dashed-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-purple-dashed-active-border)}.button.is-tertiary-red.is-dashed{--mod-button-border-style: dashed;--icon-shape: var(--_button-color-border);--mod-button-color-text: var(--ds-button-color-tertiary-red-dashed-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-red-dashed-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-red-dashed-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-red-dashed-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-red-dashed-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-red-dashed-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-red-dashed-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-red-dashed-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-red-dashed-active-border)}.button.is-tertiary-green.is-dashed{--mod-button-border-style: dashed;--icon-shape: var(--_button-color-border);--mod-button-color-text: var(--ds-button-color-tertiary-green-dashed-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-green-dashed-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-green-dashed-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-green-dashed-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-green-dashed-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-green-dashed-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-green-dashed-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-green-dashed-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-green-dashed-active-border)}.button.is-tertiary-yellow.is-dashed{--mod-button-border-style: dashed;--icon-shape: var(--_button-color-border);--mod-button-color-text: var(--ds-button-color-tertiary-yellow-dashed-base-text);--mod-button-color-background: var(--ds-button-color-tertiary-yellow-dashed-base-background);--mod-button-color-border: var(--ds-button-color-tertiary-yellow-dashed-base-border);--mod-button-color-text-hover: var(--ds-button-color-tertiary-yellow-dashed-hover-text);--mod-button-color-background-hover: var(--ds-button-color-tertiary-yellow-dashed-hover-background);--mod-button-color-border-hover: var(--ds-button-color-tertiary-yellow-dashed-hover-border);--mod-button-color-text-active: var(--ds-button-color-tertiary-yellow-dashed-active-text);--mod-button-color-background-active: var(--ds-button-color-tertiary-yellow-dashed-active-background);--mod-button-color-border-active: var(--ds-button-color-tertiary-yellow-dashed-active-border)}.button.has-shadow:not(.is-link,.is-text){--mod-button-box-shadow: var(--ds-alias-shadow-box-base)}.button.is-text.has-shadow,.button.is-link.has-shadow{--mod-button-text-shadow: var(--ds-alias-shadow-text)}.button.has-no-wrap{display:inline-block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:stretch}.button:is(input[type=checkbox],input[type=radio])[aria-label]::after{--_button-content: attr(aria-label);content:var(--_button-content)}.button:is(input[type=checkbox],input[type=radio]){--mod-button-color-text: var(--ds-button-color-secondary-base-text);--mod-button-color-background: var(--ds-button-color-secondary-base-background);--mod-button-color-border: var(--ds-button-color-secondary-base-border);--mod-button-color-text-hover: var(--ds-button-color-secondary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-secondary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-secondary-hover-border);--mod-button-color-text-active: var(--ds-button-color-secondary-active-text);--mod-button-color-background-active: var(--ds-button-color-secondary-active-background);--mod-button-color-border-active: var(--ds-button-color-secondary-active-border);appearance:none;vertical-align:middle}.button:is(input[type=checkbox],input[type=radio]):where(input:checked){--mod-button-color-text: var(--ds-button-color-primary-base-text);--mod-button-color-background: var(--ds-button-color-primary-base-background);--mod-button-color-border: var(--ds-button-color-primary-base-border);--mod-button-color-text-hover: var(--ds-button-color-primary-hover-text);--mod-button-color-background-hover: var(--ds-button-color-primary-hover-background);--mod-button-color-border-hover: var(--ds-button-color-primary-hover-border);--mod-button-color-text-active: var(--ds-button-color-primary-active-text);--mod-button-color-background-active: var(--ds-button-color-primary-active-background);--mod-button-color-border-active: var(--ds-button-color-primary-active-border);isolation:isolate}fieldset[disabled] .button,fieldset[disabled] .button:hover,fieldset[disabled] .button.is-hovered,fieldset[disabled] .button:active,fieldset[disabled] .button.is-pressed,fieldset[disabled] .button:focus,fieldset[disabled] .button.is-focused,.button.is-loading,.button.is-loading:hover,.button.is-loading.is-hovered,.button.is-loading:active,.button.is-loading.is-pressed,.button.is-loading:focus,.button.is-loading.is-focused,.button.is-disabled,.button.is-disabled:hover,.button.is-disabled.is-hovered,.button.is-disabled:active,.button.is-disabled.is-pressed,.button.is-disabled:focus,.button.is-disabled.is-focused,.button.is-inverted.is-disabled,.button.is-inverted.is-disabled:hover,.button.is-inverted.is-disabled.is-hovered,.button.is-inverted.is-disabled:active,.button.is-inverted.is-disabled.is-pressed,.button.is-inverted.is-disabled:focus,.button.is-inverted.is-disabled.is-focused,.button[disabled],.button[disabled]:hover,.button[disabled].is-hovered,.button[disabled]:active,.button[disabled].is-pressed,.button[disabled]:focus,.button[disabled].is-focused{pointer-events:none;opacity:1;box-shadow:none;text-decoration:none;cursor:default;translate:0 0;background-color:var(--ds-button-color-disabled-base-background);border-color:var(--ds-button-color-disabled-base-border);color:var(--ds-button-color-disabled-base-text)}fieldset[disabled] .button>ds-icon,fieldset[disabled] .button:hover>ds-icon,fieldset[disabled] .button.is-hovered>ds-icon,fieldset[disabled] .button:active>ds-icon,fieldset[disabled] .button.is-pressed>ds-icon,fieldset[disabled] .button:focus>ds-icon,fieldset[disabled] .button.is-focused>ds-icon,.button.is-loading>ds-icon,.button.is-loading:hover>ds-icon,.button.is-loading.is-hovered>ds-icon,.button.is-loading:active>ds-icon,.button.is-loading.is-pressed>ds-icon,.button.is-loading:focus>ds-icon,.button.is-loading.is-focused>ds-icon,.button.is-disabled>ds-icon,.button.is-disabled:hover>ds-icon,.button.is-disabled.is-hovered>ds-icon,.button.is-disabled:active>ds-icon,.button.is-disabled.is-pressed>ds-icon,.button.is-disabled:focus>ds-icon,.button.is-disabled.is-focused>ds-icon,.button.is-inverted.is-disabled>ds-icon,.button.is-inverted.is-disabled:hover>ds-icon,.button.is-inverted.is-disabled.is-hovered>ds-icon,.button.is-inverted.is-disabled:active>ds-icon,.button.is-inverted.is-disabled.is-pressed>ds-icon,.button.is-inverted.is-disabled:focus>ds-icon,.button.is-inverted.is-disabled.is-focused>ds-icon,.button[disabled]>ds-icon,.button[disabled]:hover>ds-icon,.button[disabled].is-hovered>ds-icon,.button[disabled]:active>ds-icon,.button[disabled].is-pressed>ds-icon,.button[disabled]:focus>ds-icon,.button[disabled].is-focused>ds-icon{--icon-color: var(--ds-button-color-disabled-base-text)}fieldset[disabled] .button>ds-spinner,fieldset[disabled] .button:hover>ds-spinner,fieldset[disabled] .button.is-hovered>ds-spinner,fieldset[disabled] .button:active>ds-spinner,fieldset[disabled] .button.is-pressed>ds-spinner,fieldset[disabled] .button:focus>ds-spinner,fieldset[disabled] .button.is-focused>ds-spinner,.button.is-loading>ds-spinner,.button.is-loading:hover>ds-spinner,.button.is-loading.is-hovered>ds-spinner,.button.is-loading:active>ds-spinner,.button.is-loading.is-pressed>ds-spinner,.button.is-loading:focus>ds-spinner,.button.is-loading.is-focused>ds-spinner,.button.is-disabled>ds-spinner,.button.is-disabled:hover>ds-spinner,.button.is-disabled.is-hovered>ds-spinner,.button.is-disabled:active>ds-spinner,.button.is-disabled.is-pressed>ds-spinner,.button.is-disabled:focus>ds-spinner,.button.is-disabled.is-focused>ds-spinner,.button.is-inverted.is-disabled>ds-spinner,.button.is-inverted.is-disabled:hover>ds-spinner,.button.is-inverted.is-disabled.is-hovered>ds-spinner,.button.is-inverted.is-disabled:active>ds-spinner,.button.is-inverted.is-disabled.is-pressed>ds-spinner,.button.is-inverted.is-disabled:focus>ds-spinner,.button.is-inverted.is-disabled.is-focused>ds-spinner,.button[disabled]>ds-spinner,.button[disabled]:hover>ds-spinner,.button[disabled].is-hovered>ds-spinner,.button[disabled]:active>ds-spinner,.button[disabled].is-pressed>ds-spinner,.button[disabled]:focus>ds-spinner,.button[disabled].is-focused>ds-spinner{--spinner-color: var(--ds-button-color-disabled-base-text)}fieldset[disabled] .button>ds-spinner.is-circle,fieldset[disabled] .button:hover>ds-spinner.is-circle,fieldset[disabled] .button.is-hovered>ds-spinner.is-circle,fieldset[disabled] .button:active>ds-spinner.is-circle,fieldset[disabled] .button.is-pressed>ds-spinner.is-circle,fieldset[disabled] .button:focus>ds-spinner.is-circle,fieldset[disabled] .button.is-focused>ds-spinner.is-circle,.button.is-loading>ds-spinner.is-circle,.button.is-loading:hover>ds-spinner.is-circle,.button.is-loading.is-hovered>ds-spinner.is-circle,.button.is-loading:active>ds-spinner.is-circle,.button.is-loading.is-pressed>ds-spinner.is-circle,.button.is-loading:focus>ds-spinner.is-circle,.button.is-loading.is-focused>ds-spinner.is-circle,.button.is-disabled>ds-spinner.is-circle,.button.is-disabled:hover>ds-spinner.is-circle,.button.is-disabled.is-hovered>ds-spinner.is-circle,.button.is-disabled:active>ds-spinner.is-circle,.button.is-disabled.is-pressed>ds-spinner.is-circle,.button.is-disabled:focus>ds-spinner.is-circle,.button.is-disabled.is-focused>ds-spinner.is-circle,.button.is-inverted.is-disabled>ds-spinner.is-circle,.button.is-inverted.is-disabled:hover>ds-spinner.is-circle,.button.is-inverted.is-disabled.is-hovered>ds-spinner.is-circle,.button.is-inverted.is-disabled:active>ds-spinner.is-circle,.button.is-inverted.is-disabled.is-pressed>ds-spinner.is-circle,.button.is-inverted.is-disabled:focus>ds-spinner.is-circle,.button.is-inverted.is-disabled.is-focused>ds-spinner.is-circle,.button[disabled]>ds-spinner.is-circle,.button[disabled]:hover>ds-spinner.is-circle,.button[disabled].is-hovered>ds-spinner.is-circle,.button[disabled]:active>ds-spinner.is-circle,.button[disabled].is-pressed>ds-spinner.is-circle,.button[disabled]:focus>ds-spinner.is-circle,.button[disabled].is-focused>ds-spinner.is-circle{--spinner-circle-color-border-background: var(--ds-global-color-grey-4);--spinner-circle-color-border-progress: var(--ds-button-color-disabled-base-text)}.buttons{--_buttons-align-items: var(--buttons-align-items, var(--mod-buttons-align-items, center));--_buttons-justify-content: var(--buttons-justify-content, var(--mod-buttons-justify-content, flex-start));--_buttons-direction: var(--buttons-direction, var(--mod-buttons-direction, row));--_buttons-gap: var(--buttons-gap, var(--mod-buttons-gap, 0.25rem));--_buttons-wrap: var(--buttons-wrap, var(--mod-buttons-wrap, wrap));display:flex;gap:var(--_buttons-gap);flex-direction:var(--_buttons-direction);align-items:var(--_buttons-align-items);justify-content:var(--_buttons-justify-content);flex-wrap:var(--_buttons-wrap);width:100%}@media screen and (max-width: 768px){.buttons ::slotted(.button:not(.is-square,.is-circle)),.buttons .button:not(.is-square,.is-circle){flex:1 1 auto}.buttons ::slotted(ds-button:not(.is-square,.is-circle)),.buttons ds-button:not(.is-square,.is-circle){flex:1 1 auto;--button-width: 100%}}.buttons.as-col-reverse{--mod-buttons-direction: column-reverse}.buttons.as-row-reverse{--mod-buttons-direction: row-reverse}.buttons.as-row{--mod-buttons-direction: row}.buttons.as-col{--mod-buttons-direction: column}@media screen and (max-width: 768px){.buttons.as-col ::slotted(.button),.buttons.as-col .button,.buttons.as-col ::slotted(ds-button),.buttons.as-col ds-button,.buttons.as-col-reverse ::slotted(.button),.buttons.as-col-reverse .button,.buttons.as-col-reverse ::slotted(ds-button),.buttons.as-col-reverse ds-button{width:100%}}@media screen and (min-width: 769px){.buttons.as-col.is-center,.buttons.as-col.is-centered,.buttons.as-col-reverse.is-center,.buttons.as-col-reverse.is-centered{--mod-buttons-align-items: center}.buttons.as-col.is-left,.buttons.as-col-reverse.is-left{--mod-buttons-align-items: flex-start}.buttons.as-col.is-right,.buttons.as-col-reverse.is-right{--mod-buttons-align-items: flex-end}}@media screen and (min-width: 769px){.buttons.as-row.is-center,.buttons.as-row.is-centered,.buttons.is-center:not(.as-col),.buttons.is-centered:not(.as-col){--mod-buttons-justify-content: center}.buttons.as-row.is-left,.buttons.is-left:not(.as-col){--mod-buttons-justify-content: flex-start}.buttons.as-row.is-right,.buttons.is-right:not(.as-col){--mod-buttons-justify-content: flex-end}}@media screen and (min-width: 769px){.buttons.is-wide ::slotted(.button:not(.is-square,.is-circle)),.buttons.is-wide .button:not(.is-square,.is-circle),.buttons.is-wide ::slotted(ds-button:not(.is-square,.is-circle)),.buttons.is-wide ds-button:not(.is-square,.is-circle){flex:1 1 auto;--button-width: 100%}}:host{--_pagination-position: var(--pagination-position, var(--mod-pagination-position, static));--_pagination-top: var(--pagination-top, var(--mod-pagination-top));--_pagination-right: var(--pagination-right, var(--mod-pagination-right));--_pagination-bottom: var(--pagination-bottom, var(--mod-pagination-bottom));--_pagination-left: var(--pagination-left, var(--mod-pagination-left));position:var(--_pagination-position);top:var(--_pagination-top);right:var(--_pagination-right);bottom:var(--_pagination-bottom);left:var(--_pagination-left);--_pagination-m: var(--pagination-m, var(--mod-pagination-m, 0));--_pagination-my: var(--pagination-my, var(--mod-pagination-my));--_pagination-mx: var(--pagination-mx, var(--mod-pagination-mx));--_pagination-ml: var(--pagination-ml, var(--mod-pagination-ml));--_pagination-mr: var(--pagination-mr, var(--mod-pagination-mr));--_pagination-mt: var(--pagination-mt, var(--mod-pagination-mt));--_pagination-mb: var(--pagination-mb, var(--mod-pagination-mb));margin:var(--_pagination-m);margin-inline:var(--_pagination-mx);margin-block:var(--_pagination-my);margin-left:var(--_pagination-ml);margin-right:var(--_pagination-mr);margin-top:var(--_pagination-mt);margin-bottom:var(--_pagination-mb);--_pagination-gap-mobile: var(--pagination-gap-mobile, var(--mod-pagination-gap-mobile, var(--ds-pagination-gap-mobile)));--_pagination-gap-tablet: var(--pagination-gap-tablet, var(--mod-pagination-gap-tablet, var(--ds-pagination-gap-tablet)));--_pagination-gap-desktop: var(--pagination-gap-desktop, var(--mod-pagination-gap-desktop, var(--ds-pagination-gap-desktop)));--_pagination-dots-background: var(--pagination-dots-background, var(--mod-pagination-dots-background, var(--ds-pagination-dots-background)));--_pagination-dots-radius: var(--pagination-dots-radius, var(--mod-pagination-dots-radius, var(--ds-pagination-dots-radius)));--_pagination-disabled-text-color: var(--pagination-disabled-text-color, var(--mod-pagination-disabled-text-color, var(--ds-pagination-disabled-text-color)));--_pagination-elevation-sticky: var(--pagination-elevation-sticky, var(--mod-pagination-elevation-sticky, var(--ds-pagination-elevation-sticky)));--_pagination-text-weight: var(--pagination-text-weight, var(--mod-pagination-text-weight, var(--ds-pagination-text-weight)));--_pagination-dots-inactive-color: var(--pagination-dots-inactive-color, var(--mod-pagination-dots-inactive-color, var(--ds-pagination-dots-inactive-color)));--_pagination-dots-active-color: var(--pagination-dots-active-color, var(--mod-pagination-dots-active-color, var(--ds-pagination-dots-active-color)))}:host{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;display:block}:host #nav{display:flex;align-items:center;justify-content:center;text-align:center}:host #nav ul{display:flex;align-items:center;justify-content:center;gap:var(--_pagination-gap-mobile);order:2;width:unset;text-align:center}@media screen and (min-width: 769px){:host #nav ul{gap:var(--_pagination-gap-tablet)}}@media screen and (min-width: 1024px){:host #nav ul{gap:var(--_pagination-gap-desktop)}}:host #previous{order:1}:host #next{order:3}:host #ellipsis{width:2rem;font-weight:700}@media screen and (min-width: 769px){:host #ellipsis{width:3rem}}:host button.is-disabled.is-text{background:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}:host(.is-sticky){position:sticky;z-index:var(--_pagination-elevation-sticky)}:host(.is-disabled){pointer-events:none}:host(.is-disabled) #ellipsis{color:var(--_pagination-disabled-text-color)}:host(.is-size-small){--mod-pagination-gap: 0.125rem}:host(.is-size-small) #ellipsis{width:2rem}:host(.is-align-start) #nav{justify-content:flex-start}:host(.is-align-end) #nav{justify-content:flex-end}:host(.is-variant-dots){--_pagination-dots-background: var(--ds-alias-background-color-grey)}:host(.is-variant-dots) #previous.is-disabled,:host(.is-variant-dots) #next.is-disabled{background:rgba(0,0,0,0);border-color:rgba(0,0,0,0);opacity:.35}:host(.is-variant-dots) .dots{order:2;max-width:88px;min-width:63px;min-height:2rem;margin:0 20px 0 !important;background:var(--_pagination-dots-background);border-radius:var(--_pagination-dots-radius);display:flex;justify-content:center;align-items:center;gap:.125rem}:host(.is-variant-dots) .dots li{display:flex;justify-content:center;align-items:center}:host(.is-variant-dots) .dots strong{font-weight:var(--_pagination-text-weight)}:host(.is-variant-dots) .dots button.dot{cursor:pointer;width:.625rem;height:.625rem;border-radius:50%;background-color:var(--_pagination-dots-inactive-color);border:none;padding:0}:host(.is-variant-dots) .dots button.dot.is-active{background-color:var(--_pagination-dots-active-color)}