npm - @public-ui/theme-default - Versions diffs - 4.1.0 → 4.1.1-rc.1 - Mend

@public-ui/theme-default 4.1.0 → 4.1.1-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/assets/kolicons/kolicons.eot +0 -0
package/assets/kolicons/kolicons.ttf +0 -0
package/assets/kolicons/kolicons.woff +0 -0
package/assets/kolicons/kolicons.woff2 +0 -0
package/assets/kolicons/style.css +6 -6
package/dist/index.cjs +6 -6
package/dist/index.cjs.map +1 -1
package/dist/index.mjs +6 -6
package/dist/index.mjs.map +1 -1
package/package.json +6 -6

package/dist/index.cjs CHANGED Viewed

@@ -1004,7 +1004,7 @@ var css_248z$B = "/* forward the rem function */\n@layer kol-theme-component {\n
 var css_248z$A = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-card :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-card .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-card .kol-button:focus {\n    outline: none;\n  }\n  .kol-card .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-card .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-card .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-card .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-card .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-card .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-card .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-card .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-card .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-card .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-card .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-card .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n    position: relative;\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-card .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    outline-color: var(--color-danger);\n  }\n  .kol-card .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-card .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-card .kol-button--hide-label .kol-card .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-card .kol-button--hide-label .kol-card .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-card .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-card .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-card .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-card .kol-close-button .kol-button--normal {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n    --kol-focus-outline-offset: -2px;\n  }\n  .kol-card {\n    background-color: var(--color-light);\n    box-shadow: 0 0 4px color-mix(in srgb, black 80%, var(--color-subtle));\n    border-radius: var(--border-radius);\n    width: 100%;\n    height: 100%;\n  }\n  .kol-card__header {\n    display: block;\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.75;\n  }\n  .kol-card__content {\n    padding: 0 calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-card__content ::slotted(p:first-child) {\n    margin-top: 0;\n  }\n  .kol-card__content ::slotted(p:last-child) {\n    margin-bottom: 0;\n  }\n}";
