@public-ui/theme-default 3.0.0-rc.10 → 3.0.0-rc.12

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 (5) hide show
  1. package/dist/index.cjs +5 -5
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.mjs +5 -5
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +4 -4
package/dist/index.cjs CHANGED
@@ -635,7 +635,7 @@ var css_248z$E = "@layer kol-theme-component {\n :host {\n font-family: var(
635
635
 
636
636
  var css_248z$D = "@layer kol-theme-component {\n .kol-badge {\n font-family: var(--font-family);\n border-radius: var(--border-radius);\n display: inline-flex;\n font-style: normal;\n }\n .kol-badge--has-smart-button {\n align-items: center;\n }\n .kol-badge__smart-button .kol-button {\n color: inherit;\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n padding: calc(3.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-badge__smart-button .kol-button:hover {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n .kol-badge__smart-button .kol-button__text {\n align-items: center;\n font-style: normal;\n padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-badge__label {\n padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n font-style: normal;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-badge__label .kol-span__container {\n display: flex;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n}";
637
637
 
638
- var css_248z$C = "@layer kol-theme-component {\n .kol-breadcrumb {\n font-family: var(--font-family);\n }\n .kol-breadcrumb__list-element-span {\n color: var(--color-subtle);\n }\n .kol-breadcrumb__link::part(icon) {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-breadcrumb__icon {\n font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n color: var(--color-subtle);\n }\n}";
638
+ var css_248z$C = "@layer kol-theme-component {\n .kol-link {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n }\n .kol-link:focus {\n outline: none;\n }\n .kol-link:visited {\n color: var(--visited);\n }\n .kol-link:focus .kol-link__text {\n border-radius: var(--border-radius);\n outline: var(--border-width) solid;\n }\n .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n text-decoration-thickness: 0.25em;\n }\n .kol-breadcrumb {\n font-family: var(--font-family);\n }\n .kol-breadcrumb__list-element-span {\n color: var(--color-subtle);\n }\n .kol-breadcrumb__link::part(icon) {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-breadcrumb__icon {\n font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n color: var(--color-subtle);\n }\n .kol-link {\n line-height: 1;\n }\n}";
639
639
 
640
640
  var css_248z$B = "@layer kol-theme-component {\n .kol-button {\n font-family: var(--font-family);\n }\n .kol-button__text {\n font-weight: 700;\n border-style: solid;\n border-width: var(--border-width);\n border-radius: var(--border-radius);\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: var(--color-light);\n --text-border-color: var(--color-light);\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-button--primary:not([disabled]):hover, .kol-button--secondary:not([disabled]):hover, .kol-button--tertiary:not([disabled]):hover, .kol-button--normal:not([disabled]):hover, .kol-button--danger:not([disabled]):hover, .kol-button--ghost:not([disabled]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n }\n .kol-button--danger:not([disabled]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n }\n .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-button__text:hover {\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-button--hide-label .kol-button__text {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n .kol-button--hide-label .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-button:focus {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-button:disabled:hover .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n box-shadow: none;\n }\n}";
641
641
 
@@ -643,7 +643,7 @@ var css_248z$A = "@layer kol-theme-component {\n .kol-button {\n color: var(
643
643
 
644
644
  var css_248z$z = "@layer kol-theme-component {\n .kol-card {\n font-family: var(--font-family);\n display: grid;\n width: 100%;\n height: 100%;\n background-color: var(--color-light);\n grid-template-rows: min-content 2fr min-content;\n box-shadow: 0 0 4px color-mix(in srgb, black 80%, var(--color-subtle));\n border-radius: var(--border-radius);\n }\n .kol-card__header {\n padding: calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-card__content {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n }\n .kol-card__headline {\n line-height: 1.75;\n }\n}";
645
645
 
