@public-ui/theme-bwst 2.2.6-rc.2

package/dist/index.mjs

@@ -0,0 +1,603 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+var loglevel = {exports: {}};
+
+/*
+* loglevel - https://github.com/pimterry/loglevel
+*
+* Copyright (c) 2013 Tim Perry
+* Licensed under the MIT license.
+*/
+
+(function (module) {
+(function (root, definition) {
+    if (module.exports) {
+        module.exports = definition();
+    } else {
+        root.log = definition();
+    }
+}(commonjsGlobal, function () {
+
+    // Slightly dubious tricks to cut down minimized file size
+    var noop = function() {};
+    var undefinedType = "undefined";
+    var isIE = (typeof window !== undefinedType) && (typeof window.navigator !== undefinedType) && (
+        /Trident\/|MSIE /.test(window.navigator.userAgent)
+    );
+
+    var logMethods = [
+        "trace",
+        "debug",
+        "info",
+        "warn",
+        "error"
+    ];
+
+    var _loggersByName = {};
+    var defaultLogger = null;
+
+    // Cross-browser bind equivalent that works at least back to IE6
+    function bindMethod(obj, methodName) {
+        var method = obj[methodName];
+        if (typeof method.bind === 'function') {
+            return method.bind(obj);
+        } else {
+            try {
+                return Function.prototype.bind.call(method, obj);
+            } catch (e) {
+                // Missing bind shim or IE8 + Modernizr, fallback to wrapping
+                return function() {
+                    return Function.prototype.apply.apply(method, [obj, arguments]);
+                };
+            }
+        }
+    }
+
+    // Trace() doesn't print the message in IE, so for that case we need to wrap it
+    function traceForIE() {
+        if (console.log) {
+            if (console.log.apply) {
+                console.log.apply(console, arguments);
+            } else {
+                // In old IE, native console methods themselves don't have apply().
+                Function.prototype.apply.apply(console.log, [console, arguments]);
+            }
+        }
+        if (console.trace) console.trace();
+    }
+
+    // Build the best logging method possible for this env
+    // Wherever possible we want to bind, not wrap, to preserve stack traces
+    function realMethod(methodName) {
+        if (methodName === 'debug') {
+            methodName = 'log';
+        }
+
+        if (typeof console === undefinedType) {
+            return false; // No method possible, for now - fixed later by enableLoggingWhenConsoleArrives
+        } else if (methodName === 'trace' && isIE) {
+            return traceForIE;
+        } else if (console[methodName] !== undefined) {
+            return bindMethod(console, methodName);
+        } else if (console.log !== undefined) {
+            return bindMethod(console, 'log');
+        } else {
+            return noop;
+        }
+    }
+
+    // These private functions always need `this` to be set properly
+
+    function replaceLoggingMethods() {
+        /*jshint validthis:true */
+        var level = this.getLevel();
+
+        // Replace the actual methods.
+        for (var i = 0; i < logMethods.length; i++) {
+            var methodName = logMethods[i];
+            this[methodName] = (i < level) ?
+                noop :
+                this.methodFactory(methodName, level, this.name);
+        }
+
+        // Define log.log as an alias for log.debug
+        this.log = this.debug;
+
+        // Return any important warnings.
+        if (typeof console === undefinedType && level < this.levels.SILENT) {
+            return "No console available for logging";
+        }
+    }
+
+    // In old IE versions, the console isn't present until you first open it.
+    // We build realMethod() replacements here that regenerate logging methods
+    function enableLoggingWhenConsoleArrives(methodName) {
+        return function () {
+            if (typeof console !== undefinedType) {
+                replaceLoggingMethods.call(this);
+                this[methodName].apply(this, arguments);
+            }
+        };
+    }
+
+    // By default, we use closely bound real methods wherever possible, and
+    // otherwise we wait for a console to appear, and then try again.
+    function defaultMethodFactory(methodName, _level, _loggerName) {
+        /*jshint validthis:true */
+        return realMethod(methodName) ||
+               enableLoggingWhenConsoleArrives.apply(this, arguments);
+    }
+
+    function Logger(name, factory) {
+      // Private instance variables.
+      var self = this;
+      /**
+       * The level inherited from a parent logger (or a global default). We
+       * cache this here rather than delegating to the parent so that it stays
+       * in sync with the actual logging methods that we have installed (the
+       * parent could change levels but we might not have rebuilt the loggers
+       * in this child yet).
+       * @type {number}
+       */
+      var inheritedLevel;
+      /**
+       * The default level for this logger, if any. If set, this overrides
+       * `inheritedLevel`.
+       * @type {number|null}
+       */
+      var defaultLevel;
+      /**
+       * A user-specific level for this logger. If set, this overrides
+       * `defaultLevel`.
+       * @type {number|null}
+       */
+      var userLevel;
+
+      var storageKey = "loglevel";
+      if (typeof name === "string") {
+        storageKey += ":" + name;
+      } else if (typeof name === "symbol") {
+        storageKey = undefined;
+      }
+
+      function persistLevelIfPossible(levelNum) {
+          var levelName = (logMethods[levelNum] || 'silent').toUpperCase();
+
+          if (typeof window === undefinedType || !storageKey) return;
+
+          // Use localStorage if available
+          try {
+              window.localStorage[storageKey] = levelName;
+              return;
+          } catch (ignore) {}
+
+          // Use session cookie as fallback
+          try {
+              window.document.cookie =
+                encodeURIComponent(storageKey) + "=" + levelName + ";";
+          } catch (ignore) {}
+      }
+
+      function getPersistedLevel() {
+          var storedLevel;
+
+          if (typeof window === undefinedType || !storageKey) return;
+
+          try {
+              storedLevel = window.localStorage[storageKey];
+          } catch (ignore) {}
+
+          // Fallback to cookies if local storage gives us nothing
+          if (typeof storedLevel === undefinedType) {
+              try {
+                  var cookie = window.document.cookie;
+                  var cookieName = encodeURIComponent(storageKey);
+                  var location = cookie.indexOf(cookieName + "=");
+                  if (location !== -1) {
+                      storedLevel = /^([^;]+)/.exec(
+                          cookie.slice(location + cookieName.length + 1)
+                      )[1];
+                  }
+              } catch (ignore) {}
+          }
+
+          // If the stored level is not valid, treat it as if nothing was stored.
+          if (self.levels[storedLevel] === undefined) {
+              storedLevel = undefined;
+          }
+
+          return storedLevel;
+      }
+
+      function clearPersistedLevel() {
+          if (typeof window === undefinedType || !storageKey) return;
+
+          // Use localStorage if available
+          try {
+              window.localStorage.removeItem(storageKey);
+          } catch (ignore) {}
+
+          // Use session cookie as fallback
+          try {
+              window.document.cookie =
+                encodeURIComponent(storageKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
+          } catch (ignore) {}
+      }
+
+      function normalizeLevel(input) {
+          var level = input;
+          if (typeof level === "string" && self.levels[level.toUpperCase()] !== undefined) {
+              level = self.levels[level.toUpperCase()];
+          }
+          if (typeof level === "number" && level >= 0 && level <= self.levels.SILENT) {
+              return level;
+          } else {
+              throw new TypeError("log.setLevel() called with invalid level: " + input);
+          }
+      }
+
+      /*
+       *
+       * Public logger API - see https://github.com/pimterry/loglevel for details
+       *
+       */
+
+      self.name = name;
+
+      self.levels = { "TRACE": 0, "DEBUG": 1, "INFO": 2, "WARN": 3,
+          "ERROR": 4, "SILENT": 5};
+
+      self.methodFactory = factory || defaultMethodFactory;
+
+      self.getLevel = function () {
+          if (userLevel != null) {
+            return userLevel;
+          } else if (defaultLevel != null) {
+            return defaultLevel;
+          } else {
+            return inheritedLevel;
+          }
+      };
+
+      self.setLevel = function (level, persist) {
+          userLevel = normalizeLevel(level);
+          if (persist !== false) {  // defaults to true
+              persistLevelIfPossible(userLevel);
+          }
+
+          // NOTE: in v2, this should call rebuild(), which updates children.
+          return replaceLoggingMethods.call(self);
+      };
+
+      self.setDefaultLevel = function (level) {
+          defaultLevel = normalizeLevel(level);
+          if (!getPersistedLevel()) {
+              self.setLevel(level, false);
+          }
+      };
+
+      self.resetLevel = function () {
+          userLevel = null;
+          clearPersistedLevel();
+          replaceLoggingMethods.call(self);
+      };
+
+      self.enableAll = function(persist) {
+          self.setLevel(self.levels.TRACE, persist);
+      };
+
+      self.disableAll = function(persist) {
+          self.setLevel(self.levels.SILENT, persist);
+      };
+
+      self.rebuild = function () {
+          if (defaultLogger !== self) {
+              inheritedLevel = normalizeLevel(defaultLogger.getLevel());
+          }
+          replaceLoggingMethods.call(self);
+
+          if (defaultLogger === self) {
+              for (var childName in _loggersByName) {
+                _loggersByName[childName].rebuild();
+              }
+          }
+      };
+
+      // Initialize all the internal levels.
+      inheritedLevel = normalizeLevel(
+          defaultLogger ? defaultLogger.getLevel() : "WARN"
+      );
+      var initialLevel = getPersistedLevel();
+      if (initialLevel != null) {
+          userLevel = normalizeLevel(initialLevel);
+      }
+      replaceLoggingMethods.call(self);
+    }
+
+    /*
+     *
+     * Top-level API
+     *
+     */
+
+    defaultLogger = new Logger();
+
+    defaultLogger.getLogger = function getLogger(name) {
+        if ((typeof name !== "symbol" && typeof name !== "string") || name === "") {
+            throw new TypeError("You must supply a name when creating a logger.");
+        }
+
+        var logger = _loggersByName[name];
+        if (!logger) {
+            logger = _loggersByName[name] = new Logger(
+                name,
+                defaultLogger.methodFactory
+            );
+        }
+        return logger;
+    };
+
+    // Grab the current global log variable in case of overwrite
+    var _log = (typeof window !== undefinedType) ? window.log : undefined;
+    defaultLogger.noConflict = function() {
+        if (typeof window !== undefinedType &&
+               window.log === defaultLogger) {
+            window.log = _log;
+        }
+
+        return defaultLogger;
+    };
+
+    defaultLogger.getLoggers = function getLoggers() {
+        return _loggersByName;
+    };
+
+    // ES6 default export, for compatibility
+    defaultLogger['default'] = defaultLogger;
+
+    return defaultLogger;
+}));
+}(loglevel));
+
+const R=(e,t)=>s=>s(e,t),H=(e,t)=>s=>s(e,t,{append:false}),$=new Map,M=[],Y=new Map,a={A11yUi:{CSS_STYLE_CACHE:$,HYDRATED_HISTORY:M,STYLING_TASK_QUEUE:Y,Themes:{}}};const w=new Set,q=/--[^;]+/g,J=/:/,V=(e,t)=>{let s=t.match(q);if(Array.isArray(s)){s=s.filter(n=>J.test(n));const o=document.createElement("style");o.innerHTML=`.${e} {${s.join(";")}}`,document.querySelector("head")?.appendChild(o);}w.add(e);},f=(e,t)=>typeof a.A11yUi=="object"&&a.A11yUi!==null&&typeof a.A11yUi.Themes=="object"&&a.A11yUi.Themes!==null&&typeof a.A11yUi.Themes[e]=="object"&&a.A11yUi.Themes[e]!==null&&typeof a.A11yUi.Themes[e][t]=="string"?a.A11yUi.Themes[e][t].replace(/\r?\n/g,""):"",W=e=>{for(const t of Array.from(e.childNodes))if(t instanceof HTMLStyleElement&&t.tagName==="STYLE"&&t.dataset.themingFallback===undefined)e.removeChild(t);else break},X=(e,t)=>{try{if(a.A11yUi.Theme?.mode==="ssr")throw new Error("SSR");const s=[];t.forEach(o=>{const n=new CSSStyleSheet;n.replaceSync(o),s.push(n);}),e.adoptedStyleSheets=s;}catch{[...t].reverse().forEach((s,o)=>{if(typeof s!="string"||s.length===0)return;const n=document.createElement("style");switch(n.dataset.themingFallback="",o){case 4:n.dataset.themingBaseA11y="";break;case 3:n.dataset.themingBaseGlobal="";break;case 2:n.dataset.themingBaseComponent="";break;case 1:n.dataset.themingCustomGlobal="";break;case 0:n.dataset.themingCustomComponent="";break;default:n.dataset.themingUnknown="";break}n.innerHTML=s,e.insertBefore(n,e.firstChild);});}},Z=(e,t,s)=>{if(s!==false){const o=[...Array.from(e.childNodes).filter(r=>r instanceof HTMLStyleElement&&r.tagName==="STYLE")];let n;try{n=[...Array.from(e.adoptedStyleSheets)];}catch{n=[];}s?.mode==="before"?(o.reverse().forEach(r=>t.unshift(r.innerHTML)),n.reverse().forEach(r=>t.unshift(Array.from(r.cssRules).map(i=>i.cssText).join("")))):s?.mode==="after"&&(o.forEach(r=>t.push(r.innerHTML)),n.forEach(r=>t.push(Array.from(r.cssRules).map(i=>i.cssText).join(""))));}},L=(e,t,s)=>{const o=t.name||"default";let n;try{if(e.shadowRoot===null)throw new Error("ShadowRoot is null");n=e.shadowRoot;}catch{n=e;}if(a.A11yUi.CSS_STYLE_CACHE.get(o)?.has(e.tagName))_(e,n,a.A11yUi.CSS_STYLE_CACHE.get(o)?.get(e.tagName),s);else {const r=f(o,"PROPERTIES"),i=f(o,"GLOBAL"),m=f(o,e.tagName);w.has(o)===false&&V(o,i);const h=[r,i,m];Z(n,h,t.encroachCss),t.loglevel==="debug"&&console.log(e.tagName,h),t.cache===true&&(a.A11yUi.CSS_STYLE_CACHE.has(o)===false&&a.A11yUi.CSS_STYLE_CACHE.set(o,new Map),a.A11yUi.CSS_STYLE_CACHE.get(o)?.set(e.tagName,h)),_(e,n,h,s);}},_=(e,t,s,o)=>{W(t),X(t,s),e.style.display=o;},N=e=>{e.loglevel==="debug"&&a.A11yUi.HYDRATED_HISTORY.push({timestamp:Date.now(),numberOfTasks:a.A11yUi.STYLING_TASK_QUEUE.size});},se=e=>{a.A11yUi.STYLING_TASK_QUEUE.delete(e);},j=(e,t)=>{se(e),N(t);},oe=e=>{for(const t of e)if(a.A11yUi.STYLING_TASK_QUEUE.has(t.target)&&t.target.classList.contains("hydrated")){const{styleDisplay:s,themeDetails:o}=a.A11yUi.STYLING_TASK_QUEUE.get(t.target);L(t.target,o,s),j(t.target,o);}};let d;try{d=new MutationObserver(oe);}catch{d=null;}class re{constructor(t,s,o){this.createTheme=(n,r)=>H(n,r),this.createTranslation=(n,r)=>R(n,r),this.Prefix=t,this.Key=Object.getOwnPropertyNames(s),this.Tag=Object.getOwnPropertyNames(o);}}
+
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+
+var KeyEnum;
+(function (KeyEnum) {
+    KeyEnum[KeyEnum["error"] = 0] = "error";
+    KeyEnum[KeyEnum["warning"] = 1] = "warning";
+    KeyEnum[KeyEnum["info"] = 2] = "info";
+    KeyEnum[KeyEnum["success"] = 3] = "success";
+    KeyEnum[KeyEnum["message"] = 4] = "message";
+    KeyEnum[KeyEnum["close"] = 5] = "close";
+    KeyEnum[KeyEnum["form-description"] = 6] = "form-description";
+    KeyEnum[KeyEnum["of"] = 7] = "of";
+    KeyEnum[KeyEnum["characters"] = 8] = "characters";
+    KeyEnum[KeyEnum["new"] = 9] = "new";
+    KeyEnum[KeyEnum["no-entries"] = 10] = "no-entries";
+    KeyEnum[KeyEnum["change-order"] = 11] = "change-order";
+    KeyEnum[KeyEnum["action-running"] = 12] = "action-running";
+    KeyEnum[KeyEnum["action-done"] = 13] = "action-done";
+    KeyEnum[KeyEnum["page-first"] = 14] = "page-first";
+    KeyEnum[KeyEnum["page-back"] = 15] = "page-back";
+    KeyEnum[KeyEnum["page-next"] = 16] = "page-next";
+    KeyEnum[KeyEnum["page-last"] = 17] = "page-last";
+    KeyEnum[KeyEnum["entries-per-site"] = 18] = "entries-per-site";
+    KeyEnum[KeyEnum["page-current"] = 19] = "page-current";
+    KeyEnum[KeyEnum["page-selected"] = 20] = "page-selected";
+    KeyEnum[KeyEnum["page-per-site"] = 21] = "page-per-site";
+    KeyEnum[KeyEnum["logo-description"] = 22] = "logo-description";
+    KeyEnum[KeyEnum["open-link-in-tab"] = 23] = "open-link-in-tab";
+    KeyEnum[KeyEnum["kolibri-logo"] = 24] = "kolibri-logo";
+})(KeyEnum || (KeyEnum = {}));
+
+var TagEnum;
+(function (TagEnum) {
+    TagEnum[TagEnum["abbr"] = 0] = "abbr";
+    TagEnum[TagEnum["accordion"] = 1] = "accordion";
+    TagEnum[TagEnum["accordion-group"] = 2] = "accordion-group";
+    TagEnum[TagEnum["alert"] = 3] = "alert";
+    TagEnum[TagEnum["avatar"] = 4] = "avatar";
+    TagEnum[TagEnum["badge"] = 5] = "badge";
+    TagEnum[TagEnum["breadcrumb"] = 6] = "breadcrumb";
+    TagEnum[TagEnum["button"] = 7] = "button";
+    TagEnum[TagEnum["button-group"] = 8] = "button-group";
+    TagEnum[TagEnum["button-link"] = 9] = "button-link";
+    TagEnum[TagEnum["card"] = 10] = "card";
+    TagEnum[TagEnum["combobox"] = 11] = "combobox";
+    TagEnum[TagEnum["details"] = 12] = "details";
+    TagEnum[TagEnum["drawer"] = 13] = "drawer";
+    TagEnum[TagEnum["form"] = 14] = "form";
+    TagEnum[TagEnum["heading"] = 15] = "heading";
+    TagEnum[TagEnum["icon"] = 16] = "icon";
+    TagEnum[TagEnum["image"] = 17] = "image";
+    TagEnum[TagEnum["indented-text"] = 18] = "indented-text";
+    TagEnum[TagEnum["input-checkbox"] = 19] = "input-checkbox";
+    TagEnum[TagEnum["input-color"] = 20] = "input-color";
+    TagEnum[TagEnum["input-date"] = 21] = "input-date";
+    TagEnum[TagEnum["input-email"] = 22] = "input-email";
+    TagEnum[TagEnum["input-file"] = 23] = "input-file";
+    TagEnum[TagEnum["input-number"] = 24] = "input-number";
+    TagEnum[TagEnum["input-password"] = 25] = "input-password";
+    TagEnum[TagEnum["input-radio"] = 26] = "input-radio";
+    TagEnum[TagEnum["input-range"] = 27] = "input-range";
+    TagEnum[TagEnum["input-text"] = 28] = "input-text";
+    TagEnum[TagEnum["kolibri"] = 29] = "kolibri";
+    TagEnum[TagEnum["link"] = 30] = "link";
+    TagEnum[TagEnum["link-button"] = 31] = "link-button";
+    TagEnum[TagEnum["link-group"] = 32] = "link-group";
+    TagEnum[TagEnum["logo"] = 33] = "logo";
+    TagEnum[TagEnum["modal"] = 34] = "modal";
+    TagEnum[TagEnum["nav"] = 35] = "nav";
+    TagEnum[TagEnum["pagination"] = 36] = "pagination";
+    TagEnum[TagEnum["progress"] = 37] = "progress";
+    TagEnum[TagEnum["select"] = 38] = "select";
+    TagEnum[TagEnum["separator"] = 39] = "separator";
+    TagEnum[TagEnum["skip-nav"] = 40] = "skip-nav";
+    TagEnum[TagEnum["spin"] = 41] = "spin";
+    TagEnum[TagEnum["single-select"] = 42] = "single-select";
+    TagEnum[TagEnum["split-button"] = 43] = "split-button";
+    TagEnum[TagEnum["symbol"] = 44] = "symbol";
+    TagEnum[TagEnum["table"] = 45] = "table";
+    TagEnum[TagEnum["table-stateless"] = 46] = "table-stateless";
+    TagEnum[TagEnum["table-stateful"] = 47] = "table-stateful";
+    TagEnum[TagEnum["tabs"] = 48] = "tabs";
+    TagEnum[TagEnum["textarea"] = 49] = "textarea";
+    TagEnum[TagEnum["toast-container"] = 50] = "toast-container";
+    TagEnum[TagEnum["toolbar"] = 51] = "toolbar";
+    TagEnum[TagEnum["tooltip"] = 52] = "tooltip";
+    TagEnum[TagEnum["tree"] = 53] = "tree";
+    TagEnum[TagEnum["tree-item"] = 54] = "tree-item";
+})(TagEnum || (TagEnum = {}));
+
+const KoliBri = new re('kol', KeyEnum, TagEnum);
+
+var css_248z$J = "@layer kol-theme-global {\n  :root {\n    --blue: #6495ed;\n    --white: #faf0e6;\n    background-color: var(--blue);\n  }\n  :host {\n    --label-weight: 700;\n    --label-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    --label-color: #000000;\n    --box-shadow-inputs: calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n    --page-bg: #ffffff;\n    --element-bg: #eee;\n    --border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    --font-family: \"Noto Sans Regular\", Arial, helvetica, sans-serif;\n    --font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    --spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    --border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    --color-primary: #156570;\n    --color-primary-light: #1a7a87;\n    --color-primary-variant: #207a8b;\n    --color-primary-focus: hsl(from var(--color-primary-variant) h calc(s - 10) l);\n    --color-danger: #ca0101;\n    --color-warning: #c44931;\n    --color-success: #005c45;\n    --color-subtle: #576164;\n    --color-light: #ffffff;\n    --color-text: #000000;\n    --color-mute: #f2f3f4;\n    --color-mute-variant: #bec5c9;\n    --visited: var(--color-primary-light);\n    --border-color: #ededed;\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    --button-font-weight: 400;\n  }\n  * {\n    box-sizing: border-box;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n  *[tabindex]:focus-visible,\n  button[tabindex]:focus,\n  .kol-input:not(.checkbox, .radio) .input:focus-within,\n  .kol-input:is(.checkbox, .radio) input:focus,\n  summary:focus {\n    cursor: pointer;\n    outline-color: var(--color-primary-variant);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-heading-wc {\n    font-weight: 700;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    border: var(--border-width) solid var(--color-subtle);\n    border-radius: var(--border-radius);\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    border: var(--border-width) solid var(--color-subtle);\n  }\n  .kol-tooltip-wc .tooltip-area {\n    background-color: var(--color-light);\n  }\n  .kol-tooltip-wc .tooltip-content {\n    border-radius: var(--border-radius);\n    line-height: 1.5;\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-span-wc,\n  .kol-span-wc > span {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  a:is(:focus, :hover):not([aria-disabled]),\n  button:is(:focus, :hover):not([disabled]) {\n    text-decoration-thickness: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n  }\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n}\n@layer kol-component {\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n  }\n}";
+
+var css_248z$I = "@layer kol-theme-component {\n  abbr {\n    border-bottom: dashed var(--color-text) calc(1rem / var(--kolibri-root-font-size, 16));\n    text-decoration: none !important;\n  }\n}";
+
+var css_248z$H = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .accordion__content {\n    padding-left: calc(36rem / var(--kolibri-root-font-size, 16));\n    padding-bottom: calc(12rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-span-wc > span {\n    display: flex;\n    place-items: baseline center;\n  }\n  :host > div > .kol-heading-wc button {\n    border-radius: var(--border-radius);\n    min-height: calc(35.2rem / var(--kolibri-root-font-size, 16));\n    padding: calc(12rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div > .kol-heading-wc button .kol-span-wc {\n    font-weight: 700;\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(16rem / var(--kolibri-root-font-size, 16));\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div > .kol-heading-wc button .kol-span-wc > span {\n    gap: 0.5em;\n  }\n  button:focus {\n    outline: none;\n  }\n  :host > .accordion:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .icon {\n    color: var(--color-primary);\n  }\n}";
+
+var css_248z$G = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n}";
+
+var css_248z$F = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .initials {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+
+var css_248z$E = "@layer kol-theme-component {\n  :host {\n    display: inline-block;\n    font-family: var(--font-family);\n    font-size: inherit;\n  }\n  :host > span {\n    border-radius: var(--border-radius);\n    display: inline-flex;\n    font-style: normal;\n  }\n  :host > span.smart-button {\n    align-items: center;\n  }\n  :host > span .kol-button-wc:hover > button {\n    background-color: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n  :host > span .kol-button-wc > button {\n    color: inherit;\n    border-top-right-radius: var(--border-radius);\n    border-bottom-right-radius: var(--border-radius);\n    padding: calc(3.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > span .kol-span-wc {\n    padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > span > .kol-span-wc {\n    align-items: center;\n    font-style: normal;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > span > .kol-span-wc > span {\n    display: flex;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+
+var css_248z$D = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  li:has(:is(.kol-icon + .kol-link, .kol-icon + span)) .kol-icon {\n    font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-subtle);\n  }\n  .kol-link::part(icon) {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  ul li > :is(span, .kol-link) {\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  ul li:last-child > span {\n    color: var(--color-subtle);\n  }\n  .kol-link {\n    font-family: var(--font-family);\n  }\n}";
+
+var css_248z$C = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :is(a, button) > .kol-span-wc {\n    font-weight: 400;\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.2s;\n    transition-property: background-color, color, border-color;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus .kol-span-wc {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .primary :is(a, button) > .kol-span-wc,\n  .primary :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .secondary :is(a, button) > .kol-span-wc,\n  .secondary :is(a, button):disabled:hover > .kol-span-wc,\n  .normal :is(a, button) > .kol-span-wc,\n  .normal :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-light);\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n  }\n  .danger :is(a, button) > .kol-span-wc,\n  .danger :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n    color: var(--color-light);\n  }\n  .ghost :is(a, button) > .kol-span-wc,\n  .ghost :is(a, button):disabled:hover > .kol-span-wc {\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n    box-shadow: none;\n    color: var(--color-primary);\n  }\n  /*-----------*/\n  .primary :is(a, button):active > .kol-span-wc,\n  .primary :is(a, button):hover > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):hover > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):hover > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n  }\n  :is(a, button):disabled:hover > .kol-span-wc,\n  :is(a, button):focus:hover > .kol-span-wc {\n    box-shadow: none;\n  }\n  .primary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc {\n    border-color: var(--color-light);\n    box-shadow: none;\n    outline: none;\n  }\n  :is(a, button).hide-label > .kol-span-wc {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  :is(a, button).hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  :is(a, button).loading > .kol-span-wc .kol-icon {\n    animation: spin 5s infinite linear;\n  }\n  /** small ghost button */\n  .ghost :is(a, button).small > .kol-span-wc {\n    border: none;\n    background-color: transparent;\n    box-shadow: none;\n  }\n  .ghost :is(a, button).small > .kol-span-wc > span {\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n  }\n  .ghost :is(a, button).small:active > .kol-span-wc > span,\n  .ghost :is(a, button).small:hover > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  /** :is(a,button) with transparent background */\n  :is(a, button).transparent > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n  :is(a, button).transparent > .kol-span-wc {\n    background-color: transparent;\n    border-color: transparent;\n  }\n  .badge-text-hint {\n    background: var(--color-mute-variant);\n    border-radius: calc(3rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n}";
+
+var css_248z$B = "@layer kol-theme-component {\n  :host > .kol-button-group-wc {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--spacing);\n  }\n}";
+
+var css_248z$A = "@layer kol-theme-component {\n  :is(a, button) {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n    text-decoration-line: underline;\n    font-size: inherit;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus .kol-span-wc {\n    border-radius: calc(var(--border-radius) / 2);\n    outline: var(--border-width) solid;\n    outline-offset: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n  }\n  :is(a, button):visited {\n    color: var(--visited);\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  .skip {\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n  }\n  .skip:focus {\n    background: white;\n    left: unset;\n    position: unset;\n  }\n  .badge-text-hint {\n    background: var(--color-mute-variant);\n    border-radius: calc(3rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n}";
+
+var css_248z$z = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  /* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */\n  :host > div {\n    display: grid;\n    width: 100%;\n    height: 100%;\n    background-color: var(--color-light);\n    grid-template-rows: min-content 2fr min-content;\n    border-radius: var(--border-radius);\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-subtle);\n  }\n  :host .kol-heading-wc {\n    line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.header {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.content {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n  }\n  :host div.footer {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+
+var css_248z$y = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .combobox {\n    display: block;\n    position: relative;\n  }\n  .combobox__group {\n    display: inline-flex;\n    align-items: center;\n    width: 100%;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__input {\n    flex-grow: 1;\n    border: none;\n    width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .combobox__input::placeholder {\n    color: var(--color-subtle);\n  }\n  .combobox__input:first-child {\n    padding-left: var(--spacing);\n  }\n  .combobox__input:last-child {\n    padding-right: var(--spacing);\n  }\n  .combobox__icon {\n    display: grid;\n    place-items: center;\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__icon:focus {\n    outline: 0;\n  }\n  .combobox__listbox {\n    border-style: solid;\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    border-color: var(--color-subtle);\n    overflow-y: auto;\n    overflow-x: hidden;\n    box-sizing: border-box;\n    width: 100%;\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__item {\n    display: flex;\n    align-items: center;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__item:focus {\n    background-color: var(--color-primary-variant);\n    color: var(--color-light);\n    outline: 0;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error:not(.hidden-error) {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n    padding: 0;\n  }\n  .kol-input .counter {\n    order: 4;\n  }\n  .kol-input .hint {\n    order: 5;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error:not(.hidden-error) .input:focus-within {\n    outline-color: var(--color-danger);\n  }\n  .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .input {\n    position: relative;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+
+var css_248z$x = "@layer kol-theme-component {\n  .details {\n    font-family: var(--font-family);\n  }\n  .details__heading {\n    border-radius: calc(var(--border-radius) / 2);\n  }\n  .details__heading-button .kol-span-wc > span {\n    gap: 0;\n  }\n  .details__heading-button .span-label {\n    border-bottom-color: var(--color-subtle);\n  }\n  .details__heading-button .button:not(:disabled):is(:hover, :focus) .span-label, .details.open .details__heading-button .span-label {\n    border-bottom-color: var(--color-primary);\n  }\n  .details .button:not(:disabled):focus {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-radius: calc(var(--border-radius) / 2);\n  }\n  .details__content {\n    background-color: var(--color-light);\n    border-left: none;\n    box-shadow: calc(-2rem / var(--kolibri-root-font-size, 16)) calc(0rem / var(--kolibri-root-font-size, 16)) calc(0rem / var(--kolibri-root-font-size, 16)) var(--color-primary-variant);\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n    width: unset;\n    margin: calc(8rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) calc(14.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+
+var css_248z$w = "@layer kol-theme-component {\n  .msg {\n    border-width: 0 !important;\n  }\n  .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  .msg {\n    align-items: start;\n  }\n  .default {\n    border-color: var(--color-subtle);\n  }\n  .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  .error {\n    border-color: var(--color-danger);\n  }\n  .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  .info {\n    border-color: var(--color-primary);\n  }\n  .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  .success {\n    border-color: var(--color-success);\n  }\n  .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  .warning {\n    border-color: var(--color-warning);\n  }\n  .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  .heading-icon {\n    color: var(--color-light);\n  }\n  .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  .card.error .close {\n    background-color: var(--color-danger);\n  }\n  .card.info .close {\n    background-color: var(--color-primary);\n  }\n  .card.success .close {\n    background-color: var(--color-success);\n  }\n  .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  :is(a, button) {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n    text-decoration-line: underline;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus kol-span-wc {\n    border-radius: calc(var(--border-radius) / 2);\n    outline: var(--border-width) solid;\n    outline-offset: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n  }\n  :is(a, button):visited {\n    color: var(--visited);\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  .skip {\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1em;\n  }\n  .skip:focus {\n    background: white;\n    left: unset;\n    position: unset;\n  }\n  .external-link-icon {\n    margin-left: 0;\n  }\n  :host {\n    display: block;\n  }\n  .mandatory-fields-hint {\n    font-family: var(--font-family);\n    background-color: var(--color-light);\n    border-left: none;\n    box-shadow: calc(-2rem / var(--kolibri-root-font-size, 16)) calc(0rem / var(--kolibri-root-font-size, 16)) calc(0rem / var(--kolibri-root-font-size, 16)) var(--color-primary-variant);\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n}";
+
+var css_248z$v = "@layer kol-theme-component {\n  .headline-h1,\n  .headline-h2,\n  .headline-h3,\n  .headline-h4,\n  .headline-h5,\n  .headline-h6 {\n    color: inherit;\n    font-style: normal;\n    font-family: var(--font-family);\n  }\n  .headline-h1,\n  .headline-h2,\n  .headline-h3 {\n    font-weight: 700;\n  }\n  .headline-h1 {\n    font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n  }\n  .headline-h2 {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n  }\n  .headline-h3 {\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+
+var css_248z$u = "@layer kol-theme-component {\n  :host {\n    width: 1em;\n    height: 1em;\n  }\n  :host > i {\n    width: 1em;\n    height: 1em;\n  }\n}";
+
+var css_248z$t = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  kol-indented-text-wc > div {\n    background-color: var(--color-light);\n    border-left: none;\n    box-shadow: calc(-2rem / var(--kolibri-root-font-size, 16)) calc(0rem / var(--kolibri-root-font-size, 16)) calc(0rem / var(--kolibri-root-font-size, 16)) var(--color-primary-variant);\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n}";
+
+var css_248z$s = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  :host fieldset legend {\n    order: 2;\n    display: contents;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-weight: 700;\n  }\n  :host .kol-input {\n    display: grid;\n    align-items: center;\n    justify-items: left;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    gap: calc(6.4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-input .hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  :host .kol-input:is(.default, .switch) {\n    grid-template-columns: calc(24rem / var(--kolibri-root-font-size, 16)) auto;\n    grid-template-areas: unset;\n  }\n  :host .kol-input:is(.default, .switch) .input,\n  :host .kol-input:is(.default, .switch) .input-label {\n    grid-area: unset;\n  }\n  :host .kol-input.switch {\n    grid-template-columns: calc(56rem / var(--kolibri-root-font-size, 16)) auto;\n  }\n  :host .kol-input.button {\n    gap: calc(6.4rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .checkbox-container {\n    justify-content: flex-start;\n  }\n  :host .kol-input > div.input {\n    display: inherit;\n    min-height: var(--a11y-min-size);\n    order: 2;\n  }\n  :host .kol-input > div.input input {\n    margin: calc(0rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-input > label {\n    order: 3;\n  }\n  .disabled .input-label,\n  .disabled .checkbox-container {\n    cursor: not-allowed;\n  }\n  :host .kol-input > .kol-alert-wc.error {\n    order: 1;\n    padding-top: calc(var(--spacing) / 2);\n    grid-column: span 2;\n  }\n  :host .kol-input.error {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-input.error input:focus,\n  .kol-input.error select:focus,\n  .kol-input.error textarea:focus {\n    outline-color: var(--color-danger) !important;\n  }\n  :host .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host input {\n    cursor: pointer;\n    width: 100%;\n    border-color: var(--color-subtle);\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-radius: var(--border-radius);\n    line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host input:hover {\n    border-color: var(--color-primary);\n    box-shadow: calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n  }\n  :host input:focus:hover {\n    box-shadow: none;\n  }\n  :host input:active {\n    box-shadow: none;\n  }\n  :host .kol-alert-wc {\n    display: block;\n    width: 100%;\n  }\n  /* CHECKBOX */\n  :host .kol-input label span {\n    margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .required label > span::after {\n    content: \"*\";\n    padding-left: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-input input[type=checkbox] {\n    appearance: none;\n    background-color: white;\n    cursor: pointer;\n    transition: 0.5s;\n  }\n  :host .kol-input input[type=checkbox]:checked {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  :host .kol-input.default input[type=checkbox] {\n    border-radius: var(--border-radius);\n    height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n    width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-input.default input[type=checkbox]:indeterminate {\n    background-color: var(--color-primary);\n  }\n  :host .kol-input.default .icon {\n    color: var(--color-light);\n    margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-input.switch input[type=checkbox] {\n    background-color: var(--color-subtle);\n    border-radius: calc(20rem / var(--kolibri-root-font-size, 16));\n    border-width: 0;\n    display: block;\n    height: calc(24rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(56rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n    width: calc(56rem / var(--kolibri-root-font-size, 16));\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-input.switch input[type=checkbox]:before {\n    width: calc(20rem / var(--kolibri-root-font-size, 16));\n    height: calc(20rem / var(--kolibri-root-font-size, 16));\n    left: calc(4rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n    top: calc(4rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n    border-radius: calc(20rem / var(--kolibri-root-font-size, 16));\n    background-color: white;\n    position: absolute;\n  }\n  :host .kol-input.switch input[type=checkbox]:checked {\n    background-color: var(--color-primary);\n  }\n  :host .kol-input.switch input[type=checkbox]:checked:before {\n    transform: translateX(calc(32rem / var(--kolibri-root-font-size, 16)));\n  }\n  :host .kol-input.switch input[type=checkbox]:indeterminate:before {\n    transform: translateX(calc(16rem / var(--kolibri-root-font-size, 16)));\n  }\n  .switch .icon {\n    width: calc(20rem / var(--kolibri-root-font-size, 16));\n    height: calc(20rem / var(--kolibri-root-font-size, 16));\n    left: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .switch.checked .icon {\n    transform: translate(calc(32rem / var(--kolibri-root-font-size, 16)), -50%);\n  }\n  .switch.indeterminate .icon {\n    transform: translate(calc(16rem / var(--kolibri-root-font-size, 16)), -50%);\n  }\n  .button .input {\n    border-top-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-left-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-bottom-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-top-style: solid;\n    border-left-style: solid;\n    border-bottom-style: solid;\n  }\n  .button.hide-label .input {\n    border-right-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-right-style: solid;\n  }\n  .button .input-label {\n    border-top-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-right-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-bottom-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-top-style: solid;\n    border-right-style: solid;\n    border-bottom-style: solid;\n    justify-self: stretch;\n    align-self: stretch;\n    display: flex;\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .button .input-label .input-label-span {\n    margin: auto 0;\n  }\n  .button:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .button .input,\n  .button .input-label {\n    border-color: var(--color-primary);\n    background-color: var(--color-light);\n    color: var(--color-primary);\n  }\n  .button.indeterminate .input,\n  .button.indeterminate .input-label {\n    border-color: var(--color-primary);\n    background-color: var(--color-mute);\n    color: var(--color-primary);\n  }\n  .button.checked .input,\n  .button.checked .input-label {\n    border-color: var(--color-primary);\n    background-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .button:is(:active, :hover):not(.disabled) .input,\n  .button:is(:active, :hover):not(.disabled) .input-label {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n  .button.disabled .input {\n    opacity: 0.5;\n    outline: none;\n  }\n  .kol-input:not(.checkbox.switch, .radio) .input:focus,\n  .kol-input:not(.checkbox) .input:focus,\n  .kol-input:is(.checkbox.switch, .radio) input:focus,\n  .kol-input:is(.checkbox) input:focus {\n    cursor: pointer;\n    outline-color: var(--color-primary-variant);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    transition: outline-offset 0.2s linear;\n  }\n}";
+
+var css_248z$r = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-weight: 700;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input[type=color] {\n    border: none;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16)) !important;\n  }\n  input[type=color] {\n    background-color: transparent;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error:not(.hidden-error) .input:focus-within {\n    outline-color: var(--color-danger);\n  }\n  .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+
+var css_248z$q = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-weight: 700;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error:not(.hidden-error) .input:focus-within {\n    outline-color: var(--color-danger);\n  }\n  .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+
+var css_248z$p = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-weight: 700;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error:not(.hidden-error) .input:focus-within {\n    outline-color: var(--color-danger);\n  }\n  .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+
+var css_248z$o = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-weight: 700;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-input .input input[type=file] {\n    padding-top: calc(0.5em + 2rem / var(--kolibri-root-font-size, 16));\n  }\n  input {\n    border: none;\n  }\n  input[type=file] {\n    background-color: transparent;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error:not(.hidden-error) .input:focus-within {\n    outline-color: var(--color-danger);\n  }\n  .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+
+var css_248z$n = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-weight: 700;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error:not(.hidden-error) .input:focus-within {\n    outline-color: var(--color-danger);\n  }\n  .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+
+var css_248z$m = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-weight: 700;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error:not(.hidden-error) .input:focus-within {\n    outline-color: var(--color-danger);\n  }\n  .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+
+var css_248z$l = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  label {\n    cursor: pointer;\n    display: grid;\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n    gap: calc(var(--spacing) * 2);\n    width: 100%;\n  }\n  input {\n    cursor: pointer;\n    width: 100%;\n    border-color: var(--color-subtle);\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  input:hover {\n    border-color: var(--color-primary);\n    box-shadow: calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n  }\n  input:focus:hover {\n    box-shadow: none;\n  }\n  input:hover {\n    border-color: var(--color-primary);\n  }\n  .kol-alert-wc {\n    display: block;\n    width: 100%;\n  }\n  .required legend > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  /* RADIO */\n  fieldset {\n    border: calc(0rem / var(--kolibri-root-font-size, 16));\n    margin: calc(0rem / var(--kolibri-root-font-size, 16));\n    padding: calc(0rem / var(--kolibri-root-font-size, 16));\n    display: grid;\n    gap: 0.25em;\n  }\n  .radio-input-wrapper {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    flex-direction: row;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    min-height: var(--a11y-min-size);\n    position: relative;\n  }\n  .radio-input-wrapper label {\n    cursor: pointer;\n    display: flex;\n    padding-left: calc(var(--spacing) / 2);\n    width: 100%;\n  }\n  .radio-input-wrapper label span {\n    margin-top: 0.125em;\n  }\n  .radio-input-wrapper input[type=radio] {\n    appearance: none;\n    transition: 0.5s;\n    border-radius: 100%;\n    height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n    width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n  }\n  .radio-input-wrapper input[type=radio]:before {\n    content: \"\";\n    cursor: pointer;\n    border-radius: 100%;\n    display: block;\n  }\n  .radio-input-wrapper input[type=radio]:checked:before {\n    background-color: var(--color-primary);\n  }\n  .radio-input-wrapper input[type=radio]:disabled {\n    cursor: not-allowed;\n    background-color: var(--color-mute-variant);\n  }\n  .kol-alert-wc.error {\n    order: 1;\n  }\n  fieldset legend {\n    order: 2;\n    display: contents;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-weight: 700;\n  }\n  fieldset .kol-input {\n    order: 3;\n  }\n  fieldset.error {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    color: var(--color-danger);\n    font-weight: 700;\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  fieldset.error input:focus,\n  fieldset.error select:focus,\n  fieldset.error textarea:focus {\n    outline-color: var(--color-danger) !important;\n  }\n  fieldset.error .kol-alert-wc.error {\n    margin-left: -0.25em;\n    color: var(--color-danger);\n    font-weight: 700;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n  }\n  fieldset.horizontal {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--spacing) calc(var(--spacing) * 2);\n  }\n  fieldset.horizontal legend {\n    display: inline-block;\n    margin-bottom: calc(var(--spacing) / 2);\n  }\n  fieldset .input-slot {\n    gap: var(--spacing);\n  }\n  .radio-input-wrapper label {\n    padding-left: 0;\n  }\n}";
+
+var css_248z$k = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .inputs-wrapper {\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-weight: 700;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  /*.input {\n  \tbackground-color: var(--color-light);\n  \tborder-color: var(--color-subtle);\n  \tborder-radius: var(--border-radius);\n  \tborder-style: solid;\n  \tborder-width: var(--border-width);\n  \tpadding: 0 rem(calc(0.5*16));\n  }*/\n  .input {\n    border-radius: var(--border-radius);\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input.icon-left > .kol-icon:first-child {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input.icon-right > .kol-icon:last-child {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error:not(.hidden-error) .input:focus-within {\n    outline-color: var(--color-danger);\n  }\n  .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n  .kol-input input[type=range] {\n    appearance: none;\n    background-color: var(--color-mute-variant);\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--border-color);\n    height: calc(16rem / var(--kolibri-root-font-size, 16) / 2);\n    line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input input[type=range]::-webkit-slider-thumb {\n    appearance: none;\n    height: calc(20rem / var(--kolibri-root-font-size, 16));\n    width: calc(20rem / var(--kolibri-root-font-size, 16));\n    border-radius: 50%;\n    background: var(--color-primary);\n    cursor: ew-resize;\n    transition: background 0.3s ease-in-out;\n  }\n  .kol-input input[type=range]::-moz-range-thumb {\n    appearance: none;\n    height: calc(20rem / var(--kolibri-root-font-size, 16));\n    width: calc(20rem / var(--kolibri-root-font-size, 16));\n    border-radius: 50%;\n    background: var(--color-primary);\n    cursor: ew-resize;\n    transition: background 0.3s ease-in-out;\n  }\n  /*\t.kol-input input[type=range]::-webkit-slider-runnable-track  {\n  \tappearance: none;\n  \tbox-shadow: none;\n  \tborder: none;\n  \tbackground: transparent;\n  }*/\n}";
+
+var css_248z$j = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-weight: 700;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error:not(.hidden-error) .input:focus-within {\n    outline-color: var(--color-danger);\n  }\n  .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+
+var css_248z$i = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+
+var css_248z$h = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus .kol-span-wc {\n    outline-color: var(--color-primary-variant);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(var(--border-width) * 2);\n    transition: outline-offset 0.2s linear;\n  }\n  :is(a, button) > .kol-span-wc {\n    font-weight: 400;\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    outline-width: calc(var(--border-width) * 2);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.2s;\n    transition-property: background-color, color, border-color;\n  }\n  .primary :is(a, button) > .kol-span-wc,\n  .primary :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .secondary :is(a, button) > .kol-span-wc,\n  .secondary :is(a, button):disabled:hover > .kol-span-wc,\n  .normal :is(a, button) > .kol-span-wc,\n  .normal :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-light);\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n  }\n  .danger :is(a, button) > .kol-span-wc,\n  .danger :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n    color: var(--color-light);\n  }\n  .ghost :is(a, button) > .kol-span-wc,\n  .ghost :is(a, button):disabled:hover > .kol-span-wc {\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n    box-shadow: none;\n    color: var(--color-primary);\n  }\n  /*-----------*/\n  .primary :is(a, button):active > .kol-span-wc,\n  .primary :is(a, button):hover > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):hover > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):hover > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n  }\n  :is(a, button):disabled:hover > .kol-span-wc,\n  :is(a, button):focus:hover > .kol-span-wc {\n    box-shadow: none;\n  }\n  .primary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc {\n    border-color: var(--color-light);\n    box-shadow: none;\n    outline: none;\n  }\n  :is(a, button).hide-label > .kol-span-wc {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  :is(a, button).hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  :is(a, button).loading > .kol-span-wc .kol-icon {\n    animation: spin 5s infinite linear;\n  }\n  /** small ghost button */\n  .ghost :is(a, button).small > .kol-span-wc {\n    border: none;\n    background-color: transparent;\n    box-shadow: none;\n  }\n  .ghost :is(a, button).small > .kol-span-wc > span {\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n  }\n  .ghost :is(a, button).small:active > .kol-span-wc > span,\n  .ghost :is(a, button).small:hover > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  /** :is(a,button) with transparent background */\n  :is(a, button).transparent > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n  :is(a, button).transparent > .kol-span-wc {\n    background-color: transparent;\n    border-color: transparent;\n  }\n}";
+
+var css_248z$g = "@layer kol-theme-component {\n  :is(a, button) {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n    text-decoration-line: underline;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus kol-span-wc {\n    border-radius: calc(var(--border-radius) / 2);\n    outline: var(--border-width) solid;\n    outline-offset: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n  }\n  :is(a, button):visited {\n    color: var(--visited);\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  .skip {\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1em;\n  }\n  .skip:focus {\n    background: white;\n    left: unset;\n    position: unset;\n  }\n  .external-link-icon {\n    margin-left: 0;\n  }\n}";
+
+var css_248z$f = "@layer kol-theme-component {\n  :host .overlay .modal {\n    max-height: calc(100% - 32rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+
+var css_248z$e = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  nav {\n    background-color: var(--color-mute);\n  }\n  ul {\n    list-style: none;\n  }\n  .kol-link-wc {\n    display: flex;\n  }\n  .entry-item a,\n  .entry-item .button {\n    align-items: center;\n    color: var(--color-primary);\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    min-height: var(--a11y-min-size);\n    text-decoration: none;\n  }\n  .vertical .entry-item a,\n  .vertical .entry-item .button {\n    border-left: calc(2rem / var(--kolibri-root-font-size, 16)) solid transparent;\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .horizontal .entry-item a,\n  .horizontal .entry-item .button {\n    padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .vertical .active .entry-item a,\n  .vertical .active .entry-item .button {\n    border-left-color: var(--color-primary);\n  }\n  .entry-item a:focus-visible,\n  .entry-item .button:focus-visible {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .entry-item a:hover {\n    text-decoration: underline;\n  }\n  .list .list {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .active .entry-item a,\n  .active .entry-item .button {\n    font-weight: bold;\n  }\n  .active .list .entry-item a,\n  .active .list .entry-item .button {\n    font-weight: normal;\n    border-left-color: transparent;\n  }\n  .expand-button {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .expand-button .button:hover {\n    background-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .expand-button .button:focus-visible {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .expand-button .button-inner {\n    justify-content: center;\n  }\n}";
+
+var css_248z$d = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .button:focus {\n    outline: none;\n  }\n  .button-inner {\n    background-color: var(--color-light);\n    border-radius: var(--border-radius);\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary);\n    color: var(--color-primary);\n    font-weight: 700;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.2s;\n    transition-property: background-color, color, border-color;\n  }\n  .button:focus .button-inner {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .button:is(:active, :hover):not(:disabled) .button-inner {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  .button:active .button-inner {\n    color: var(--color-light);\n    outline: none;\n  }\n  .selected .button-inner {\n    background-color: var(--color-mute-variant);\n    border-radius: var(--a11y-min-size);\n    border: 0;\n  }\n}";
+
+var css_248z$c = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host progress,\n  :host span {\n    display: block;\n    height: calc(0rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n    width: calc(0rem / var(--kolibri-root-font-size, 16));\n  }\n  :host svg line:first-child,\n  :host svg circle:first-child {\n    fill: transparent;\n    stroke: var(--color-mute-variant);\n  }\n  :host svg line:last-child,\n  :host svg circle:last-child {\n    fill: transparent;\n    stroke: var(--color-primary);\n  }\n  .cycle .progress {\n    stroke: var(--color-primary-variant);\n  }\n  .bar .progress {\n    fill: var(--color-primary-variant);\n  }\n}";
+
+var css_248z$b = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-weight: 700;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  select {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input select {\n    background-color: var(--color-light);\n  }\n  .input > .kol-icon {\n    width: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  select:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error:not(.hidden-error) .input:focus-within {\n    outline-color: var(--color-danger);\n  }\n  .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n  }\n  select[multiple] {\n    overflow: auto;\n  }\n  select option {\n    margin: calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n    border-radius: var(--border-radius);\n    cursor: pointer;\n  }\n  select option:disabled {\n    cursor: not-allowed;\n  }\n  select:not([multiple]) option {\n    padding: 0.5em;\n  }\n  option:active:not(:disabled),\n  option:checked:not(:disabled),\n  option:focus:not(:disabled),\n  option:hover:not(:disabled) {\n    background: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+
+var css_248z$a = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .single-select__group {\n    width: 100%;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select__input {\n    border: none;\n    width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .single-select__input::placeholder {\n    color: var(--color-subtle);\n  }\n  .single-select__input:first-child {\n    padding-left: var(--spacing);\n  }\n  .single-select__input:last-child {\n    padding-right: var(--spacing);\n  }\n  .single-select__input:not(.disabled) .single-select__input:hover {\n    border-color: var(--color-primary);\n  }\n  .single-select__button {\n    display: grid;\n    place-items: center;\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select__button:focus {\n    outline: 0;\n  }\n  .single-select__listbox {\n    border-style: solid;\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    border-color: var(--color-subtle);\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n    overflow-y: auto;\n    overflow-x: hidden;\n    width: 100%;\n  }\n  .single-select__item {\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select__item .radio-label {\n    align-self: center;\n    padding-left: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select__item:focus, .single-select__item.highlighted {\n    background-color: var(--color-primary-variant);\n    color: var(--color-light);\n    outline: 0;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error:not(.hidden-error) {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n    padding: 0;\n  }\n  .kol-input .counter {\n    order: 4;\n  }\n  .kol-input .hint {\n    order: 5;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error:not(.hidden-error) .input:focus-within {\n    outline-color: var(--color-danger);\n  }\n  .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .input {\n    position: relative;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+
+var css_248z$9 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-link-wc > a > .kol-span-wc {\n    border-radius: var(--a11y-min-size);\n    border-style: solid;\n    border-width: var(--border-width);\n    gap: calc(var(--spacing) * 2);\n    line-height: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    color: var(--color-light);\n    cursor: pointer;\n  }\n}";
+
+var css_248z$8 = "@layer kol-theme-component {\n  .dot > span:nth-child(1) {\n    background-color: #fc0;\n  }\n  .dot > span:nth-child(2) {\n    background-color: red;\n  }\n  .dot > span:nth-child(4) {\n    background-color: #666;\n  }\n  /* Override colors for cycle animation */\n  @keyframes prixClipFix {\n    0% {\n      border-color: #fff;\n      clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n    }\n    25% {\n      border-color: #666;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n    }\n    50% {\n      border-color: #fc0;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n    }\n    75% {\n      border-color: red;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n    }\n    100% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n    }\n  }\n}";
+
+var css_248z$7 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    border-color: var(--color-primary);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  .popover {\n    background: var(--color-light);\n    top: calc(100% + 4rem / var(--kolibri-root-font-size, 16));\n  }\n  .secondary-button button {\n    height: 100%;\n  }\n  .horizontal-line {\n    background-color: var(--color-primary);\n    border-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n    width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :is(a, button) > .kol-span-wc {\n    font-weight: 700;\n    border-top-left-radius: var(--border-radius);\n    border-bottom-left-radius: var(--border-radius);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.2s;\n    transition-property: background-color, color, border-color;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus .kol-span-wc {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .primary :is(a, button) > .kol-span-wc,\n  .primary :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .secondary :is(a, button) > .kol-span-wc,\n  .secondary :is(a, button):disabled:hover > .kol-span-wc,\n  .normal :is(a, button) > .kol-span-wc,\n  .normal :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-light);\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n  }\n  .danger :is(a, button) > .kol-span-wc,\n  .danger :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n    color: var(--color-light);\n  }\n  .ghost :is(a, button) > .kol-span-wc,\n  .ghost :is(a, button):disabled:hover > .kol-span-wc {\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n    box-shadow: none;\n    color: var(--color-primary);\n  }\n  /*-----------*/\n  .primary :is(a, button):active > .kol-span-wc,\n  .primary :is(a, button):hover > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):hover > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):hover > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n  }\n  :is(a, button):disabled:hover > .kol-span-wc,\n  :is(a, button):focus:hover > .kol-span-wc {\n    box-shadow: none;\n  }\n  .primary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc {\n    border-color: var(--color-light);\n    box-shadow: none;\n    outline: none;\n  }\n  :is(a, button).hide-label > .kol-span-wc {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  :is(a, button).hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  :is(a, button).loading > .kol-span-wc .kol-icon {\n    animation: spin 5s infinite linear;\n  }\n  /** small ghost button */\n  .ghost :is(a, button).small > .kol-span-wc {\n    border: none;\n    background-color: transparent;\n    box-shadow: none;\n  }\n  .ghost :is(a, button).small > .kol-span-wc > span {\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n  }\n  .ghost :is(a, button).small:active > .kol-span-wc > span,\n  .ghost :is(a, button).small:hover > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  /** :is(a,button) with transparent background */\n  :is(a, button).transparent > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n  :is(a, button).transparent > .kol-span-wc {\n    background-color: transparent;\n    border-color: transparent;\n  }\n  .badge-text-hint {\n    background: var(--color-mute-variant);\n    border-radius: calc(3rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n}";
+
+var css_248z$6 = "@layer kol-theme-component {\n  :host * {\n    hyphens: var(--hyphens);\n    font-family: var(--font-family);\n    line-height: var(--line-height);\n    word-break: break-word;\n  }\n  :host > div {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  caption {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n    font-weight: bold;\n  }\n  th {\n    font-weight: normal;\n    color: var(--color-primary);\n  }\n  :host table thead tr:first-child th,\n  :host table thead tr:first-child td {\n    border-width: 0;\n    border-top-width: calc(var(--border-width) * 2);\n    border-style: solid;\n    border-color: var(--color-primary-variant);\n  }\n  table {\n    border-width: 0;\n    border-bottom-width: calc(var(--border-width) * 2);\n    border-style: solid;\n    border-color: var(--color-primary-variant);\n  }\n  .head-spacer {\n    display: table-row;\n  }\n  .head-spacer td {\n    padding: 0;\n    border-width: 0;\n    border-bottom-width: calc(var(--border-width) * 2);\n    border-style: solid;\n    border-color: var(--color-primary-variant);\n  }\n  .table {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .table:has(.focus-element:focus) {\n    outline-color: var(--color-primary-variant);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: outline-offset 0.2s linear;\n  }\n  table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  th {\n    background-color: var(--color-light);\n  }\n  th div {\n    width: 100%;\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  tr:nth-child(even) {\n    background-color: var(--color-mute);\n  }\n  th,\n  td {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  th[aria-sort=ascending],\n  th[aria-sort=descending] {\n    font-weight: 700;\n  }\n}";
+
+var css_248z$5 = "@layer kol-theme-component {\n  :host * {\n    hyphens: var(--hyphens);\n    font-family: var(--font-family);\n    line-height: var(--line-height);\n    word-break: break-word;\n  }\n  :host > div {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  caption {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n    font-weight: bold;\n  }\n  th {\n    font-weight: normal;\n    color: var(--color-primary);\n  }\n  :host table thead tr:first-child th,\n  :host table thead tr:first-child td {\n    border-width: 0;\n    border-top-width: calc(var(--border-width) * 2);\n    border-style: solid;\n    border-color: var(--color-primary-variant);\n  }\n  table {\n    border-width: 0;\n    border-bottom-width: calc(var(--border-width) * 2);\n    border-style: solid;\n    border-color: var(--color-primary-variant);\n  }\n  .head-spacer {\n    display: table-row;\n  }\n  .head-spacer td {\n    padding: 0;\n    border-width: 0;\n    border-bottom-width: calc(var(--border-width) * 2);\n    border-style: solid;\n    border-color: var(--color-primary-variant);\n  }\n  .table {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .table:has(.focus-element:focus) {\n    outline-color: var(--color-primary-variant);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: outline-offset 0.2s linear;\n  }\n  table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  th {\n    background-color: var(--color-light);\n  }\n  th div {\n    width: 100%;\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  tr:nth-child(even) {\n    background-color: var(--color-mute);\n  }\n  th,\n  td {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  th[aria-sort=ascending],\n  th[aria-sort=descending] {\n    font-weight: 700;\n  }\n}";
+
+var css_248z$4 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .kol-button-group-wc {\n    display: inline-flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n  }\n  button {\n    box-sizing: border-box;\n    background-color: transparent;\n    border: 0;\n    border-radius: var(--border-radius);\n    font-style: normal;\n    font-weight: 400;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(19.2rem / var(--kolibri-root-font-size, 16));\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    color: var(--color-subtle);\n    padding: 0;\n    transition: all 0.2s linear;\n  }\n  button.selected,\n  button .primary {\n    color: var(--color-primary);\n  }\n  button.selected:hover {\n    color: var(--color-light);\n  }\n  button:hover {\n    color: var(--color-light);\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n  }\n  *[tabindex]:is(.kol-button-group-wc button) {\n    width: 100%;\n    padding: 0 calc(4rem / var(--kolibri-root-font-size, 16));\n    border: var(--border-width) solid transparent;\n    border-radius: var(--border-radius);\n    border-bottom-width: var(--border-width);\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n    position: relative;\n    top: var(--border-width);\n    box-shadow: none;\n  }\n  *[tabindex]:is(.kol-button-group-wc button.selected) {\n    border-color: var(--color-primary);\n    border-bottom-color: var(--page-bg);\n  }\n  *[tabindex]:is(.kol-button-group-wc button.selected):hover {\n    border-bottom-color: var(--color-primary);\n  }\n  *[tabindex]:is(.kol-button-group-wc button.selected):before {\n    position: absolute;\n    top: 0;\n    content: \"\";\n    height: calc(16rem / var(--kolibri-root-font-size, 16) / 4);\n    background-color: var(--color-primary);\n    border-top-right-radius: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n    border-top-left-radius: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n    left: 0;\n    right: 0;\n  }\n  *[tabindex]:is(.kol-button-group-wc button.selected):after {\n    content: \" \";\n    background-color: var(--page-bg);\n    height: calc(6rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    width: calc(100% + 10rem / var(--kolibri-root-font-size, 16));\n    bottom: calc(-7rem / var(--kolibri-root-font-size, 16));\n    left: calc(-5rem / var(--kolibri-root-font-size, 16));\n  }\n  button .kol-span-wc > span {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-icon {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .tabs-content {\n    padding: 0.25em 0;\n  }\n  div[role=tabpanel] {\n    height: 100%;\n  }\n  div.grid {\n    height: 100%;\n  }\n  :host > .tabs-align-right {\n    display: grid;\n    grid-template-columns: 1fr auto;\n  }\n  :host > .tabs-align-right .kol-button-group-wc {\n    display: grid;\n    order: 2;\n  }\n  :host > .tabs-align-left {\n    display: grid;\n    grid-template-columns: auto 1fr;\n  }\n  :host > .tabs-align-left .kol-button-group-wc {\n    display: grid;\n    order: 0;\n  }\n  :host > .tabs-align-bottom {\n    display: grid;\n    grid-template-rows: 1fr auto;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc {\n    order: 2;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc > div {\n    display: flex;\n  }\n  :host > .tabs-align-bottom > .kol-button-group-wc > div > div:first-child {\n    margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n  }\n  :host > .tabs-align-bottom > .kol-button-group-wc > div > div {\n    margin: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > .tabs-align-top {\n    display: grid;\n    grid-template-rows: auto 1fr;\n  }\n  :host > .tabs-align-top .kol-button-group-wc {\n    order: 0;\n  }\n  :host > .tabs-align-top .kol-button-group-wc > div {\n    display: flex;\n  }\n  :host > .tabs-align-top > .kol-button-group-wc > div > div:first-child {\n    margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n  }\n  :host > .tabs-align-top > .kol-button-group-wc > div > div {\n    margin: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div {\n    display: grid;\n  }\n  :host > div.tabs-align-left {\n    grid-template-columns: auto 1fr;\n  }\n  :host > div.tabs-align-right {\n    grid-template-columns: 1fr auto;\n  }\n  :host > .tabs-align-left .kol-button-group-wc,\n  :host > .tabs-align-top .kol-button-group-wc {\n    order: 0;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc,\n  :host > .tabs-align-right .kol-button-group-wc {\n    order: 1;\n  }\n  :host > .tabs-align-left .kol-button-group-wc,\n  :host > .tabs-align-right .kol-button-group-wc {\n    gap: inherit;\n  }\n  :host > div.tabs-align-left .kol-button-group-wc > div,\n  :host > div.tabs-align-left .kol-button-group-wc > div > div,\n  :host > div.tabs-align-right .kol-button-group-wc > div,\n  :host > div.tabs-align-right .kol-button-group-wc > div > div {\n    display: grid;\n  }\n  :host > div.tabs-align-left .kol-button-group-wc > div > div .kol-button-wc,\n  :host > div.tabs-align-right .kol-button-group-wc > div > div .kol-button-wc {\n    width: 100%;\n  }\n  :host > div.tabs-align-bottom .kol-button-group-wc div,\n  :host > div.tabs-align-top .kol-button-group-wc div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  :host .kol-button-group-wc {\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary);\n  }\n}";
+
+var css_248z$3 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-weight: 700;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .counter {\n    order: 4;\n  }\n  .kol-input .hint {\n    order: 5;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  textarea {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  textarea:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error:not(.hidden-error) .input:focus-within {\n    outline-color: var(--color-danger);\n  }\n  .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n  }\n  select[multiple],\n  textarea {\n    overflow: auto;\n  }\n  textarea {\n    display: block;\n  }\n  .input {\n    position: relative;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+
+var css_248z$2 = "@layer kol-theme-component {\n  .msg {\n    border-width: 0 !important;\n  }\n  .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  .msg {\n    align-items: start;\n  }\n  .default {\n    border-color: var(--color-subtle);\n  }\n  .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  .error {\n    border-color: var(--color-danger);\n  }\n  .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  .info {\n    border-color: var(--color-primary);\n  }\n  .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  .success {\n    border-color: var(--color-success);\n  }\n  .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  .warning {\n    border-color: var(--color-warning);\n  }\n  .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  .heading-icon {\n    color: var(--color-light);\n  }\n  .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  .card.error .close {\n    background-color: var(--color-danger);\n  }\n  .card.info .close {\n    background-color: var(--color-primary);\n  }\n  .card.success .close {\n    background-color: var(--color-success);\n  }\n  .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  :host {\n    top: calc(16rem / var(--kolibri-root-font-size, 16));\n    right: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: calc(440rem / var(--kolibri-root-font-size, 16));\n  }\n  .toast {\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+
+var css_248z$1 = "@layer kol-theme-component {\n  .tree ul {\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid transparent;\n    border-radius: var(--border-radius);\n  }\n  .tree:focus-within {\n    outline: 0;\n  }\n  .tree:focus-within ul {\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary);\n  }\n}";
+
+var css_248z = "@layer kol-theme-component {\n  .tree-link {\n    display: block;\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n  }\n  .tree-link:hover, .tree-link:focus-within {\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary);\n    background-color: var(--color-primary-variant);\n  }\n  .tree-link:hover > a, .tree-link:focus-within > a {\n    outline-offset: 0;\n  }\n  .tree-link:hover > a,\n  .tree-link:hover .toggle-button, .tree-link:focus-within > a,\n  .tree-link:focus-within .toggle-button {\n    color: var(--color-light);\n  }\n  .tree-link.active {\n    background-color: var(--color-primary);\n  }\n  .tree-link.active a,\n  .tree-link.active .toggle-button {\n    color: var(--color-light);\n  }\n  .tree-link a {\n    display: block;\n    color: var(--color-text);\n    text-decoration: none;\n    text-align: left;\n  }\n  .tree-link a .toggle-button {\n    display: inline-block;\n  }\n  .tree-link a .toggle-button:hover {\n    transform: scale(1.3);\n  }\n  .tree-link > a {\n    padding-left: max(30rem / var(--kolibri-root-font-size, 16) * var(--level), 8rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+
+const BWSt = KoliBri.createTheme('bwst', {
+    GLOBAL: css_248z$J,
+    'KOL-ABBR': css_248z$I,
+    'KOL-ACCORDION': css_248z$H,
+    'KOL-ALERT': css_248z$G,
+    'KOL-AVATAR': css_248z$F,
+    'KOL-BADGE': css_248z$E,
+    'KOL-BREADCRUMB': css_248z$D,
+    'KOL-BUTTON': css_248z$C,
+    'KOL-BUTTON-GROUP': css_248z$B,
+    'KOL-BUTTON-LINK': css_248z$A,
+    'KOL-CARD': css_248z$z,
+    'KOL-COMBOBOX': css_248z$y,
+    'KOL-DETAILS': css_248z$x,
+    'KOL-FORM': css_248z$w,
+    'KOL-HEADING': css_248z$v,
+    'KOL-ICON': css_248z$u,
+    'KOL-INDENTED-TEXT': css_248z$t,
+    'KOL-INPUT-CHECKBOX': css_248z$s,
+    'KOL-INPUT-COLOR': css_248z$r,
+    'KOL-INPUT-DATE': css_248z$q,
+    'KOL-INPUT-EMAIL': css_248z$p,
+    'KOL-INPUT-FILE': css_248z$o,
+    'KOL-INPUT-NUMBER': css_248z$n,
+    'KOL-INPUT-PASSWORD': css_248z$m,
+    'KOL-INPUT-RADIO': css_248z$l,
+    'KOL-INPUT-RANGE': css_248z$k,
+    'KOL-INPUT-TEXT': css_248z$j,
+    'KOL-KOLIBRI': css_248z$i,
+    'KOL-LINK': css_248z$g,
+    'KOL-LINK-BUTTON': css_248z$h,
+    'KOL-MODAL': css_248z$f,
+    'KOL-NAV': css_248z$e,
+    'KOL-PAGINATION': css_248z$d,
+    'KOL-PROGRESS': css_248z$c,
+    'KOL-SELECT': css_248z$b,
+    'KOL-SINGLE-SELECT': css_248z$a,
+    'KOL-SKIP-NAV': css_248z$9,
+    'KOL-SPIN': css_248z$8,
+    'KOL-SPLIT-BUTTON': css_248z$7,
+    'KOL-TABLE-STATEFUL': css_248z$6,
+    'KOL-TABLE-STATELESS': css_248z$5,
+    'KOL-TABS': css_248z$4,
+    'KOL-TEXTAREA': css_248z$3,
+    'KOL-TOAST-CONTAINER': css_248z$2,
+    'KOL-TREE': css_248z$1,
+    'KOL-TREE-ITEM': css_248z,
+});
+
+export { BWSt };
+//# sourceMappingURL=index.mjs.map