-var css_248z$z = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-alert .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-alert .kol-button:focus {\n    outline: none;\n  }\n  .kol-alert .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-alert .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n    position: relative;\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    outline-color: var(--color-danger);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-alert .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-close-button .kol-button--normal {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n    --kol-focus-outline-offset: -2px;\n  }\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    --text-color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    --text-color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    -moz-column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n         column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: stretch;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled, .kol-input-container:has(.kol-input--readonly)):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container:has(.kol-input--readonly), .kol-input-container:has(.kol-textarea--readonly), .kol-input-container--disabled {\n    border-color: var(--color-mute-variant);\n    border-width: 1px;\n    border-bottom: 2px solid var(--color-subtle);\n  }\n  .kol-input-container:has(.kol-input--readonly) .kol-input-container__container, .kol-input-container:has(.kol-textarea--readonly) .kol-input-container__container, .kol-input-container--disabled .kol-input-container__container {\n    padding-top: 1px;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input-container {\n    position: relative;\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n}\n@layer kol-theme-component {\n  .kol-alert :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-alert .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-alert .kol-button:focus {\n    outline: none;\n  }\n  .kol-alert .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-alert .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n    position: relative;\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    outline-color: var(--color-danger);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-alert .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-close-button .kol-button--normal {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n    --kol-focus-outline-offset: -2px;\n  }\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    --text-color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    --text-color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n    position: relative;\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    outline-color: var(--color-danger);\n  }\n  .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-button--hide-label .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-close-button .kol-button--normal {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n    --kol-focus-outline-offset: -2px;\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    min-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    line-height: 1;\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    color: var(--color-primary-variant);\n  }\n  .kol-custom-suggestions-option:not(.kol-custom-suggestions-option--disabled):focus {\n    color: var(--color-light);\n    background-color: var(--color-primary-variant);\n    outline: 0;\n  }\n  .kol-custom-suggestions-option--disabled:focus, .kol-custom-suggestions-option--disabled:focus * {\n    outline: 0;\n    cursor: not-allowed;\n  }\n  .kol-custom-suggestions-options-group {\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    right: 0;\n    left: 0;\n    z-index: 5;\n    max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * 5 + 2 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 1px;\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    min-height: 0;\n    padding-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    place-items: center;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  .kol-combobox__group {\n    display: inline-flex;\n    width: 100%;\n    align-items: center;\n  }\n}";
+var css_248z$z = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-alert .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-alert .kol-button:focus {\n    outline: none;\n  }\n  .kol-alert .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-alert .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n    position: relative;\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    outline-color: var(--color-danger);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-alert .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-close-button .kol-button--normal {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n    --kol-focus-outline-offset: -2px;\n  }\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    --text-color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    --text-color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    -moz-column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n         column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: stretch;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled, .kol-input-container:has(.kol-input--readonly)):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container:has(.kol-input--readonly), .kol-input-container:has(.kol-textarea--readonly), .kol-input-container--disabled {\n    border-color: var(--color-mute-variant);\n    border-width: 1px;\n    border-bottom: 2px solid var(--color-subtle);\n  }\n  .kol-input-container:has(.kol-input--readonly) .kol-input-container__container, .kol-input-container:has(.kol-textarea--readonly) .kol-input-container__container, .kol-input-container--disabled .kol-input-container__container {\n    padding-top: 1px;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input-container {\n    position: relative;\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-combobox__group {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-combobox__group {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-combobox__group {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-combobox__group {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n  :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n    position: relative;\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    outline-color: var(--color-danger);\n  }\n  .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-button--hide-label .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-close-button .kol-button--normal {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n    --kol-focus-outline-offset: -2px;\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    min-height: to-rem(40);\n    padding: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    line-height: 1;\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    color: var(--color-primary-variant);\n  }\n  .kol-custom-suggestions-option:not(.kol-custom-suggestions-option--disabled):focus {\n    color: var(--color-light);\n    background-color: var(--color-primary-variant);\n    outline: 0;\n  }\n  .kol-custom-suggestions-option--disabled:focus, .kol-custom-suggestions-option--disabled:focus * {\n    outline: 0;\n    cursor: not-allowed;\n  }\n  .kol-custom-suggestions-options-group {\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    right: 0;\n    left: 0;\n    z-index: 5;\n    max-height: calc(to-rem(40) * 5 + 2 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 1px;\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    min-height: 0;\n    padding-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    place-items: center;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  .kol-combobox__group {\n    display: inline-flex;\n    width: 100%;\n    align-items: center;\n  }\n}";
 var css_248z$y = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-details {\n    display: grid;\n    width: 100%;\n    height: 100%;\n  }\n  .kol-details__content.indented-text {\n    width: 100%;\n    margin-left: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(18 * 1rem / var(--kolibri-root-font-size, 16)) 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 2px solid var(--color-primary-variant);\n    margin: calc(4 * 1rem / var(--kolibri-root-font-size, 16)) 0 0 calc(10.4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-details__heading {\n    margin: 0;\n  }\n  .kol-details__heading-button .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-details__heading-button .kol-span__container {\n    display: flex;\n    gap: 0;\n    text-align: left;\n  }\n  .kol-details__heading-button .kol-span__label {\n    border-bottom-color: #000;\n  }\n  .kol-details__heading-button .kol-button:focus-within {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n    cursor: pointer;\n  }\n}";
@@ -1022,13 +1022,13 @@ var css_248z$s = "/* forward the rem function */\n@layer kol-theme-component {\n
 var css_248z$r = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-alert .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-alert .kol-button:focus {\n    outline: none;\n  }\n  .kol-alert .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-alert .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n    position: relative;\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    outline-color: var(--color-danger);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-alert .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-close-button .kol-button--normal {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n    --kol-focus-outline-offset: -2px;\n  }\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    --text-color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    --text-color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    -moz-column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n         column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: stretch;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled, .kol-input-container:has(.kol-input--readonly)):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container:has(.kol-input--readonly), .kol-input-container:has(.kol-textarea--readonly), .kol-input-container--disabled {\n    border-color: var(--color-mute-variant);\n    border-width: 1px;\n    border-bottom: 2px solid var(--color-subtle);\n  }\n  .kol-input-container:has(.kol-input--readonly) .kol-input-container__container, .kol-input-container:has(.kol-textarea--readonly) .kol-input-container__container, .kol-input-container--disabled .kol-input-container__container {\n    padding-top: 1px;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input-color__inputs-wrapper {\n    height: 100%;\n  }\n  .kol-input-color__input--text, .kol-input-color__input--color {\n    background-color: var(--color-light);\n    min-height: calc(var(--a11y-min-size) - 8 * 1rem / var(--kolibri-root-font-size, 16));\n    border: 1px solid var(--color-subtle);\n  }\n}";
-var css_248z$q = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-alert .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-alert .kol-button:focus {\n    outline: none;\n  }\n  .kol-alert .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-alert .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n    position: relative;\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    outline-color: var(--color-danger);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-alert .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-close-button .kol-button--normal {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n    --kol-focus-outline-offset: -2px;\n  }\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    --text-color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    --text-color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    -moz-column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n         column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: stretch;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled, .kol-input-container:has(.kol-input--readonly)):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container:has(.kol-input--readonly), .kol-input-container:has(.kol-textarea--readonly), .kol-input-container--disabled {\n    border-color: var(--color-mute-variant);\n    border-width: 1px;\n    border-bottom: 2px solid var(--color-subtle);\n  }\n  .kol-input-container:has(.kol-input--readonly) .kol-input-container__container, .kol-input-container:has(.kol-textarea--readonly) .kol-input-container__container, .kol-input-container--disabled .kol-input-container__container {\n    padding-top: 1px;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input-container {\n    position: relative;\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n}\n@layer kol-theme-component {\n  *::-webkit-calendar-picker-indicator {\n    outline-color: var(--color-primary-variant);\n    border-radius: var(--border-radius);\n  }\n}";
+var css_248z$q = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-alert .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-alert .kol-button:focus {\n    outline: none;\n  }\n  .kol-alert .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-alert .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n    position: relative;\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    outline-color: var(--color-danger);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-alert .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-close-button .kol-button--normal {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n    --kol-focus-outline-offset: -2px;\n  }\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    --text-color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    --text-color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    -moz-column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n         column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: stretch;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled, .kol-input-container:has(.kol-input--readonly)):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container:has(.kol-input--readonly), .kol-input-container:has(.kol-textarea--readonly), .kol-input-container--disabled {\n    border-color: var(--color-mute-variant);\n    border-width: 1px;\n    border-bottom: 2px solid var(--color-subtle);\n  }\n  .kol-input-container:has(.kol-input--readonly) .kol-input-container__container, .kol-input-container:has(.kol-textarea--readonly) .kol-input-container__container, .kol-input-container--disabled .kol-input-container__container {\n    padding-top: 1px;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input-container {\n    position: relative;\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n  *::-webkit-calendar-picker-indicator {\n    outline-color: var(--color-primary-variant);\n    border-radius: var(--border-radius);\n  }\n}";
 var css_248z$p = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-alert .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-alert .kol-button:focus {\n    outline: none;\n  }\n  .kol-alert .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-alert .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n    position: relative;\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    outline-color: var(--color-danger);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-alert .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-close-button .kol-button--normal {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n    --kol-focus-outline-offset: -2px;\n  }\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    --text-color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    --text-color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    -moz-column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n         column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: stretch;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled, .kol-input-container:has(.kol-input--readonly)):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container:has(.kol-input--readonly), .kol-input-container:has(.kol-textarea--readonly), .kol-input-container--disabled {\n    border-color: var(--color-mute-variant);\n    border-width: 1px;\n    border-bottom: 2px solid var(--color-subtle);\n  }\n  .kol-input-container:has(.kol-input--readonly) .kol-input-container__container, .kol-input-container:has(.kol-textarea--readonly) .kol-input-container__container, .kol-input-container--disabled .kol-input-container__container {\n    padding-top: 1px;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input-container {\n    position: relative;\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n}";
-var css_248z$o = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-alert .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-alert .kol-button:focus {\n    outline: none;\n  }\n  .kol-alert .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-alert .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n    position: relative;\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    outline-color: var(--color-danger);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-alert .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-close-button .kol-button--normal {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n    --kol-focus-outline-offset: -2px;\n  }\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    --text-color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    --text-color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    -moz-column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n         column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: stretch;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled, .kol-input-container:has(.kol-input--readonly)):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container:has(.kol-input--readonly), .kol-input-container:has(.kol-textarea--readonly), .kol-input-container--disabled {\n    border-color: var(--color-mute-variant);\n    border-width: 1px;\n    border-bottom: 2px solid var(--color-subtle);\n  }\n  .kol-input-container:has(.kol-input--readonly) .kol-input-container__container, .kol-input-container:has(.kol-textarea--readonly) .kol-input-container__container, .kol-input-container--disabled .kol-input-container__container {\n    padding-top: 1px;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input-container {\n    position: relative;\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n}\n@layer kol-theme-component {\n  :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n    position: relative;\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    outline-color: var(--color-danger);\n  }\n  .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-button--hide-label .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-close-button .kol-button--normal {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n    --kol-focus-outline-offset: -2px;\n  }\n  .kol-input-container {\n    padding: 0;\n    gap: initial;\n  }\n  .kol-input-container__filename {\n    color: var(--color-subtle);\n    padding-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--is-dragover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input-container__filename {\n    padding-left: calc(52 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button {\n    min-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button__text {\n    white-space: nowrap;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: calc(var(--border-radius) - 2px);\n    border-top-left-radius: 0;\n    border-top-right-radius: calc(var(--border-radius) - 2px);\n  }\n  .kol-input {\n    background-color: transparent;\n    padding-top: calc(0.5em + 2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$o = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-alert .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-alert .kol-button:focus {\n    outline: none;\n  }\n  .kol-alert .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-alert .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n    position: relative;\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    outline-color: var(--color-danger);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-alert .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-close-button .kol-button--normal {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n    --kol-focus-outline-offset: -2px;\n  }\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    --text-color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    --text-color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    -moz-column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n         column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: stretch;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled, .kol-input-container:has(.kol-input--readonly)):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container:has(.kol-input--readonly), .kol-input-container:has(.kol-textarea--readonly), .kol-input-container--disabled {\n    border-color: var(--color-mute-variant);\n    border-width: 1px;\n    border-bottom: 2px solid var(--color-subtle);\n  }\n  .kol-input-container:has(.kol-input--readonly) .kol-input-container__container, .kol-input-container:has(.kol-textarea--readonly) .kol-input-container__container, .kol-input-container--disabled .kol-input-container__container {\n    padding-top: 1px;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input-container {\n    position: relative;\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input-container__container {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input-container__container {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input-container__container {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input-container__container {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n  :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n    position: relative;\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    outline-color: var(--color-danger);\n  }\n  .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-button--hide-label .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-close-button .kol-button--normal {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n    --kol-focus-outline-offset: -2px;\n  }\n  .kol-input-container {\n    padding: 0;\n    padding-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    gap: initial;\n  }\n  .kol-input-container__filename {\n    color: var(--color-subtle);\n  }\n  .kol-input-container--is-dragover {\n    border-color: var(--color-primary);\n  }\n  .kol-button {\n    min-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button__text {\n    white-space: nowrap;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: calc(var(--border-radius) - 2px);\n    border-top-left-radius: 0;\n    border-top-right-radius: calc(var(--border-radius) - 2px);\n  }\n  .kol-input {\n    background-color: transparent;\n    padding-top: calc(0.5em + 2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}";
-var css_248z$n = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-alert .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-alert .kol-button:focus {\n    outline: none;\n  }\n  .kol-alert .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-alert .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n    position: relative;\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    outline-color: var(--color-danger);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-alert .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-close-button .kol-button--normal {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n    --kol-focus-outline-offset: -2px;\n  }\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    --text-color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    --text-color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    -moz-column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n         column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: stretch;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled, .kol-input-container:has(.kol-input--readonly)):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container:has(.kol-input--readonly), .kol-input-container:has(.kol-textarea--readonly), .kol-input-container--disabled {\n    border-color: var(--color-mute-variant);\n    border-width: 1px;\n    border-bottom: 2px solid var(--color-subtle);\n  }\n  .kol-input-container:has(.kol-input--readonly) .kol-input-container__container, .kol-input-container:has(.kol-textarea--readonly) .kol-input-container__container, .kol-input-container--disabled .kol-input-container__container {\n    padding-top: 1px;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input-container {\n    position: relative;\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n}\n@layer kol-theme-component {\n  .kol-input-number .kol-input-number__step-button {\n    color: var(--color-primary);\n    border-radius: var(--border-radius);\n    transition-duration: 0.3s;\n    transition-property: background-color, color;\n  }\n  .kol-input-number .kol-input-number__step-button:focus {\n    outline: 0;\n  }\n  .kol-input-number .kol-input-number__step-button:hover {\n    color: var(--color-light);\n    background-color: var(--color-primary);\n  }\n  .kol-input-number .kol-input {\n    min-width: calc(3 * var(--a11y-min-size) + 8px);\n  }\n}";
+var css_248z$n = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-alert .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-alert .kol-button:focus {\n    outline: none;\n  }\n  .kol-alert .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-alert .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n    position: relative;\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    outline-color: var(--color-danger);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-alert .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-close-button .kol-button--normal {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n    --kol-focus-outline-offset: -2px;\n  }\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    --text-color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    --text-color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    -moz-column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n         column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: stretch;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled, .kol-input-container:has(.kol-input--readonly)):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container:has(.kol-input--readonly), .kol-input-container:has(.kol-textarea--readonly), .kol-input-container--disabled {\n    border-color: var(--color-mute-variant);\n    border-width: 1px;\n    border-bottom: 2px solid var(--color-subtle);\n  }\n  .kol-input-container:has(.kol-input--readonly) .kol-input-container__container, .kol-input-container:has(.kol-textarea--readonly) .kol-input-container__container, .kol-input-container--disabled .kol-input-container__container {\n    padding-top: 1px;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input-container {\n    position: relative;\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n  .kol-input-number .kol-input-number__step-button {\n    color: var(--color-primary);\n    border-radius: var(--border-radius);\n    transition-duration: 0.3s;\n    transition-property: background-color, color;\n  }\n  .kol-input-number .kol-input-number__step-button:focus {\n    outline: 0;\n  }\n  .kol-input-number .kol-input-number__step-button:hover {\n    color: var(--color-light);\n    background-color: var(--color-primary);\n  }\n  .kol-input-number .kol-input {\n    min-width: calc(3 * var(--a11y-min-size) + 8px);\n  }\n}";
 var css_248z$m = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-alert .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-alert .kol-button:focus {\n    outline: none;\n  }\n  .kol-alert .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-alert .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n    position: relative;\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    outline-color: var(--color-danger);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-alert .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-close-button .kol-button--normal {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n    --kol-focus-outline-offset: -2px;\n  }\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    --text-color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    --text-color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    -moz-column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n         column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: stretch;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled, .kol-input-container:has(.kol-input--readonly)):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container:has(.kol-input--readonly), .kol-input-container:has(.kol-textarea--readonly), .kol-input-container--disabled {\n    border-color: var(--color-mute-variant);\n    border-width: 1px;\n    border-bottom: 2px solid var(--color-subtle);\n  }\n  .kol-input-container:has(.kol-input--readonly) .kol-input-container__container, .kol-input-container:has(.kol-textarea--readonly) .kol-input-container__container, .kol-input-container--disabled .kol-input-container__container {\n    padding-top: 1px;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input-container {\n    position: relative;\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n}";
@@ -1052,7 +1052,7 @@ var css_248z$d = "/* forward the rem function */\n@layer kol-theme-component {\n
 var css_248z$c = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-alert .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-alert .kol-button:focus {\n    outline: none;\n  }\n  .kol-alert .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-alert .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n    position: relative;\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    outline-color: var(--color-danger);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-alert .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-close-button .kol-button--normal {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n    --kol-focus-outline-offset: -2px;\n  }\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    --text-color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    --text-color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    -moz-column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n         column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: stretch;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled, .kol-input-container:has(.kol-input--readonly)):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container:has(.kol-input--readonly), .kol-input-container:has(.kol-textarea--readonly), .kol-input-container--disabled {\n    border-color: var(--color-mute-variant);\n    border-width: 1px;\n    border-bottom: 2px solid var(--color-subtle);\n  }\n  .kol-input-container:has(.kol-input--readonly) .kol-input-container__container, .kol-input-container:has(.kol-textarea--readonly) .kol-input-container__container, .kol-input-container--disabled .kol-input-container__container {\n    padding-top: 1px;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-select {\n    border: none;\n  }\n  .kol-select[multiple] {\n    overflow: auto;\n  }\n  .kol-select__option {\n    border-radius: var(--border-radius);\n    margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0;\n  }\n  .kol-select__option:active:not(:disabled), .kol-select__option:checked:not(:disabled), .kol-select__option:focus:not(:disabled), .kol-select__option:hover:not(:disabled) {\n    color: var(--color-light);\n    background-color: var(--color-primary-variant);\n  }\n  .kol-select:not([multiple]) .kol-select__option {\n    padding: 0.5em;\n  }\n  .kol-select:not([multiple], [size]) {\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])) {\n    position: relative;\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])) .kol-select {\n    border-left: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n    border-right: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--start:not(:empty)) .kol-select {\n    border-left-width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--end:not(:empty)) .kol-select {\n    border-right-width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-select {\n    border-right-width: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n}";
-var css_248z$b = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-alert .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-alert .kol-button:focus {\n    outline: none;\n  }\n  .kol-alert .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-alert .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n    position: relative;\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    outline-color: var(--color-danger);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-alert .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-close-button .kol-button--normal {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n    --kol-focus-outline-offset: -2px;\n  }\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    --text-color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    --text-color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    -moz-column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n         column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: stretch;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled, .kol-input-container:has(.kol-input--readonly)):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container:has(.kol-input--readonly), .kol-input-container:has(.kol-textarea--readonly), .kol-input-container--disabled {\n    border-color: var(--color-mute-variant);\n    border-width: 1px;\n    border-bottom: 2px solid var(--color-subtle);\n  }\n  .kol-input-container:has(.kol-input--readonly) .kol-input-container__container, .kol-input-container:has(.kol-textarea--readonly) .kol-input-container__container, .kol-input-container--disabled .kol-input-container__container {\n    padding-top: 1px;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input-container {\n    position: relative;\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n}\n@layer kol-theme-component {\n  .kol-alert :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-alert .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-alert .kol-button:focus {\n    outline: none;\n  }\n  .kol-alert .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-alert .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n    position: relative;\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    outline-color: var(--color-danger);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-alert .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-close-button .kol-button--normal {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n    --kol-focus-outline-offset: -2px;\n  }\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    --text-color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    --text-color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n    position: relative;\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    outline-color: var(--color-danger);\n  }\n  .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-button--hide-label .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-close-button .kol-button--normal {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n    --kol-focus-outline-offset: -2px;\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    min-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    line-height: 1;\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    color: var(--color-primary-variant);\n  }\n  .kol-custom-suggestions-option:not(.kol-custom-suggestions-option--disabled):focus {\n    color: var(--color-light);\n    background-color: var(--color-primary-variant);\n    outline: 0;\n  }\n  .kol-custom-suggestions-option--disabled:focus, .kol-custom-suggestions-option--disabled:focus * {\n    outline: 0;\n    cursor: not-allowed;\n  }\n  .kol-custom-suggestions-options-group {\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    right: 0;\n    left: 0;\n    z-index: 5;\n    max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * 5 + 2 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 1px;\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    min-height: 0;\n    padding-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    place-items: center;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  .kol-single-select__group {\n    display: inline-flex;\n    width: 100%;\n    align-items: center;\n  }\n}";
+var css_248z$b = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-alert .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-alert .kol-button:focus {\n    outline: none;\n  }\n  .kol-alert .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-alert .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n    position: relative;\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    outline-color: var(--color-danger);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-alert .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-close-button .kol-button--normal {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n    --kol-focus-outline-offset: -2px;\n  }\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    --text-color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    --text-color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    -moz-column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n         column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: stretch;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled, .kol-input-container:has(.kol-input--readonly)):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container:has(.kol-input--readonly), .kol-input-container:has(.kol-textarea--readonly), .kol-input-container--disabled {\n    border-color: var(--color-mute-variant);\n    border-width: 1px;\n    border-bottom: 2px solid var(--color-subtle);\n  }\n  .kol-input-container:has(.kol-input--readonly) .kol-input-container__container, .kol-input-container:has(.kol-textarea--readonly) .kol-input-container__container, .kol-input-container--disabled .kol-input-container__container {\n    padding-top: 1px;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input-container {\n    position: relative;\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-single-select__group {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-single-select__group {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-single-select__group {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-single-select__group {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n  :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n    position: relative;\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    outline-color: var(--color-danger);\n  }\n  .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-button--hide-label .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-close-button .kol-button--normal {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n    --kol-focus-outline-offset: -2px;\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    min-height: to-rem(40);\n    padding: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    line-height: 1;\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    color: var(--color-primary-variant);\n  }\n  .kol-custom-suggestions-option:not(.kol-custom-suggestions-option--disabled):focus {\n    color: var(--color-light);\n    background-color: var(--color-primary-variant);\n    outline: 0;\n  }\n  .kol-custom-suggestions-option--disabled:focus, .kol-custom-suggestions-option--disabled:focus * {\n    outline: 0;\n    cursor: not-allowed;\n  }\n  .kol-custom-suggestions-options-group {\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    right: 0;\n    left: 0;\n    z-index: 5;\n    max-height: calc(to-rem(40) * 5 + 2 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 1px;\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    min-height: 0;\n    padding-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    place-items: center;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  .kol-single-select__group {\n    display: inline-flex;\n    width: 100%;\n    align-items: center;\n  }\n}";
 var css_248z$a = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-skip-nav .kol-link__text {\n    color: var(--color-light);\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n    border-radius: var(--a11y-min-size);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: var(--border-width);\n    gap: calc(var(--spacing) * 2);\n    line-height: 1;\n    cursor: pointer;\n  }\n}";
@@ -1064,7 +1064,7 @@ var css_248z$7 = "/* forward the rem function */\n@layer kol-theme-component {\n
 var css_248z$6 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-tabs {\n    display: grid;\n    grid-template-columns: var(--grid-template-columns);\n    grid-template-rows: var(--grid-template-rows);\n  }\n  .kol-tabs--align-right {\n    --display: grid;\n    --grid-template-columns: 1fr auto;\n    --button-group-display: grid;\n    --button-group-order: 1;\n  }\n  .kol-tabs--align-left {\n    --display: grid;\n    --grid-template-columns: auto 1fr;\n    --button-group-order: 0;\n  }\n  .kol-tabs--align-bottom {\n    --display: flex;\n    --grid-template-rows: 1fr auto;\n    --button-group-gap: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n    --button-group-order: 1;\n  }\n  .kol-tabs--align-top {\n    --display: flex;\n    --grid-template-rows: auto 1fr;\n    --button-group-gap: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n    --button-group-order: 0;\n  }\n  .kol-tabs__button-group {\n    display: var(--display);\n    gap: var(--button-group-gap);\n    order: var(--button-group-order);\n    flex-wrap: wrap;\n  }\n  .kol-tabs .kol-button {\n    color: var(--color-subtle);\n    background-color: transparent;\n    border-radius: var(--border-radius);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: 0;\n    font-size: calc(18 * 1rem / var(--kolibri-root-font-size, 16));\n    font-weight: 700;\n    line-height: 1.2;\n    border: none;\n    font-style: normal;\n  }\n  .kol-tabs .kol-button:hover {\n    color: var(--color-primary);\n  }\n  .kol-tabs .kol-button.primary, .kol-tabs .kol-button.selected {\n    color: var(--color-primary);\n  }\n  .kol-tabs .kol-button:not(.kol-tabs .kol-button.selected) .kol-span__container {\n    padding-bottom: 0.25em;\n  }\n  .kol-tabs .kol-button.selected .kol-span__container {\n    border-bottom: 0.25em solid;\n  }\n  .kol-tabs .kol-button .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs__content {\n    padding: 0.25em 0;\n  }\n  .kol-tabs__panel {\n    height: 100%;\n  }\n  .kol-tabs .kol-button-wc {\n    width: 100%;\n  }\n}";
-var css_248z$5 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-alert .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-alert .kol-button:focus {\n    outline: none;\n  }\n  .kol-alert .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-alert .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n    position: relative;\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    outline-color: var(--color-danger);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-alert .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-close-button .kol-button--normal {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n    --kol-focus-outline-offset: -2px;\n  }\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    --text-color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    --text-color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    -moz-column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n         column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: stretch;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled, .kol-input-container:has(.kol-input--readonly)):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container:has(.kol-input--readonly), .kol-input-container:has(.kol-textarea--readonly), .kol-input-container--disabled {\n    border-color: var(--color-mute-variant);\n    border-width: 1px;\n    border-bottom: 2px solid var(--color-subtle);\n  }\n  .kol-input-container:has(.kol-input--readonly) .kol-input-container__container, .kol-input-container:has(.kol-textarea--readonly) .kol-input-container__container, .kol-input-container--disabled .kol-input-container__container {\n    padding-top: 1px;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input-container {\n    position: relative;\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n}\n@layer kol-theme-component {\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__counter {\n    order: 4;\n  }\n  .kol-form-field__hint {\n    order: 5;\n  }\n  .kol-textarea {\n    background-color: transparent;\n    display: block;\n    height: 100%;\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n    line-height: 1.5em;\n    border: none;\n  }\n  .kol-textarea::-moz-placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-textarea::placeholder {\n    color: var(--color-subtle);\n  }\n}";
+var css_248z$5 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-alert .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-alert .kol-button:focus {\n    outline: none;\n  }\n  .kol-alert .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-alert .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n    position: relative;\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    outline-color: var(--color-danger);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-alert .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-close-button .kol-button--normal {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n    --kol-focus-outline-offset: -2px;\n  }\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    --text-color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    --text-color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    border-left: 3px solid var(--color-danger);\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--color-danger);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 2px;\n    -moz-column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n         column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: stretch;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    color: var(--color-text);\n    background-color: var(--color-mute);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled, .kol-input-container:has(.kol-input--readonly)):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container:has(.kol-input--readonly), .kol-input-container:has(.kol-textarea--readonly), .kol-input-container--disabled {\n    border-color: var(--color-mute-variant);\n    border-width: 1px;\n    border-bottom: 2px solid var(--color-subtle);\n  }\n  .kol-input-container:has(.kol-input--readonly) .kol-input-container__container, .kol-input-container:has(.kol-textarea--readonly) .kol-input-container__container, .kol-input-container--disabled .kol-input-container__container {\n    padding-top: 1px;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input-container {\n    position: relative;\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__counter {\n    order: 4;\n  }\n  .kol-form-field__hint {\n    order: 5;\n  }\n  .kol-textarea {\n    background-color: transparent;\n    display: block;\n    height: 100%;\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n    line-height: 1.5em;\n    border: none;\n  }\n  .kol-textarea::-moz-placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-textarea::placeholder {\n    color: var(--color-subtle);\n  }\n}";
 var css_248z$4 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert :host {\n    --theme-visibility-delay: 0.5s;\n  }\n  .kol-alert .kol-button__text {\n    border-style: solid;\n    border-radius: var(--border-radius);\n    border-width: var(--border-width);\n    font-weight: 700;\n  }\n  .kol-alert .kol-button:focus {\n    outline: none;\n  }\n  .kol-alert .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--secondary {\n    --text-background-color: var(--color-secondary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--tertiary {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-alert .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-text);\n    --text-color: var(--color-text);\n  }\n  .kol-alert .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-alert .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n    position: relative;\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    outline-color: var(--color-danger);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-alert .kol-button__text:hover {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n    padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    outline-offset: var(--kol-focus-outline-offset, 2px);\n    transition: 200ms outline-offset linear;\n    position: relative;\n  }\n  .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n    color: var(--text-color);\n    background-color: var(--text-background-color);\n    box-shadow: none;\n    border-color: var(--text-border-color);\n  }\n  .kol-alert .kol-close-button .kol-button--normal {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n    --kol-focus-outline-offset: -2px;\n  }\n  .kol-alert {\n    background-color: var(--color-light);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n  }\n  .kol-alert--variant-msg {\n    align-items: start;\n  }\n  .kol-alert--variant-card {\n    filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    border-radius: var(--border-radius);\n    flex-direction: column;\n    border: var(--border-width) solid var(--alert-accent-color);\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--variant-card .kol-alert__container {\n    background-color: var(--alert-accent-color);\n    padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__closer {\n    place-self: center;\n  }\n  .kol-alert__closer .kol-button {\n    border-radius: 50%;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    cursor: pointer;\n  }\n  .kol-alert--variant-msg .kol-alert__closer .kol-button {\n    --text-color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__closer .kol-button {\n    --text-color: var(--color-light);\n  }\n  .kol-alert__closer .kol-icon {\n    font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--variant-card .kol-alert__heading {\n    color: var(--color-light);\n    display: flex;\n    width: 100%;\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    justify-self: right;\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    width: calc(440 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item {\n    margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}";