646
- var css_248z$y = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--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__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-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n gap: calc(6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment {\n min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--disabled {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n cursor: not-allowed;\n }\n .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-primary);\n }\n .kol-input-container:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-input-container--error:focus-within {\n outline-color: var(--color-danger);\n }\n}\n@layer kol-theme-component {\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-option {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-option:focus {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-custom-suggestions-options-group {\n border-style: solid;\n border-width: 1px;\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n overflow-y: auto;\n overflow-x: hidden;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n left: calc(-8rem / var(--kolibri-root-font-size, 16));\n right: calc(-8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-toggle {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-toggle:focus {\n outline: 0;\n }\n :host {\n font-family: var(--font-family);\n }\n .kol-combobox__group {\n display: inline-flex;\n align-items: center;\n width: 100%;\n }\n .kol-combobox__input {\n flex-grow: 1;\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .kol-combobox__input::placeholder {\n color: var(--color-subtle);\n }\n}";
646
+ var css_248z$y = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--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__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-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n gap: calc(6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment {\n min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--disabled {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n cursor: not-allowed;\n }\n .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-primary);\n }\n .kol-input-container:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-input-container--error:focus-within {\n outline-color: var(--color-danger);\n }\n}\n@layer kol-theme-component {\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-option {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-option[aria-selected] {\n color: var(--color-primary-variant);\n }\n .kol-custom-suggestions-option:focus {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-custom-suggestions-options-group {\n border-style: solid;\n border-width: 1px;\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n overflow-y: auto;\n overflow-x: hidden;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n left: calc(-8rem / var(--kolibri-root-font-size, 16));\n right: calc(-8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-toggle {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-toggle:focus {\n outline: 0;\n }\n :host {\n font-family: var(--font-family);\n }\n .kol-combobox__group {\n display: inline-flex;\n align-items: center;\n width: 100%;\n }\n .kol-combobox__input {\n flex-grow: 1;\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .kol-combobox__input::placeholder {\n color: var(--color-subtle);\n }\n}";
647
647
 
648
648
  var css_248z$x = "@layer kol-theme-component {\n .kol-details {\n font-family: var(--font-family);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n height: 100%;\n display: grid;\n }\n .kol-details__content.indented-text {\n font-family: var(--font-family);\n border-left: 2px solid var(--color-primary-variant);\n padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n margin: calc(4rem / var(--kolibri-root-font-size, 16)) 0 0 calc(10.4rem / 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.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-details__heading-button .kol-span__container {\n display: flex;\n text-align: left;\n gap: 0;\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 border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n cursor: pointer;\n }\n}";
649
649
 
@@ -661,7 +661,7 @@ var css_248z$r = "@layer kol-theme-component {\n :host {\n font-family: var(
661
661
 
662
662
  var css_248z$q = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--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__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-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n gap: calc(6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment {\n min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--disabled {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n cursor: not-allowed;\n }\n .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-primary);\n }\n .kol-input-container:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-input-container--error:focus-within {\n outline-color: var(--color-danger);\n }\n}\n@layer kol-theme-component {\n .kol-input {\n background-color: transparent;\n border: none;\n }\n .kol-input::placeholder {\n color: var(--color-subtle);\n }\n}";
663
663
 
664
- var css_248z$p = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--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__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-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n gap: calc(6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment {\n min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--disabled {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n cursor: not-allowed;\n }\n .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-primary);\n }\n .kol-input-container:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-input-container--error:focus-within {\n outline-color: var(--color-danger);\n }\n}\n@layer kol-theme-component {\n .kol-input {\n background-color: transparent;\n border: none;\n }\n .kol-input::placeholder {\n color: var(--color-subtle);\n }\n}\n@layer kol-theme-component {\n .kol-button {\n font-family: var(--font-family);\n }\n .kol-button__text {\n font-weight: 700;\n border-style: solid;\n border-width: var(--border-width);\n border-radius: var(--border-radius);\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: var(--color-light);\n --text-border-color: var(--color-light);\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-button--primary:not([disabled]):hover, .kol-button--secondary:not([disabled]):hover, .kol-button--tertiary:not([disabled]):hover, .kol-button--normal:not([disabled]):hover, .kol-button--danger:not([disabled]):hover, .kol-button--ghost:not([disabled]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n }\n .kol-button--danger:not([disabled]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n }\n .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-button__text:hover {\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-button--hide-label .kol-button__text {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n .kol-button--hide-label .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-button:focus {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-button:disabled:hover .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n box-shadow: none;\n }\n .kol-input-container {\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__text {\n border-top-right-radius: calc(var(--border-radius) - 2px);\n border-bottom-right-radius: calc(var(--border-radius) - 2px);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n white-space: nowrap;\n }\n .kol-input {\n padding-top: calc(0.5em + 2rem / var(--kolibri-root-font-size, 16));\n background-color: transparent;\n }\n}";
664
+ var css_248z$p = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--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__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-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n gap: calc(6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment {\n min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--disabled {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n cursor: not-allowed;\n }\n .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-primary);\n }\n .kol-input-container:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-input-container--error:focus-within {\n outline-color: var(--color-danger);\n }\n}\n@layer kol-theme-component {\n .kol-input {\n background-color: transparent;\n border: none;\n }\n .kol-input::placeholder {\n color: var(--color-subtle);\n }\n}\n@layer kol-theme-component {\n .kol-input-container {\n padding: 0 0 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-theme-component {\n .kol-button {\n font-family: var(--font-family);\n }\n .kol-button__text {\n font-weight: 700;\n border-style: solid;\n border-width: var(--border-width);\n border-radius: var(--border-radius);\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: var(--color-light);\n --text-border-color: var(--color-light);\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-button--primary:not([disabled]):hover, .kol-button--secondary:not([disabled]):hover, .kol-button--tertiary:not([disabled]):hover, .kol-button--normal:not([disabled]):hover, .kol-button--danger:not([disabled]):hover, .kol-button--ghost:not([disabled]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n }\n .kol-button--danger:not([disabled]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n }\n .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-button__text:hover {\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-button--hide-label .kol-button__text {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n .kol-button--hide-label .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-button:focus {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-button:disabled:hover .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n box-shadow: none;\n }\n .kol-input-container {\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__text {\n border-top-right-radius: calc(var(--border-radius) - 2px);\n border-bottom-right-radius: calc(var(--border-radius) - 2px);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n white-space: nowrap;\n }\n .kol-input {\n padding-top: calc(0.5em + 2rem / var(--kolibri-root-font-size, 16));\n background-color: transparent;\n }\n}";
665
665
 
666
666
  var css_248z$o = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--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__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-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n gap: calc(6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment {\n min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--disabled {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n cursor: not-allowed;\n }\n .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-primary);\n }\n .kol-input-container:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-input-container--error:focus-within {\n outline-color: var(--color-danger);\n }\n}\n@layer kol-theme-component {\n .kol-input {\n background-color: transparent;\n border: none;\n }\n .kol-input::placeholder {\n color: var(--color-subtle);\n }\n}";
667
667
 
@@ -681,7 +681,7 @@ var css_248z$h = "@layer kol-theme-component {\n .kol-modal__card {\n box-sh
681
681
 
682
682
  var css_248z$g = "@layer kol-theme-component {\n .kol-link {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n }\n .kol-link:focus {\n outline: none;\n }\n .kol-link:visited {\n color: var(--visited);\n }\n .kol-link:focus .kol-link__text {\n border-radius: var(--border-radius);\n outline: var(--border-width) solid;\n }\n .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n text-decoration-thickness: 0.25em;\n }\n :host {\n font-family: inherit;\n }\n .kol-link {\n line-height: 1;\n }\n}";
683
683
 
684
- var css_248z$f = "@layer kol-theme-component {\n .kol-nav {\n font-family: var(--font-family);\n }\n .kol-nav__navigation {\n background-color: var(--color-mute);\n }\n .kol-nav__list {\n list-style: none;\n }\n .kol-nav__list--nested {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav__list--nested .kol-link,\n .kol-nav__list--nested .kol-button {\n font-weight: normal !important;\n border-left-color: transparent !important;\n }\n .kol-nav__entry--link {\n display: flex;\n }\n .kol-nav__entry .kol-link:hover {\n text-decoration: underline;\n }\n .kol-nav__entry .kol-link,\n .kol-nav__entry .kol-button {\n align-items: center;\n color: var(--color-primary);\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n min-height: var(--a11y-min-size);\n text-decoration: none;\n }\n .kol-nav__entry .kol-link:focus-visible,\n .kol-nav__entry .kol-button:focus-visible {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-nav__list--vertical .kol-nav__entry .kol-link,\n .kol-nav__list--vertical .kol-nav__entry .kol-button {\n border-left: 2px solid transparent;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav--horizontal .kol-nav__entry .kol-link,\n .kol-nav--horizontal .kol-nav__entry .kol-button {\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav--vertical .kol-nav__list-item--active .kol-nav__entry .kol-link,\n .kol-nav--vertical .kol-nav__list-item--active .kol-nav__entry .kol-button {\n border-left-color: var(--color-primary);\n }\n .kol-nav__list-item--active .kol-nav__entry .kol-link,\n .kol-nav__list-item--active .kol-nav__entry .kol-button {\n font-weight: bold;\n }\n .kol-nav__expand-button {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav__expand-button .kol-button:hover {\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .kol-nav__expand-button .kol-button:focus-visible {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-nav__expand-button .kol-button__text {\n justify-content: center;\n }\n .kol-nav__toggle-button .kol-button:focus {\n outline: none;\n }\n .kol-nav__toggle-button .kol-button--ghost:not([disabled]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n }\n .kol-nav__toggle-button .kol-button--ghost {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-light);\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-nav__toggle-button .kol-button__text {\n font-weight: 700;\n border-style: solid;\n border-width: var(--border-width);\n border-radius: var(--border-radius);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-nav__toggle-button .kol-button__text:hover {\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-nav__toggle-button .kol-button--hide-label .kol-nav__toggle-button .kol-button__text {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n .kol-nav__toggle-button .kol-button--hide-label .kol-nav__toggle-button .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-nav__toggle-button .kol-button:focus {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-nav__toggle-button .kol-button:disabled:hover .kol-nav__toggle-button .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n box-shadow: none;\n }\n}";
684
+ var css_248z$f = "@layer kol-theme-component {\n .kol-nav {\n font-family: var(--font-family);\n }\n .kol-nav__navigation {\n background-color: var(--color-mute);\n }\n .kol-nav__list {\n list-style: none;\n }\n .kol-nav__list--nested {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav__list--nested .kol-link,\n .kol-nav__list--nested .kol-button {\n font-weight: normal !important;\n border-left-color: transparent !important;\n }\n .kol-nav__entry--link {\n display: flex;\n }\n .kol-nav__entry .kol-link:hover {\n text-decoration: underline;\n }\n .kol-nav__entry .kol-link,\n .kol-nav__entry .kol-button {\n align-items: center;\n color: var(--color-primary);\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n min-height: var(--a11y-min-size);\n text-decoration: none;\n }\n .kol-nav__entry .kol-link:focus-visible,\n .kol-nav__entry .kol-button:focus-visible {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-nav__list--vertical .kol-nav__entry .kol-link,\n .kol-nav__list--vertical .kol-nav__entry .kol-button {\n border-left: 2px solid transparent;\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav--horizontal .kol-nav__entry .kol-link,\n .kol-nav--horizontal .kol-nav__entry .kol-button {\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav--vertical .kol-nav__list-item--active .kol-nav__entry .kol-link,\n .kol-nav--vertical .kol-nav__list-item--active .kol-nav__entry .kol-button {\n border-left-color: var(--color-primary);\n }\n .kol-nav__list-item--active .kol-nav__entry .kol-link,\n .kol-nav__list-item--active .kol-nav__entry .kol-button {\n font-weight: bold;\n }\n .kol-nav__expand-button .kol-button:hover {\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .kol-nav__expand-button .kol-button:focus-visible {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-nav__expand-button .kol-button__text {\n justify-content: center;\n }\n .kol-nav__toggle-button .kol-button:focus {\n outline: none;\n }\n .kol-nav__toggle-button .kol-button--ghost:not([disabled]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n }\n .kol-nav__toggle-button .kol-button--ghost {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-light);\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-nav__toggle-button .kol-button__text {\n font-weight: 700;\n border-style: solid;\n border-width: var(--border-width);\n border-radius: var(--border-radius);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-nav__toggle-button .kol-button__text:hover {\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-nav__toggle-button .kol-button--hide-label .kol-nav__toggle-button .kol-button__text {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n .kol-nav__toggle-button .kol-button--hide-label .kol-nav__toggle-button .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-nav__toggle-button .kol-button:focus {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-nav__toggle-button .kol-button:disabled:hover .kol-nav__toggle-button .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n box-shadow: none;\n }\n}";
685
685
 
686
686
  var css_248z$e = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-pagination__button--selected .kol-button {\n opacity: 1;\n }\n .kol-button__text {\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n border: 1px solid var(--color-primary);\n color: var(--color-primary);\n font-weight: 700;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-pagination__button--selected .kol-button__text {\n background-color: var(--color-primary);\n color: var(--color-light);\n border: 0;\n }\n .kol-button:focus .kol-button__text {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .kol-button:active .kol-button__text {\n color: var(--color-light);\n outline: none;\n }\n}";
687
687
 
@@ -691,7 +691,7 @@ var css_248z$c = "@layer kol-theme-component {\n .kol-progress {\n font-fami
691
691
 
692
692
  var css_248z$b = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--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__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-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n gap: calc(6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment {\n min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--disabled {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n cursor: not-allowed;\n }\n .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-primary);\n }\n .kol-input-container:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-input-container--error:focus-within {\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 margin: calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n border-radius: var(--border-radius);\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 background-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n .kol-select:not([multiple]) .kol-select__option {\n padding: 0.5em;\n }\n}";
693
693
 
694
- var css_248z$a = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--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__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-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n gap: calc(6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment {\n min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--disabled {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n cursor: not-allowed;\n }\n .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-primary);\n }\n .kol-input-container:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-input-container--error:focus-within {\n outline-color: var(--color-danger);\n }\n}\n@layer kol-theme-component {\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-option {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-option:focus {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-custom-suggestions-options-group {\n border-style: solid;\n border-width: 1px;\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n overflow-y: auto;\n overflow-x: hidden;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n left: calc(-8rem / var(--kolibri-root-font-size, 16));\n right: calc(-8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-toggle {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-toggle:focus {\n outline: 0;\n }\n :host {\n font-family: var(--font-family);\n }\n .kol-single-select__group {\n display: inline-flex;\n align-items: center;\n width: 100%;\n }\n .kol-single-select__input {\n flex-grow: 1;\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .kol-single-select__input::placeholder {\n color: var(--color-subtle);\n }\n}";
694
+ var css_248z$a = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--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__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-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n gap: calc(6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment {\n min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--disabled {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n cursor: not-allowed;\n }\n .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-primary);\n }\n .kol-input-container:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-input-container--error:focus-within {\n outline-color: var(--color-danger);\n }\n}\n@layer kol-theme-component {\n .kol-alert {\n font-family: var(--font-family);\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-option {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-option[aria-selected] {\n color: var(--color-primary-variant);\n }\n .kol-custom-suggestions-option:focus {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-custom-suggestions-options-group {\n border-style: solid;\n border-width: 1px;\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n overflow-y: auto;\n overflow-x: hidden;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n left: calc(-8rem / var(--kolibri-root-font-size, 16));\n right: calc(-8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-toggle {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-toggle:focus {\n outline: 0;\n }\n :host {\n font-family: var(--font-family);\n }\n .kol-single-select__group {\n display: inline-flex;\n align-items: center;\n width: 100%;\n }\n .kol-single-select__input {\n flex-grow: 1;\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .kol-single-select__input::placeholder {\n color: var(--color-subtle);\n }\n}";
695
695
 
696
696
  var css_248z$9 = "@layer kol-theme-component {\n .kol-skip-nav {\n font-family: var(--font-family);\n }\n .kol-skip-nav .kol-link__text {\n border-radius: var(--a11y-min-size);\n border-style: solid;\n border-width: var(--border-width);\n gap: calc(var(--spacing) * 2);\n line-height: 1;\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n cursor: pointer;\n }\n}";
697
697