@utrecht/web-component-library-stencil 1.0.0-alpha.127 → 1.0.0-alpha.130
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.
- package/dist/cjs/utrecht-breadcrumb.cjs.entry.js +1 -1
- package/dist/cjs/utrecht-contact-card-template.cjs.entry.js +1 -1
- package/dist/cjs/utrecht-html-content.cjs.entry.js +1 -1
- package/dist/collection/breadcrumb/stencil.css +63 -0
- package/dist/collection/html-content/stencil.css +63 -0
- package/dist/collection/templates/contact-card-template/stencil.css +63 -0
- package/dist/custom-elements/index.js +3 -3
- package/dist/esm/utrecht-breadcrumb.entry.js +1 -1
- package/dist/esm/utrecht-contact-card-template.entry.js +1 -1
- package/dist/esm/utrecht-html-content.entry.js +1 -1
- package/dist/utrecht/p-2c37521a.entry.js +1 -0
- package/dist/utrecht/{p-b0860b62.entry.js → p-5ce3bb29.entry.js} +1 -1
- package/dist/utrecht/p-d501ce72.entry.js +1 -0
- package/dist/utrecht/utrecht.esm.js +1 -1
- package/package.json +2 -2
- package/dist/utrecht/p-29a17a39.entry.js +0 -1
- package/dist/utrecht/p-f0cea495.entry.js +0 -1
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-8cef21e1.js');
|
|
6
6
|
const clsx_m = require('./clsx.m-b00fa5e1.js');
|
|
7
7
|
|
|
8
|
-
const stencilCss = ".utrecht-breadcrumb{--utrecht-focus-background-color:var(--utrecht-breadcrumb-link-focus-background-color);--utrecht-link-background-color:var(--utrecht-breadcrumb-link-background-color);--utrecht-link-color:var(--utrecht-breadcrumb-link-color);--utrecht-link-focus-color:var(--utrecht-breadcrumb-link-focus-color, var(--utrecht-breadcrumb-link-color));--utrecht-link-focus-text-decoration:var(--utrecht-link-text-decoration);--utrecht-link-hover-color:var(--utrecht-breadcrumb-link-color);--utrecht-link-hover-text-decoration:var(--utrecht-link-text-decoration);--utrecht-link-visited-color:var(--utrecht-breadcrumb-link-color);--utrecht-link-visited-text-decoration:var(--utrecht-link-text-decoration);font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-breadcrumb-font-size);text-transform:var(--utrecht-document-text-transform, inherit)}.utrecht-breadcrumb__list{block-size:var(--utrecht-breadcrumb-block-size);display:flex}ol.utrecht-breadcrumb__list{list-style:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.utrecht-breadcrumb__item{block-size:100%}.utrecht-breadcrumb__link{background-color:var(--utrecht-breadcrumb-link-background-color);display:block;padding-block-end:var(--utrecht-breadcrumb-item-padding-block-end, 8px);padding-block-start:var(--utrecht-breadcrumb-item-padding-block-start, 8px);padding-inline-end:var(--utrecht-breadcrumb-item-padding-inline-end, 8px);padding-inline-start:var(--utrecht-breadcrumb-item-padding-inline-start, 8px)}.utrecht-breadcrumb--arrows{--utrecht-breadcrumb-arrow-size:24px;overflow:hidden}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link{padding-inline-end:0;position:relative}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before{border-block-end-width:var(--utrecht-breadcrumb-block-size);border-block-start-width:var(--utrecht-breadcrumb-block-size);border-color:transparent;border-style:solid;content:\" \";display:block;height:0;left:100%;margin-block-start:calc(-1 * var(--utrecht-breadcrumb-block-size));position:absolute;top:50%;width:0}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after{border-inline-start-color:var(--utrecht-breadcrumb-link-background-color);border-inline-start-width:var(--utrecht-breadcrumb-arrow-size);z-index:2}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before{border-inline-start-color:var(--utrecht-document-background-color);border-inline-start-width:var(--utrecht-breadcrumb-arrow-size);margin-block-start:calc(-1 * var(--utrecht-breadcrumb-block-size));margin-inline-start:1px;z-index:1}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus{background-color:var(--utrecht-breadcrumb-link-focus-background-color)}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus::after,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus::after{border-inline-start-color:var(--utrecht-breadcrumb-link-focus-background-color)}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__item~.utrecht-breadcrumb__item .utrecht-breadcrumb__link{padding-inline-start:calc(var(--utrecht-breadcrumb-item-padding-inline-start) + var(--utrecht-breadcrumb-arrow-size))}.utrecht-breadcrumb__item~.utrecht-breadcrumb__item{margin-inline-start:var(--utrecht-breadcrumb-item-divider-inline-size)}.utrecht-link{color:var(--utrecht-link-color, blue);text-decoration:var(--utrecht-link-text-decoration, underline);text-decoration-skip-ink:all;text-underline-offset:var(--utrecht-link-text-underline-offset)}.utrecht-link:visited,.utrecht-link--visited{color:var(--utrecht-link-visited-color, var(--utrecht-link-color))}.utrecht-link:hover,.utrecht-link--hover{color:var(--utrecht-link-hover-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline))}.utrecht-link:active,.utrecht-link--active{color:var(--utrecht-link-active-color, var(--utrecht-link-color))}.utrecht-link--focus,.utrecht-link:focus{color:var(--utrecht-link-focus-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline))}.utrecht-link--focus-visible,.utrecht-link:focus{box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:0;outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-link:focus:not(:focus-visible){box-shadow:none;outline-style:none}.utrecht-link--telephone{white-space:nowrap}:host{display:block}:host([hidden]){display:none !important}";
|
|
8
|
+
const stencilCss = ".utrecht-breadcrumb{--utrecht-focus-background-color:var(--utrecht-breadcrumb-link-focus-background-color);--utrecht-link-background-color:var(--utrecht-breadcrumb-link-background-color);--utrecht-link-color:var(--utrecht-breadcrumb-link-color);--utrecht-link-focus-color:var(--utrecht-breadcrumb-link-focus-color, var(--utrecht-breadcrumb-link-color));--utrecht-link-focus-text-decoration:var(--utrecht-link-text-decoration);--utrecht-link-hover-color:var(--utrecht-breadcrumb-link-color);--utrecht-link-hover-text-decoration:var(--utrecht-link-text-decoration);--utrecht-link-visited-color:var(--utrecht-breadcrumb-link-color);--utrecht-link-visited-text-decoration:var(--utrecht-link-text-decoration);font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-breadcrumb-font-size);text-transform:var(--utrecht-document-text-transform, inherit)}.utrecht-breadcrumb__list{block-size:var(--utrecht-breadcrumb-block-size);display:flex}ol.utrecht-breadcrumb__list{list-style:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.utrecht-breadcrumb__item{block-size:100%}.utrecht-breadcrumb__link{background-color:var(--utrecht-breadcrumb-link-background-color);display:block;padding-block-end:var(--utrecht-breadcrumb-item-padding-block-end, 8px);padding-block-start:var(--utrecht-breadcrumb-item-padding-block-start, 8px);padding-inline-end:var(--utrecht-breadcrumb-item-padding-inline-end, 8px);padding-inline-start:var(--utrecht-breadcrumb-item-padding-inline-start, 8px)}.utrecht-breadcrumb--arrows{--utrecht-breadcrumb-arrow-size:24px;overflow:hidden}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link{padding-inline-end:0;position:relative}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before{border-block-end-width:var(--utrecht-breadcrumb-block-size);border-block-start-width:var(--utrecht-breadcrumb-block-size);border-color:transparent;border-style:solid;content:\" \";display:block;height:0;left:100%;margin-block-start:calc(-1 * var(--utrecht-breadcrumb-block-size));position:absolute;top:50%;width:0}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after{border-inline-start-color:var(--utrecht-breadcrumb-link-background-color);border-inline-start-width:var(--utrecht-breadcrumb-arrow-size);z-index:2}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before{border-inline-start-color:var(--utrecht-document-background-color);border-inline-start-width:var(--utrecht-breadcrumb-arrow-size);margin-block-start:calc(-1 * var(--utrecht-breadcrumb-block-size));margin-inline-start:1px;z-index:1}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus{background-color:var(--utrecht-breadcrumb-link-focus-background-color)}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus::after,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus::after{border-inline-start-color:var(--utrecht-breadcrumb-link-focus-background-color)}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__item~.utrecht-breadcrumb__item .utrecht-breadcrumb__link{padding-inline-start:calc(var(--utrecht-breadcrumb-item-padding-inline-start) + var(--utrecht-breadcrumb-arrow-size))}.utrecht-breadcrumb__item~.utrecht-breadcrumb__item{margin-inline-start:var(--utrecht-breadcrumb-item-divider-inline-size)}.utrecht-link{color:var(--utrecht-link-color, blue);text-decoration:var(--utrecht-link-text-decoration, underline);text-decoration-skip-ink:all;text-decoration-thickness:max(var(--utrecht-link-text-decoration-thickness), 1px);text-underline-offset:var(--utrecht-link-text-underline-offset)}.utrecht-link:visited,.utrecht-link--visited{color:var(--utrecht-link-visited-color, var(--utrecht-link-color))}.utrecht-link:hover,.utrecht-link--hover{color:var(--utrecht-link-hover-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip:none;text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px)}.utrecht-link:active,.utrecht-link--active{color:var(--utrecht-link-active-color, var(--utrecht-link-color))}.utrecht-link--focus,.utrecht-link:focus{color:var(--utrecht-link-focus-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip:none;text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px)}.utrecht-link--focus-visible,.utrecht-link:focus{box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:0;outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-link:focus:not(:focus-visible){box-shadow:none;outline-style:none}.utrecht-link--telephone{white-space:nowrap}:host{display:block}:host([hidden]){display:none !important}";
|
|
9
9
|
|
|
10
10
|
let Breadcrumb = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-8cef21e1.js');
|
|
6
6
|
|
|
7
|
-
const stencilCss = ".utrecht-link{color:var(--utrecht-link-color, blue);text-decoration:var(--utrecht-link-text-decoration, underline);text-decoration-skip-ink:all;text-underline-offset:var(--utrecht-link-text-underline-offset)}.utrecht-link:visited,.utrecht-link--visited{color:var(--utrecht-link-visited-color, var(--utrecht-link-color))}.utrecht-link:hover,.utrecht-link--hover{color:var(--utrecht-link-hover-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline))}.utrecht-link:active,.utrecht-link--active{color:var(--utrecht-link-active-color, var(--utrecht-link-color))}.utrecht-link--focus,.utrecht-link:focus{color:var(--utrecht-link-focus-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline))}.utrecht-link--focus-visible,.utrecht-link:focus{box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:0;outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-link:focus:not(:focus-visible){box-shadow:none;outline-style:none}.utrecht-link--telephone{white-space:nowrap}.utrecht-contact-card{--utrecht-document-color:currentColor;--utrecht-heading-color:currentColor;--utrecht-link-color:currentColor;--utrecht-link-focus-color:currentColor;--utrecht-link-hover-color:currentColor;--utrecht-link-active-color:currentColor;--utrecht-link-visited-color:currentColor;--utrecht-heading-2-text-transform:uppercase;--utrecht-heading-2-font-size:var(--utrecht-typography-scale-md-font-size);--utrecht-contact-card-background-color:hsl(207 60% 91%);--utrecht-contact-card-background-color-2:hsl(207 60% 96%);background-color:#dae9f6;background-image:linear-gradient(45deg, var(--utrecht-contact-card-background-color), var(--utrecht-contact-card-background-color) 50%, var(--utrecht-contact-card-background-color-2) 50%, var(--utrecht-contact-card-background-color-2));background-position-x:66%;background-size:200%;color:var(--utrecht-color-black);padding-block-end:var(--utrecht-space-block-lg);padding-block-start:var(--utrecht-space-block-lg);padding-inline-end:var(--utrecht-space-inline-lg);padding-inline-start:var(--utrecht-space-inline-lg)}.utrecht-contact-card__content{display:flex;flex-direction:row}.utrecht-contact-card__section{margin-block-start:var(--utrecht-space-row-lg);width:100%}.utrecht-contact-card__telephone{--utrecht-paragraph-font-size:var(--utrecht-typography-scale-2xl-font-size)}";
|
|
7
|
+
const stencilCss = ".utrecht-link{color:var(--utrecht-link-color, blue);text-decoration:var(--utrecht-link-text-decoration, underline);text-decoration-skip-ink:all;text-decoration-thickness:max(var(--utrecht-link-text-decoration-thickness), 1px);text-underline-offset:var(--utrecht-link-text-underline-offset)}.utrecht-link:visited,.utrecht-link--visited{color:var(--utrecht-link-visited-color, var(--utrecht-link-color))}.utrecht-link:hover,.utrecht-link--hover{color:var(--utrecht-link-hover-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip:none;text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px)}.utrecht-link:active,.utrecht-link--active{color:var(--utrecht-link-active-color, var(--utrecht-link-color))}.utrecht-link--focus,.utrecht-link:focus{color:var(--utrecht-link-focus-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip:none;text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px)}.utrecht-link--focus-visible,.utrecht-link:focus{box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:0;outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-link:focus:not(:focus-visible){box-shadow:none;outline-style:none}.utrecht-link--telephone{white-space:nowrap}.utrecht-contact-card{--utrecht-document-color:currentColor;--utrecht-heading-color:currentColor;--utrecht-link-color:currentColor;--utrecht-link-focus-color:currentColor;--utrecht-link-hover-color:currentColor;--utrecht-link-active-color:currentColor;--utrecht-link-visited-color:currentColor;--utrecht-heading-2-text-transform:uppercase;--utrecht-heading-2-font-size:var(--utrecht-typography-scale-md-font-size);--utrecht-contact-card-background-color:hsl(207 60% 91%);--utrecht-contact-card-background-color-2:hsl(207 60% 96%);background-color:#dae9f6;background-image:linear-gradient(45deg, var(--utrecht-contact-card-background-color), var(--utrecht-contact-card-background-color) 50%, var(--utrecht-contact-card-background-color-2) 50%, var(--utrecht-contact-card-background-color-2));background-position-x:66%;background-size:200%;color:var(--utrecht-color-black);padding-block-end:var(--utrecht-space-block-lg);padding-block-start:var(--utrecht-space-block-lg);padding-inline-end:var(--utrecht-space-inline-lg);padding-inline-start:var(--utrecht-space-inline-lg)}.utrecht-contact-card__content{display:flex;flex-direction:row}.utrecht-contact-card__section{margin-block-start:var(--utrecht-space-row-lg);width:100%}.utrecht-contact-card__telephone{--utrecht-paragraph-font-size:var(--utrecht-typography-scale-2xl-font-size)}";
|
|
8
8
|
|
|
9
9
|
let ContactCardTemplate = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-8cef21e1.js');
|
|
6
6
|
|
|
7
|
-
const stencilCss = "@charset \"UTF-8\";.utrecht-article,.utrecht-html article{max-inline-size:var(--utrecht-article-max-inline-size)}.utrecht-blockquote,.utrecht-html blockquote{font-family:var(--utrecht-document-font-family);font-size:var(--utrecht-blockquote-font-size);margin-inline-end:var(--utrecht-blockquote-margin-inline-end);margin-inline-start:var(--utrecht-blockquote-margin-inline-start)}.utrecht-blockquote__attribution{color:var(--utrecht-blockquote-attribution-color, inherit);font-size:var(--utrecht-blockquote-attribution-font-size, inherit)}.utrecht-blockquote__content,.utrecht-html blockquote{--utrecht-document-color:var(--utrecht-blockquote-content-color, inherit);--utrecht-paragraph-font-size:var(--utrecht-blockquote-content-font-size, inherit);color:var(--utrecht-blockquote-content-color, inherit);font-size:var(--utrecht-blockquote-content-font-size, inherit)}.utrecht-blockquote--distanced,.utrecht-html blockquote{margin-block-end:var(--utrecht-blockquote-margin-block-end);margin-block-start:var(--utrecht-blockquote-margin-block-start)}.utrecht-button,.utrecht-html input[type=button i],.utrecht-html input[type=reset i],.utrecht-html input[type=submit i],.utrecht-html button{background-color:var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));border-radius:var(--utrecht-button-border-radius);border-style:solid;border-width:var(--utrecht-button-border-width, 0);color:var(--utrecht-button-primary-action-color, var(--utrecht-button-color));font-family:var(--utrecht-button-font-family, var(--utrecht-document-font-family));font-size:var(--utrecht-button-font-size, var(--utrecht-document-font-family));font-weight:var(--utrecht-button-font-weight);inline-size:var(--utrecht-button-inline-size, auto);letter-spacing:var(--utrecht-button-letter-spacing);min-block-size:var(--utrecht-button-min-block-size, auto);min-inline-size:var(--utrecht-button-min-inline-size, 0);padding-block-end:var(--utrecht-button-padding-block-end);padding-block-start:var(--utrecht-button-padding-block-start);padding-inline-end:var(--utrecht-button-padding-inline-end);padding-inline-start:var(--utrecht-button-padding-inline-start);text-transform:var(--utrecht-button-text-transform);user-select:none}.utrecht-button--distanced,.utrecht-html input[type=button i],.utrecht-html input[type=reset i],.utrecht-html input[type=submit i],.utrecht-html button{margin-block-end:var(--utrecht-button-margin-block-end);margin-block-start:var(--utrecht-button-margin-block-start);margin-inline-end:var(--utrecht-button-margin-inline-end);margin-inline-start:var(--utrecht-button-margin-inline-start)}.utrecht-button--submit,.utrecht-html button[type=submit i],.utrecht-html input[type=submit i]{cursor:var(--utrecht-action-submit-cursor)}.utrecht-button--busy,.utrecht-html button[aria-busy=true],.utrecht-html button[aria-disabled=true][aria-busy=true],.utrecht-html button:disabled[aria-busy=true]{cursor:var(--utrecht-action-busy-cursor)}.utrecht-button:disabled,.utrecht-html input[type=button i]:disabled,.utrecht-html input[type=reset i]:disabled,.utrecht-html input[type=submit i]:disabled,.utrecht-html button:disabled,.utrecht-button--disabled,.utrecht-html button[aria-disabled=true]{background-color:var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));color:var(--utrecht-button-disabled-color, var(--utrecht-button-color));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-button:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-html input[type=button i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-html input[type=reset i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-html input[type=submit i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-button--active,.utrecht-html button:active:not([aria-disabled=true]):not(:disabled){background-color:var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));color:var(--utrecht-button-active-color, var(--utrecht-button-color))}.utrecht-button--focus-visible,.utrecht-html button:focus-visible,.utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-html input[type=button i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-html input[type=reset i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled){box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:0;outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-button--focus,.utrecht-html button:focus:not([aria-disabled=true]):not(:disabled),.utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-html input[type=button i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-html input[type=reset i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled){background-color:var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));color:var(--utrecht-button-focus-color, var(--utrecht-button-color))}.utrecht-button:focus:not(:focus-visible),.utrecht-html input[type=button i]:focus:not(:focus-visible),.utrecht-html input[type=reset i]:focus:not(:focus-visible),.utrecht-html input[type=submit i]:focus:not(:focus-visible),.utrecht-html button:focus:not(:focus-visible){box-shadow:none;outline-style:none}.utrecht-button--hover:not(:disabled),.utrecht-html button:not(:disabled):hover:not([aria-disabled=true]),.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-html input[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-html input[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-html input[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled){background-color:var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));color:var(--utrecht-button-hover-color, var(--utrecht-button-color));transform:scale(var(--utrecht-button-focus-transform-scale, 1))}.utrecht-checkbox,.utrecht-html input[type=checkbox i]{margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0}.utrecht-checkbox--disabled,.utrecht-checkbox--html-input:disabled,.utrecht-html input[type=checkbox i]:disabled{cursor:var(--utrecht-action-disabled-cursor)}.utrecht-checkbox--focus-visible{box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:0;outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-checkbox--html-input:focus,.utrecht-html input[type=checkbox i]:focus{box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:0;outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-checkbox--html-input:focus:not(:focus-visible),.utrecht-html input[type=checkbox i]:focus:not(:focus-visible){box-shadow:none;outline-style:none}.utrecht-emphasis--stressed,.utrecht-html em{font-style:var(--utrecht-emphasis-stressed-font-style, italic)}.utrecht-emphasis--strong,.utrecht-html strong{font-weight:var(--utrecht-emphasis-strong-font-weight, bold)}.utrecht-form-fieldset--reset-fieldset,.utrecht-html fieldset{border:0;margin-inline-end:0;margin-inline-start:0;min-width:0;padding-block-end:0;padding-block-start:0.01em;padding-inline-end:0;padding-inline-start:0}.utrecht-form-fieldset__legend--reset-legend,.utrecht-html legend{padding-inline-end:0;padding-inline-start:0}.utrecht-form-fieldset--distanced,.utrecht-html fieldset{margin-block-end:var(--utrecht-form-fieldset-margin-block-end, 0);margin-block-start:var(--utrecht-form-fieldset-margin-block-start, 0)}.utrecht-form-fieldset__legend,.utrecht-html legend{color:var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));font-family:var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));font-size:var(--utrecht-form-fieldset-legend-font-size);font-weight:var(--utrecht-form-fieldset-legend-font-weight);line-height:var(--utrecht-form-fieldset-legend-line-height);text-transform:var(--utrecht-form-fieldset-legend-text-transform)}.utrecht-form-fieldset__legend--distanced,.utrecht-html legend{margin-block-end:var(--utrecht-form-fieldset-legend-margin-block-end);margin-block-start:var(--utrecht-form-fieldset-legend-margin-block-start)}.utrecht-form-label,.utrecht-html label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox,.utrecht-html input[type=checkbox i]~label{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{cursor:var(--utrecht-action-disabled-cursor);font-weight:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color))}.utrecht-form-label--radio,.utrecht-html input[type=radio i]~label{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-heading-1,.utrecht-html h1{color:var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-1-font-size);font-weight:var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-1-letter-spacing);line-height:var(--utrecht-heading-1-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-1-text-transform, inherit)}.utrecht-heading-1--distanced,.utrecht-html h1{margin-block-end:var(--utrecht-heading-1-margin-block-end);margin-block-start:var(--utrecht-heading-1-margin-block-start)}.utrecht-heading-2,.utrecht-html h2{color:var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-2-font-size);font-weight:var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-2-letter-spacing);line-height:var(--utrecht-heading-2-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-2-text-transform, inherit)}.utrecht-heading-2--distanced,.utrecht-html h2{margin-block-end:var(--utrecht-heading-2-margin-block-end);margin-block-start:var(--utrecht-heading-2-margin-block-start)}.utrecht-heading-3,.utrecht-html h3{color:var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-3-font-size);font-weight:var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-3-letter-spacing);line-height:var(--utrecht-heading-3-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-3-text-transform, inherit)}.utrecht-heading-3--distanced,.utrecht-html h3{margin-block-end:var(--utrecht-heading-3-margin-block-end);margin-block-start:var(--utrecht-heading-3-margin-block-start)}.utrecht-heading-4,.utrecht-html h4{color:var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-4-font-size);font-weight:var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-4-letter-spacing);line-height:var(--utrecht-heading-4-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-4-text-transform, inherit)}.utrecht-heading-4--distanced,.utrecht-html h4{margin-block-end:var(--utrecht-heading-4-margin-block-end);margin-block-start:var(--utrecht-heading-4-margin-block-start)}.utrecht-heading-5,.utrecht-html h5{color:var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-5-font-size);font-weight:var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-5-letter-spacing);line-height:var(--utrecht-heading-5-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-5-text-transform, inherit)}.utrecht-heading-5--distanced,.utrecht-html h5{margin-block-end:var(--utrecht-heading-5-margin-block-end);margin-block-start:var(--utrecht-heading-5-margin-block-start)}.utrecht-heading-6,.utrecht-html h6{color:var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-6-font-size);font-weight:var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-6-letter-spacing);line-height:var(--utrecht-heading-6-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-6-text-transform, inherit)}.utrecht-heading-6--distanced,.utrecht-html h6{margin-block-end:var(--utrecht-heading-6-margin-block-end);margin-block-start:var(--utrecht-heading-6-margin-block-start)}.utrecht-link,.utrecht-html a:link{color:var(--utrecht-link-color, blue);text-decoration:var(--utrecht-link-text-decoration, underline);text-decoration-skip-ink:all;text-underline-offset:var(--utrecht-link-text-underline-offset)}.utrecht-link:visited,.utrecht-link--visited,.utrecht-html a:visited{color:var(--utrecht-link-visited-color, var(--utrecht-link-color))}.utrecht-link:hover,.utrecht-link--hover,.utrecht-html a:hover{color:var(--utrecht-link-hover-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline))}.utrecht-link:active,.utrecht-link--active,.utrecht-html a:active{color:var(--utrecht-link-active-color, var(--utrecht-link-color))}.utrecht-link--focus,.utrecht-html a:focus,.utrecht-link:focus{color:var(--utrecht-link-focus-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline))}.utrecht-link--focus-visible,.utrecht-html a:focus,.utrecht-link:focus{box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:0;outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-link:focus:not(:focus-visible),.utrecht-html a:focus:not(:focus-visible):link{box-shadow:none;outline-style:none}.utrecht-link--telephone,.utrecht-html a[href^=\"tel:\" i]{white-space:nowrap}.utrecht-html a:focus:not(:focus-visible){box-shadow:none;outline-style:none}.utrecht-ordered-list,.utrecht-html ol{font-family:var(--utrecht-document-font-family, inherit);margin-block-end:0;margin-block-start:0;padding-inline-start:var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch))}.utrecht-ordered-list--distanced,.utrecht-html ol{margin-block-end:var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end));margin-block-start:var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start))}.utrecht-ordered-list--arabic,.utrecht-html ol:lang(ar){list-style:arabic-indic}.utrecht-ordered-list__item,.utrecht-html ol>li{margin-block-end:var(--utrecht-ordered-list-item-margin-block-end, var(--utrecht-unordered-list-item-margin-block-end));margin-block-start:var(--utrecht-ordered-list-item-margin-block-start, var(--utrecht-unordered-list-item-margin-block-start));padding-inline-start:var(--utrecht-ordered-list-item-padding-inline-start, var(--utrecht-unordered-list-item-padding-inline-start, 1ch))}.utrecht-paragraph,.utrecht-html p{color:var(--utrecht-document-color, inherit);font-family:var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));font-size:var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));font-weight:var(--utrecht-paragraph-font-weight, inherit);line-height:var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));margin-block-end:0;margin-block-start:0}.utrecht-paragraph--lead,.utrecht-html p.lead{color:var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));font-size:var(--utrecht-paragraph-lead-font-size, inherit);font-weight:var(--utrecht-paragraph-lead-font-weight, inherit);line-height:var(--utrecht-paragraph-lead-line-height, inherit)}.utrecht-paragraph--distanced,.utrecht-html *~p{margin-block-end:var(--utrecht-paragraph-margin-block-end);margin-block-start:var(--utrecht-paragraph-margin-block-start)}.utrecht-radio-button,.utrecht-html input[type=radio i]{margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0}.utrecht-radio-button--disabled,.utrecht-radio-button--html-input:disabled,.utrecht-html input[type=radio i]:disabled{cursor:var(--utrecht-action-disabled-cursor)}.utrecht-radio-button--focus-visible,.utrecht-radio-button--html-input:focus,.utrecht-html input[type=radio i]:focus{box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:0;outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-radio-button--html-input:focus:not(:focus-visible),.utrecht-html input[type=radio i]:focus:not(:focus-visible){box-shadow:none;outline-style:none}.utrecht-separator,.utrecht-html hr{border-color:var(--utrecht-separator-color);border-style:solid;border-width:0 0 var(--utrecht-separator-block-size) 0}.utrecht-separator--distanced,.utrecht-html hr{margin-block-end:var(--utrecht-separator-margin-block-end);margin-block-start:var(--utrecht-separator-margin-block-start)}.utrecht-table,.utrecht-html table{border-collapse:collapse;border-color:var(--utrecht-table-border-color, 0);border-style:solid;border-width:var(--utrecht-table-border-width, 0);font-family:var(--utrecht-table-font-family, var(--utrecht-document-font-family));font-size:var(--utrecht-table-font-size, inherit);width:100%}.utrecht-table--distanced,.utrecht-html table{margin-block-end:var(--utrecht-table-margin-block-end);margin-block-start:var(--utrecht-table-margin-block-start)}.utrecht-table__caption,.utrecht-html caption{color:var(--utrecht-table-caption-color);font-family:var(--utrecht-table-caption-font-family);font-size:var(--utrecht-table-caption-font-size);font-weight:var(--utrecht-table-caption-font-weight);line-height:var(--utrecht-table-caption-line-height);margin-block-end:var(--utrecht-table-caption-margin-block-end);text-align:var(--utrecht-table-caption-text-align, center)}.utrecht-table__header,.utrecht-html thead{background-color:var(--utrecht-table-header-background-color);color:var(--utrecht-table-header-color);font-weight:var(--utrecht-table-header-font-weight);text-transform:var(--utrecht-table-header-text-transform);vertical-align:bottom}.utrecht-table__cell--last-header-row,.utrecht-html thead tr:last-child th{border-block-end-color:var(--utrecht-table-header-border-block-end-color, transparent);border-block-end-style:solid;border-block-end-width:var(--utrecht-table-header-border-block-end-width, 0)}.utrecht-table__body,.utrecht-html tbody{vertical-align:baseline}.utrecht-table__heading,.utrecht-html th{color:var(--utrecht-table-heading-color);font-size:var(--utrecht-table-heading-font-size);font-weight:var(--utrecht-table-heading-font-weight);text-transform:var(--utrecht-table-heading-text-transform)}.utrecht-table__cell,.utrecht-html th,.utrecht-html td{border-block-end-color:var(--utrecht-table-row-border-block-end-color, transparent);border-block-end-style:solid;border-block-end-width:var(--utrecht-table-row-border-block-end-width, 0);line-height:var(--utrecht-table-cell-line-height, inherit);padding-block-end:var(--utrecht-table-cell-padding-block-end, 0);padding-block-start:var(--utrecht-table-cell-padding-block-start, 0);padding-inline-end:var(--utrecht-table-cell-padding-inline-end, 0);padding-inline-start:var(--utrecht-table-cell-padding-inline-start, 0);text-align:start}.utrecht-table__cell--first,.utrecht-html td:first-child,.utrecht-html th:first-child{padding-inline-start:var(--utrecht-table-row-padding-inline-start, var(--utrecht-table-cell-padding-inline-start, 0))}.utrecht-table__cell--last,.utrecht-html td:last-child,.utrecht-html th:last-child{padding-inline-end:var(--utrecht-table-row-padding-inline-end, var(--utrecht-table-cell-padding-inline-end, 0))}.utrecht-table__cell--numeric-column,.utrecht-html td.numeric,.utrecht-html thead>tr>th.numeric,.utrecht-html tfoot>tr>th.numeric,.utrecht-html th[scope=column].numeric{text-align:right}.utrecht-table__cell--numeric-data,.utrecht-html td.numeric{font-variant-numeric:lining-nums tabular-nums}.utrecht-table__row--alternate-odd,.utrecht-html table.alternate-row-color>tbody>tr:nth-child(odd)>td,.utrecht-html table.alternate-row-color>tbody>tr:nth-child(odd)>th,.utrecht-html table.alternate-row-color>tr:nth-child(odd)>td,.utrecht-html table.alternate-row-color>tr:nth-child(odd)>th{background-color:var(--utrecht-table-row-alternate-odd-background-color);color:var(--utrecht-table-row-alternate-odd-color)}.utrecht-table__row--alternate-even,.utrecht-html table.alternate-row-color>tbody>tr:nth-child(even)>td,.utrecht-html table.alternate-row-color>tbody>tr:nth-child(even)>th,.utrecht-html table.alternate-row-color>tr:nth-child(even)>td,.utrecht-html table.alternate-row-color>tr:nth-child(even)>th{background-color:var(--utrecht-table-row-alternate-even-background-color);color:var(--utrecht-table-row-alternate-even-color)}.utrecht-textarea,.utrecht-html textarea{background-color:var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color));border-width:var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width));border-bottom-width:var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width)));border-color:var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color));border-radius:var(--utrecht-textarea-border-radius, var(--utrecht-form-input-border-radius, 0));border-style:solid;box-sizing:border-box;color:var(--utrecht-textarea-color, var(--utrecht-form-input-color));font-family:var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));font-size:var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));max-inline-size:var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));min-block-size:var(--utrecht-textarea-min-block-size);padding-block-end:var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end));padding-block-start:var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start));padding-inline-end:var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end));padding-inline-start:var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start));resize:vertical;width:100%}.utrecht-textarea--invalid,.utrecht-textarea--html-textarea:invalid,.utrecht-html textarea:invalid,.utrecht-textarea--html-textarea[aria-invalid=true],.utrecht-html textarea[aria-invalid=true]{background-color:var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));border-width:var(--utrecht-textarea-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width))))}.utrecht-textarea--disabled,.utrecht-textarea--html-textarea:disabled,.utrecht-html textarea:disabled{background-color:var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textarea-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-textarea--focus,.utrecht-textarea--html-textarea:focus,.utrecht-html textarea:focus{background-color:var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))))}.utrecht-textarea--focus-visible,.utrecht-textarea--html-textarea:focus,.utrecht-html textarea:focus{box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:0;outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-textarea--read-only,.utrecht-textarea--html-textarea:read-only,.utrecht-html textarea:read-only{border-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-input-border-color))));color:var(--utrecht-textarea-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))))}.utrecht-textarea__placeholder,.utrecht-textarea--html-textarea::placeholder,.utrecht-html textarea::placeholder{color:var(--utrecht-textarea-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));font-style:var(--utrecht-form-input-placeholder-font-style);opacity:100%}.utrecht-textarea--html-textarea:focus:not(:focus-visible),.utrecht-html textarea:focus:not(:focus-visible){box-shadow:none;outline-style:none}.utrecht-textbox,.utrecht-html input:not([type]),.utrecht-html input[type=date i],.utrecht-html input[type=datetime-local i],.utrecht-html input[type=email i],.utrecht-html input[type=month i],.utrecht-html input[type=number i],.utrecht-html input[type=password i],.utrecht-html input[type=search i],.utrecht-html input[type=tel i],.utrecht-html input[type=text i],.utrecht-html input[type=time i],.utrecht-html input[type=url i],.utrecht-html input[type=week i]{background-color:var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color));border-width:var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width));border-bottom-width:var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width)));border-color:var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color));border-radius:var(--utrecht-textbox-border-radius, var(--utrecht-form-input-border-radius, 0));border-style:solid;box-sizing:border-box;color:var(--utrecht-textbox-color, var(--utrecht-form-input-color));font-family:var(--utrecht-textbox-font-family, var(--utrecht-form-input-font-family));font-size:var(--utrecht-textbox-font-size, var(--utrecht-form-input-font-size, 1em));max-inline-size:var(--utrecht-textbox-max-inline-size, var(--utrecht-form-input-max-inline-size));padding-block-end:var(--utrecht-textbox-padding-block-end, var(--utrecht-form-input-padding-block-end));padding-block-start:var(--utrecht-textbox-padding-block-start, var(--utrecht-form-input-padding-block-start));padding-inline-end:var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-input-padding-inline-end));padding-inline-start:var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-input-padding-inline-start));width:100%}.utrecht-textbox--invalid,.utrecht-textbox--html-input:invalid,.utrecht-html input:invalid:not([type]),.utrecht-html input[type=date i]:invalid,.utrecht-html input[type=datetime-local i]:invalid,.utrecht-html input[type=email i]:invalid,.utrecht-html input[type=month i]:invalid,.utrecht-html input[type=number i]:invalid,.utrecht-html input[type=password i]:invalid,.utrecht-html input[type=search i]:invalid,.utrecht-html input[type=tel i]:invalid,.utrecht-html input[type=text i]:invalid,.utrecht-html input[type=time i]:invalid,.utrecht-html input[type=url i]:invalid,.utrecht-html input[type=week i]:invalid,.utrecht-textbox--html-input[aria-invalid=true],.utrecht-html input[aria-invalid=true]:not([type]),.utrecht-html input[aria-invalid=true][type=date i],.utrecht-html input[aria-invalid=true][type=datetime-local i],.utrecht-html input[aria-invalid=true][type=email i],.utrecht-html input[aria-invalid=true][type=month i],.utrecht-html input[aria-invalid=true][type=number i],.utrecht-html input[aria-invalid=true][type=password i],.utrecht-html input[aria-invalid=true][type=search i],.utrecht-html input[aria-invalid=true][type=tel i],.utrecht-html input[aria-invalid=true][type=text i],.utrecht-html input[aria-invalid=true][type=time i],.utrecht-html input[aria-invalid=true][type=url i],.utrecht-html input[aria-invalid=true][type=week i]{background-color:var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));border-width:var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width))))}.utrecht-textbox--disabled,.utrecht-textbox--html-input:disabled,.utrecht-html input:disabled:not([type]),.utrecht-html input[type=date i]:disabled,.utrecht-html input[type=datetime-local i]:disabled,.utrecht-html input[type=email i]:disabled,.utrecht-html input[type=month i]:disabled,.utrecht-html input[type=number i]:disabled,.utrecht-html input[type=password i]:disabled,.utrecht-html input[type=search i]:disabled,.utrecht-html input[type=tel i]:disabled,.utrecht-html input[type=text i]:disabled,.utrecht-html input[type=time i]:disabled,.utrecht-html input[type=url i]:disabled,.utrecht-html input[type=week i]:disabled{background-color:var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-textbox--focus,.utrecht-textbox--html-input:focus,.utrecht-html input:focus:not([type]),.utrecht-html input[type=date i]:focus,.utrecht-html input[type=datetime-local i]:focus,.utrecht-html input[type=email i]:focus,.utrecht-html input[type=month i]:focus,.utrecht-html input[type=number i]:focus,.utrecht-html input[type=password i]:focus,.utrecht-html input[type=search i]:focus,.utrecht-html input[type=tel i]:focus,.utrecht-html input[type=text i]:focus,.utrecht-html input[type=time i]:focus,.utrecht-html input[type=url i]:focus,.utrecht-html input[type=week i]:focus{background-color:var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))))}.utrecht-textbox--focus-visible,.utrecht-textbox--html-input:focus,.utrecht-html input:focus:not([type]),.utrecht-html input[type=date i]:focus,.utrecht-html input[type=datetime-local i]:focus,.utrecht-html input[type=email i]:focus,.utrecht-html input[type=month i]:focus,.utrecht-html input[type=number i]:focus,.utrecht-html input[type=password i]:focus,.utrecht-html input[type=search i]:focus,.utrecht-html input[type=tel i]:focus,.utrecht-html input[type=text i]:focus,.utrecht-html input[type=time i]:focus,.utrecht-html input[type=url i]:focus,.utrecht-html input[type=week i]:focus{box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:0;outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-textbox--read-only,.utrecht-textbox--html-input:read-only,.utrecht-html input:read-only:not([type]),.utrecht-html input[type=date i]:read-only,.utrecht-html input[type=datetime-local i]:read-only,.utrecht-html input[type=email i]:read-only,.utrecht-html input[type=month i]:read-only,.utrecht-html input[type=number i]:read-only,.utrecht-html input[type=password i]:read-only,.utrecht-html input[type=search i]:read-only,.utrecht-html input[type=tel i]:read-only,.utrecht-html input[type=text i]:read-only,.utrecht-html input[type=time i]:read-only,.utrecht-html input[type=url i]:read-only,.utrecht-html input[type=week i]:read-only{border-color:var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))))}.utrecht-textbox__placeholder,.utrecht-textbox--html-input::placeholder,.utrecht-html input:not([type])::placeholder,.utrecht-html input[type=date i]::placeholder,.utrecht-html input[type=datetime-local i]::placeholder,.utrecht-html input[type=email i]::placeholder,.utrecht-html input[type=month i]::placeholder,.utrecht-html input[type=number i]::placeholder,.utrecht-html input[type=password i]::placeholder,.utrecht-html input[type=search i]::placeholder,.utrecht-html input[type=tel i]::placeholder,.utrecht-html input[type=text i]::placeholder,.utrecht-html input[type=time i]::placeholder,.utrecht-html input[type=url i]::placeholder,.utrecht-html input[type=week i]::placeholder{color:var(--utrecht-textbox-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));font-style:var(--utrecht-form-input-placeholder-font-style);opacity:100%}.utrecht-textbox--numeric,.utrecht-html input[autocomplete~=bday i],.utrecht-html input[autocomplete~=bday-day i],.utrecht-html input[autocomplete~=bday-month i],.utrecht-html input[autocomplete~=bday-year i],.utrecht-html input[autocomplete~=cc-csc i],.utrecht-html input[autocomplete~=cc-exp i],.utrecht-html input[autocomplete~=cc-exp-month i],.utrecht-html input[autocomplete~=cc-exp-year i],.utrecht-html input[autocomplete~=cc-number i],.utrecht-html input[autocomplete~=one-time-code i],.utrecht-html input[autocomplete~=postal-code i],.utrecht-html input[autocomplete~=tel i],.utrecht-html input[autocomplete~=tel-area-code i],.utrecht-html input[autocomplete~=tel-country-code i],.utrecht-html input[autocomplete~=tel-extension i],.utrecht-html input[autocomplete~=tel-local i],.utrecht-html input[autocomplete~=tel-national i],.utrecht-html input[autocomplete~=transaction-amount i],.utrecht-html input[inputmode=decimal i],.utrecht-html input[inputmode=numeric i],.utrecht-html input[type=number i]{font-variant-numeric:lining-nums tabular-nums}.utrecht-textbox--password,.utrecht-html input[autocomplete~=current-password i],.utrecht-html input[autocomplete~=new-password i]{font-variant-ligatures:none;font-variant-numeric:slashed-zero}.utrecht-textbox--url,.utrecht-html input[type=url i]{font-variant-ligatures:none}.utrecht-textbox--html-input:focus:not(:focus-visible),.utrecht-html input:focus:not(:focus-visible):not([type]),.utrecht-html input[type=date i]:focus:not(:focus-visible),.utrecht-html input[type=datetime-local i]:focus:not(:focus-visible),.utrecht-html input[type=email i]:focus:not(:focus-visible),.utrecht-html input[type=month i]:focus:not(:focus-visible),.utrecht-html input[type=number i]:focus:not(:focus-visible),.utrecht-html input[type=password i]:focus:not(:focus-visible),.utrecht-html input[type=search i]:focus:not(:focus-visible),.utrecht-html input[type=tel i]:focus:not(:focus-visible),.utrecht-html input[type=text i]:focus:not(:focus-visible),.utrecht-html input[type=time i]:focus:not(:focus-visible),.utrecht-html input[type=url i]:focus:not(:focus-visible),.utrecht-html input[type=week i]:focus:not(:focus-visible){box-shadow:none;outline-style:none}.utrecht-unordered-list,.utrecht-html ul{font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-document-font-size, inherit);line-height:var(--utrecht-document-line-height, inherit);margin-block-end:0;margin-block-start:0;padding-inline-start:var(--utrecht-unordered-list-padding-inline-start, 2ch)}.utrecht-unordered-list--distanced,.utrecht-html ul{margin-block-end:var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end));margin-block-start:var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start))}.utrecht-unordered-list--nested{margin-block-end:0;margin-inline-start:2ch}.utrecht-unordered-list__item,.utrecht-html ul>li{margin-block-end:var(--utrecht-unordered-list-item-margin-block-end);margin-block-start:var(--utrecht-unordered-list-item-margin-block-start);padding-inline-start:var(--utrecht-unordered-list-item-padding-inline-start, 1ch)}.utrecht-unordered-list__item::marker,.utrecht-html ul>li::marker,.utrecht-unordered-list__marker{color:var(--utrecht-unordered-list-marker-color);content:\"●\"}:host{display:block}:host([hidden]){display:none !important}";
|
|
7
|
+
const stencilCss = "@charset \"UTF-8\";.utrecht-article,.utrecht-html article{max-inline-size:var(--utrecht-article-max-inline-size)}.utrecht-blockquote,.utrecht-html blockquote{font-family:var(--utrecht-document-font-family);font-size:var(--utrecht-blockquote-font-size);margin-inline-end:var(--utrecht-blockquote-margin-inline-end);margin-inline-start:var(--utrecht-blockquote-margin-inline-start)}.utrecht-blockquote__attribution{color:var(--utrecht-blockquote-attribution-color, inherit);font-size:var(--utrecht-blockquote-attribution-font-size, inherit)}.utrecht-blockquote__content,.utrecht-html blockquote{--utrecht-document-color:var(--utrecht-blockquote-content-color, inherit);--utrecht-paragraph-font-size:var(--utrecht-blockquote-content-font-size, inherit);color:var(--utrecht-blockquote-content-color, inherit);font-size:var(--utrecht-blockquote-content-font-size, inherit)}.utrecht-blockquote--distanced,.utrecht-html blockquote{margin-block-end:var(--utrecht-blockquote-margin-block-end);margin-block-start:var(--utrecht-blockquote-margin-block-start)}.utrecht-button,.utrecht-html input[type=button i],.utrecht-html input[type=reset i],.utrecht-html input[type=submit i],.utrecht-html button{background-color:var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));border-radius:var(--utrecht-button-border-radius);border-style:solid;border-width:var(--utrecht-button-border-width, 0);color:var(--utrecht-button-primary-action-color, var(--utrecht-button-color));font-family:var(--utrecht-button-font-family, var(--utrecht-document-font-family));font-size:var(--utrecht-button-font-size, var(--utrecht-document-font-family));font-weight:var(--utrecht-button-font-weight);inline-size:var(--utrecht-button-inline-size, auto);letter-spacing:var(--utrecht-button-letter-spacing);min-block-size:var(--utrecht-button-min-block-size, auto);min-inline-size:var(--utrecht-button-min-inline-size, 0);padding-block-end:var(--utrecht-button-padding-block-end);padding-block-start:var(--utrecht-button-padding-block-start);padding-inline-end:var(--utrecht-button-padding-inline-end);padding-inline-start:var(--utrecht-button-padding-inline-start);text-transform:var(--utrecht-button-text-transform);user-select:none}.utrecht-button--distanced,.utrecht-html input[type=button i],.utrecht-html input[type=reset i],.utrecht-html input[type=submit i],.utrecht-html button{margin-block-end:var(--utrecht-button-margin-block-end);margin-block-start:var(--utrecht-button-margin-block-start);margin-inline-end:var(--utrecht-button-margin-inline-end);margin-inline-start:var(--utrecht-button-margin-inline-start)}.utrecht-button--submit,.utrecht-html button[type=submit i],.utrecht-html input[type=submit i]{cursor:var(--utrecht-action-submit-cursor)}.utrecht-button--busy,.utrecht-html button[aria-busy=true],.utrecht-html button[aria-disabled=true][aria-busy=true],.utrecht-html button:disabled[aria-busy=true]{cursor:var(--utrecht-action-busy-cursor)}.utrecht-button:disabled,.utrecht-html input[type=button i]:disabled,.utrecht-html input[type=reset i]:disabled,.utrecht-html input[type=submit i]:disabled,.utrecht-html button:disabled,.utrecht-button--disabled,.utrecht-html button[aria-disabled=true]{background-color:var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));color:var(--utrecht-button-disabled-color, var(--utrecht-button-color));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-button:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-html input[type=button i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-html input[type=reset i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-html input[type=submit i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-button--active,.utrecht-html button:active:not([aria-disabled=true]):not(:disabled){background-color:var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));color:var(--utrecht-button-active-color, var(--utrecht-button-color))}.utrecht-button--focus-visible,.utrecht-html button:focus-visible,.utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-html input[type=button i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-html input[type=reset i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled){box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:0;outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-button--focus,.utrecht-html button:focus:not([aria-disabled=true]):not(:disabled),.utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-html input[type=button i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-html input[type=reset i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled){background-color:var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));color:var(--utrecht-button-focus-color, var(--utrecht-button-color))}.utrecht-button:focus:not(:focus-visible),.utrecht-html input[type=button i]:focus:not(:focus-visible),.utrecht-html input[type=reset i]:focus:not(:focus-visible),.utrecht-html input[type=submit i]:focus:not(:focus-visible),.utrecht-html button:focus:not(:focus-visible){box-shadow:none;outline-style:none}.utrecht-button--hover:not(:disabled),.utrecht-html button:not(:disabled):hover:not([aria-disabled=true]),.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-html input[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-html input[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),.utrecht-html input[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled){background-color:var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));color:var(--utrecht-button-hover-color, var(--utrecht-button-color));transform:scale(var(--utrecht-button-focus-transform-scale, 1))}.utrecht-checkbox,.utrecht-html input[type=checkbox i]{margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0}.utrecht-checkbox--disabled,.utrecht-checkbox--html-input:disabled,.utrecht-html input[type=checkbox i]:disabled{cursor:var(--utrecht-action-disabled-cursor)}.utrecht-checkbox--focus-visible{box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:0;outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-checkbox--html-input:focus,.utrecht-html input[type=checkbox i]:focus{box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:0;outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-checkbox--html-input:focus:not(:focus-visible),.utrecht-html input[type=checkbox i]:focus:not(:focus-visible){box-shadow:none;outline-style:none}.utrecht-emphasis--stressed,.utrecht-html em{font-style:var(--utrecht-emphasis-stressed-font-style, italic)}.utrecht-emphasis--strong,.utrecht-html strong{font-weight:var(--utrecht-emphasis-strong-font-weight, bold)}.utrecht-form-fieldset--reset-fieldset,.utrecht-html fieldset{border:0;margin-inline-end:0;margin-inline-start:0;min-width:0;padding-block-end:0;padding-block-start:0.01em;padding-inline-end:0;padding-inline-start:0}.utrecht-form-fieldset__legend--reset-legend,.utrecht-html legend{padding-inline-end:0;padding-inline-start:0}.utrecht-form-fieldset--distanced,.utrecht-html fieldset{margin-block-end:var(--utrecht-form-fieldset-margin-block-end, 0);margin-block-start:var(--utrecht-form-fieldset-margin-block-start, 0)}.utrecht-form-fieldset__legend,.utrecht-html legend{color:var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));font-family:var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));font-size:var(--utrecht-form-fieldset-legend-font-size);font-weight:var(--utrecht-form-fieldset-legend-font-weight);line-height:var(--utrecht-form-fieldset-legend-line-height);text-transform:var(--utrecht-form-fieldset-legend-text-transform)}.utrecht-form-fieldset__legend--distanced,.utrecht-html legend{margin-block-end:var(--utrecht-form-fieldset-legend-margin-block-end);margin-block-start:var(--utrecht-form-fieldset-legend-margin-block-start)}.utrecht-form-label,.utrecht-html label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox,.utrecht-html input[type=checkbox i]~label{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{cursor:var(--utrecht-action-disabled-cursor);font-weight:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color))}.utrecht-form-label--radio,.utrecht-html input[type=radio i]~label{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-heading-1,.utrecht-html h1{color:var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-1-font-size);font-weight:var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-1-letter-spacing);line-height:var(--utrecht-heading-1-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-1-text-transform, inherit)}.utrecht-heading-1--distanced,.utrecht-html h1{margin-block-end:var(--utrecht-heading-1-margin-block-end);margin-block-start:var(--utrecht-heading-1-margin-block-start)}.utrecht-heading-2,.utrecht-html h2{color:var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-2-font-size);font-weight:var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-2-letter-spacing);line-height:var(--utrecht-heading-2-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-2-text-transform, inherit)}.utrecht-heading-2--distanced,.utrecht-html h2{margin-block-end:var(--utrecht-heading-2-margin-block-end);margin-block-start:var(--utrecht-heading-2-margin-block-start)}.utrecht-heading-3,.utrecht-html h3{color:var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-3-font-size);font-weight:var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-3-letter-spacing);line-height:var(--utrecht-heading-3-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-3-text-transform, inherit)}.utrecht-heading-3--distanced,.utrecht-html h3{margin-block-end:var(--utrecht-heading-3-margin-block-end);margin-block-start:var(--utrecht-heading-3-margin-block-start)}.utrecht-heading-4,.utrecht-html h4{color:var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-4-font-size);font-weight:var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-4-letter-spacing);line-height:var(--utrecht-heading-4-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-4-text-transform, inherit)}.utrecht-heading-4--distanced,.utrecht-html h4{margin-block-end:var(--utrecht-heading-4-margin-block-end);margin-block-start:var(--utrecht-heading-4-margin-block-start)}.utrecht-heading-5,.utrecht-html h5{color:var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-5-font-size);font-weight:var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-5-letter-spacing);line-height:var(--utrecht-heading-5-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-5-text-transform, inherit)}.utrecht-heading-5--distanced,.utrecht-html h5{margin-block-end:var(--utrecht-heading-5-margin-block-end);margin-block-start:var(--utrecht-heading-5-margin-block-start)}.utrecht-heading-6,.utrecht-html h6{color:var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-6-font-size);font-weight:var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-6-letter-spacing);line-height:var(--utrecht-heading-6-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-6-text-transform, inherit)}.utrecht-heading-6--distanced,.utrecht-html h6{margin-block-end:var(--utrecht-heading-6-margin-block-end);margin-block-start:var(--utrecht-heading-6-margin-block-start)}.utrecht-link,.utrecht-html a:link{color:var(--utrecht-link-color, blue);text-decoration:var(--utrecht-link-text-decoration, underline);text-decoration-skip-ink:all;text-decoration-thickness:max(var(--utrecht-link-text-decoration-thickness), 1px);text-underline-offset:var(--utrecht-link-text-underline-offset)}.utrecht-link:visited,.utrecht-link--visited,.utrecht-html a:visited{color:var(--utrecht-link-visited-color, var(--utrecht-link-color))}.utrecht-link:hover,.utrecht-link--hover,.utrecht-html a:hover{color:var(--utrecht-link-hover-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip:none;text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px)}.utrecht-link:active,.utrecht-link--active,.utrecht-html a:active{color:var(--utrecht-link-active-color, var(--utrecht-link-color))}.utrecht-link--focus,.utrecht-html a:focus,.utrecht-link:focus{color:var(--utrecht-link-focus-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip:none;text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px)}.utrecht-link--focus-visible,.utrecht-html a:focus,.utrecht-link:focus{box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:0;outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-link:focus:not(:focus-visible),.utrecht-html a:focus:not(:focus-visible):link{box-shadow:none;outline-style:none}.utrecht-link--telephone,.utrecht-html a[href^=\"tel:\" i]{white-space:nowrap}.utrecht-html a:focus:not(:focus-visible){box-shadow:none;outline-style:none}.utrecht-ordered-list,.utrecht-html ol{font-family:var(--utrecht-document-font-family, inherit);margin-block-end:0;margin-block-start:0;padding-inline-start:var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch))}.utrecht-ordered-list--distanced,.utrecht-html ol{margin-block-end:var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end));margin-block-start:var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start))}.utrecht-ordered-list--arabic,.utrecht-html ol:lang(ar){list-style:arabic-indic}.utrecht-ordered-list__item,.utrecht-html ol>li{margin-block-end:var(--utrecht-ordered-list-item-margin-block-end, var(--utrecht-unordered-list-item-margin-block-end));margin-block-start:var(--utrecht-ordered-list-item-margin-block-start, var(--utrecht-unordered-list-item-margin-block-start));padding-inline-start:var(--utrecht-ordered-list-item-padding-inline-start, var(--utrecht-unordered-list-item-padding-inline-start, 1ch))}.utrecht-paragraph,.utrecht-html p{color:var(--utrecht-document-color, inherit);font-family:var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));font-size:var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));font-weight:var(--utrecht-paragraph-font-weight, inherit);line-height:var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));margin-block-end:0;margin-block-start:0}.utrecht-paragraph--lead,.utrecht-html p.lead{color:var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));font-size:var(--utrecht-paragraph-lead-font-size, inherit);font-weight:var(--utrecht-paragraph-lead-font-weight, inherit);line-height:var(--utrecht-paragraph-lead-line-height, inherit)}.utrecht-paragraph--distanced,.utrecht-html *~p{margin-block-end:var(--utrecht-paragraph-margin-block-end);margin-block-start:var(--utrecht-paragraph-margin-block-start)}.utrecht-radio-button,.utrecht-html input[type=radio i]{margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0}.utrecht-radio-button--disabled,.utrecht-radio-button--html-input:disabled,.utrecht-html input[type=radio i]:disabled{cursor:var(--utrecht-action-disabled-cursor)}.utrecht-radio-button--focus-visible,.utrecht-radio-button--html-input:focus,.utrecht-html input[type=radio i]:focus{box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:0;outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-radio-button--html-input:focus:not(:focus-visible),.utrecht-html input[type=radio i]:focus:not(:focus-visible){box-shadow:none;outline-style:none}.utrecht-separator,.utrecht-html hr{border-color:var(--utrecht-separator-color);border-style:solid;border-width:0 0 var(--utrecht-separator-block-size) 0}.utrecht-separator--distanced,.utrecht-html hr{margin-block-end:var(--utrecht-separator-margin-block-end);margin-block-start:var(--utrecht-separator-margin-block-start)}.utrecht-table,.utrecht-html table{border-collapse:collapse;border-color:var(--utrecht-table-border-color, 0);border-style:solid;border-width:var(--utrecht-table-border-width, 0);font-family:var(--utrecht-table-font-family, var(--utrecht-document-font-family));font-size:var(--utrecht-table-font-size, inherit);width:100%}.utrecht-table--distanced,.utrecht-html table{margin-block-end:var(--utrecht-table-margin-block-end);margin-block-start:var(--utrecht-table-margin-block-start)}.utrecht-table__caption,.utrecht-html caption{color:var(--utrecht-table-caption-color);font-family:var(--utrecht-table-caption-font-family);font-size:var(--utrecht-table-caption-font-size);font-weight:var(--utrecht-table-caption-font-weight);line-height:var(--utrecht-table-caption-line-height);margin-block-end:var(--utrecht-table-caption-margin-block-end);text-align:var(--utrecht-table-caption-text-align, center)}.utrecht-table__header,.utrecht-html thead{background-color:var(--utrecht-table-header-background-color);color:var(--utrecht-table-header-color);font-weight:var(--utrecht-table-header-font-weight);text-transform:var(--utrecht-table-header-text-transform);vertical-align:bottom}.utrecht-table__cell--last-header-row,.utrecht-html thead tr:last-child th{border-block-end-color:var(--utrecht-table-header-border-block-end-color, transparent);border-block-end-style:solid;border-block-end-width:var(--utrecht-table-header-border-block-end-width, 0)}.utrecht-table__body,.utrecht-html tbody{vertical-align:baseline}.utrecht-table__heading,.utrecht-html th{color:var(--utrecht-table-heading-color);font-size:var(--utrecht-table-heading-font-size);font-weight:var(--utrecht-table-heading-font-weight);text-transform:var(--utrecht-table-heading-text-transform)}.utrecht-table__cell,.utrecht-html th,.utrecht-html td{border-block-end-color:var(--utrecht-table-row-border-block-end-color, transparent);border-block-end-style:solid;border-block-end-width:var(--utrecht-table-row-border-block-end-width, 0);line-height:var(--utrecht-table-cell-line-height, inherit);padding-block-end:var(--utrecht-table-cell-padding-block-end, 0);padding-block-start:var(--utrecht-table-cell-padding-block-start, 0);padding-inline-end:var(--utrecht-table-cell-padding-inline-end, 0);padding-inline-start:var(--utrecht-table-cell-padding-inline-start, 0);text-align:start}.utrecht-table__cell--first,.utrecht-html td:first-child,.utrecht-html th:first-child{padding-inline-start:var(--utrecht-table-row-padding-inline-start, var(--utrecht-table-cell-padding-inline-start, 0))}.utrecht-table__cell--last,.utrecht-html td:last-child,.utrecht-html th:last-child{padding-inline-end:var(--utrecht-table-row-padding-inline-end, var(--utrecht-table-cell-padding-inline-end, 0))}.utrecht-table__cell--numeric-column,.utrecht-html td.numeric,.utrecht-html thead>tr>th.numeric,.utrecht-html tfoot>tr>th.numeric,.utrecht-html th[scope=column].numeric{text-align:right}.utrecht-table__cell--numeric-data,.utrecht-html td.numeric{font-variant-numeric:lining-nums tabular-nums}.utrecht-table__row--alternate-odd,.utrecht-html table.alternate-row-color>tbody>tr:nth-child(odd)>td,.utrecht-html table.alternate-row-color>tbody>tr:nth-child(odd)>th,.utrecht-html table.alternate-row-color>tr:nth-child(odd)>td,.utrecht-html table.alternate-row-color>tr:nth-child(odd)>th{background-color:var(--utrecht-table-row-alternate-odd-background-color);color:var(--utrecht-table-row-alternate-odd-color)}.utrecht-table__row--alternate-even,.utrecht-html table.alternate-row-color>tbody>tr:nth-child(even)>td,.utrecht-html table.alternate-row-color>tbody>tr:nth-child(even)>th,.utrecht-html table.alternate-row-color>tr:nth-child(even)>td,.utrecht-html table.alternate-row-color>tr:nth-child(even)>th{background-color:var(--utrecht-table-row-alternate-even-background-color);color:var(--utrecht-table-row-alternate-even-color)}.utrecht-textarea,.utrecht-html textarea{background-color:var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color));border-width:var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width));border-bottom-width:var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width)));border-color:var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color));border-radius:var(--utrecht-textarea-border-radius, var(--utrecht-form-input-border-radius, 0));border-style:solid;box-sizing:border-box;color:var(--utrecht-textarea-color, var(--utrecht-form-input-color));font-family:var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));font-size:var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));max-inline-size:var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));min-block-size:var(--utrecht-textarea-min-block-size);padding-block-end:var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end));padding-block-start:var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start));padding-inline-end:var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end));padding-inline-start:var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start));resize:vertical;width:100%}.utrecht-textarea--invalid,.utrecht-textarea--html-textarea:invalid,.utrecht-html textarea:invalid,.utrecht-textarea--html-textarea[aria-invalid=true],.utrecht-html textarea[aria-invalid=true]{background-color:var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));border-width:var(--utrecht-textarea-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width))))}.utrecht-textarea--disabled,.utrecht-textarea--html-textarea:disabled,.utrecht-html textarea:disabled{background-color:var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textarea-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-textarea--focus,.utrecht-textarea--html-textarea:focus,.utrecht-html textarea:focus{background-color:var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))))}.utrecht-textarea--focus-visible,.utrecht-textarea--html-textarea:focus,.utrecht-html textarea:focus{box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:0;outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-textarea--read-only,.utrecht-textarea--html-textarea:read-only,.utrecht-html textarea:read-only{border-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-input-border-color))));color:var(--utrecht-textarea-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))))}.utrecht-textarea__placeholder,.utrecht-textarea--html-textarea::placeholder,.utrecht-html textarea::placeholder{color:var(--utrecht-textarea-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));font-style:var(--utrecht-form-input-placeholder-font-style);opacity:100%}.utrecht-textarea--html-textarea:focus:not(:focus-visible),.utrecht-html textarea:focus:not(:focus-visible){box-shadow:none;outline-style:none}.utrecht-textbox,.utrecht-html input:not([type]),.utrecht-html input[type=date i],.utrecht-html input[type=datetime-local i],.utrecht-html input[type=email i],.utrecht-html input[type=month i],.utrecht-html input[type=number i],.utrecht-html input[type=password i],.utrecht-html input[type=search i],.utrecht-html input[type=tel i],.utrecht-html input[type=text i],.utrecht-html input[type=time i],.utrecht-html input[type=url i],.utrecht-html input[type=week i]{background-color:var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color));border-width:var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width));border-bottom-width:var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width)));border-color:var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color));border-radius:var(--utrecht-textbox-border-radius, var(--utrecht-form-input-border-radius, 0));border-style:solid;box-sizing:border-box;color:var(--utrecht-textbox-color, var(--utrecht-form-input-color));font-family:var(--utrecht-textbox-font-family, var(--utrecht-form-input-font-family));font-size:var(--utrecht-textbox-font-size, var(--utrecht-form-input-font-size, 1em));max-inline-size:var(--utrecht-textbox-max-inline-size, var(--utrecht-form-input-max-inline-size));padding-block-end:var(--utrecht-textbox-padding-block-end, var(--utrecht-form-input-padding-block-end));padding-block-start:var(--utrecht-textbox-padding-block-start, var(--utrecht-form-input-padding-block-start));padding-inline-end:var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-input-padding-inline-end));padding-inline-start:var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-input-padding-inline-start));width:100%}.utrecht-textbox--invalid,.utrecht-textbox--html-input:invalid,.utrecht-html input:invalid:not([type]),.utrecht-html input[type=date i]:invalid,.utrecht-html input[type=datetime-local i]:invalid,.utrecht-html input[type=email i]:invalid,.utrecht-html input[type=month i]:invalid,.utrecht-html input[type=number i]:invalid,.utrecht-html input[type=password i]:invalid,.utrecht-html input[type=search i]:invalid,.utrecht-html input[type=tel i]:invalid,.utrecht-html input[type=text i]:invalid,.utrecht-html input[type=time i]:invalid,.utrecht-html input[type=url i]:invalid,.utrecht-html input[type=week i]:invalid,.utrecht-textbox--html-input[aria-invalid=true],.utrecht-html input[aria-invalid=true]:not([type]),.utrecht-html input[aria-invalid=true][type=date i],.utrecht-html input[aria-invalid=true][type=datetime-local i],.utrecht-html input[aria-invalid=true][type=email i],.utrecht-html input[aria-invalid=true][type=month i],.utrecht-html input[aria-invalid=true][type=number i],.utrecht-html input[aria-invalid=true][type=password i],.utrecht-html input[aria-invalid=true][type=search i],.utrecht-html input[aria-invalid=true][type=tel i],.utrecht-html input[aria-invalid=true][type=text i],.utrecht-html input[aria-invalid=true][type=time i],.utrecht-html input[aria-invalid=true][type=url i],.utrecht-html input[aria-invalid=true][type=week i]{background-color:var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));border-width:var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width))))}.utrecht-textbox--disabled,.utrecht-textbox--html-input:disabled,.utrecht-html input:disabled:not([type]),.utrecht-html input[type=date i]:disabled,.utrecht-html input[type=datetime-local i]:disabled,.utrecht-html input[type=email i]:disabled,.utrecht-html input[type=month i]:disabled,.utrecht-html input[type=number i]:disabled,.utrecht-html input[type=password i]:disabled,.utrecht-html input[type=search i]:disabled,.utrecht-html input[type=tel i]:disabled,.utrecht-html input[type=text i]:disabled,.utrecht-html input[type=time i]:disabled,.utrecht-html input[type=url i]:disabled,.utrecht-html input[type=week i]:disabled{background-color:var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-textbox--focus,.utrecht-textbox--html-input:focus,.utrecht-html input:focus:not([type]),.utrecht-html input[type=date i]:focus,.utrecht-html input[type=datetime-local i]:focus,.utrecht-html input[type=email i]:focus,.utrecht-html input[type=month i]:focus,.utrecht-html input[type=number i]:focus,.utrecht-html input[type=password i]:focus,.utrecht-html input[type=search i]:focus,.utrecht-html input[type=tel i]:focus,.utrecht-html input[type=text i]:focus,.utrecht-html input[type=time i]:focus,.utrecht-html input[type=url i]:focus,.utrecht-html input[type=week i]:focus{background-color:var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))))}.utrecht-textbox--focus-visible,.utrecht-textbox--html-input:focus,.utrecht-html input:focus:not([type]),.utrecht-html input[type=date i]:focus,.utrecht-html input[type=datetime-local i]:focus,.utrecht-html input[type=email i]:focus,.utrecht-html input[type=month i]:focus,.utrecht-html input[type=number i]:focus,.utrecht-html input[type=password i]:focus,.utrecht-html input[type=search i]:focus,.utrecht-html input[type=tel i]:focus,.utrecht-html input[type=text i]:focus,.utrecht-html input[type=time i]:focus,.utrecht-html input[type=url i]:focus,.utrecht-html input[type=week i]:focus{box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:0;outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-textbox--read-only,.utrecht-textbox--html-input:read-only,.utrecht-html input:read-only:not([type]),.utrecht-html input[type=date i]:read-only,.utrecht-html input[type=datetime-local i]:read-only,.utrecht-html input[type=email i]:read-only,.utrecht-html input[type=month i]:read-only,.utrecht-html input[type=number i]:read-only,.utrecht-html input[type=password i]:read-only,.utrecht-html input[type=search i]:read-only,.utrecht-html input[type=tel i]:read-only,.utrecht-html input[type=text i]:read-only,.utrecht-html input[type=time i]:read-only,.utrecht-html input[type=url i]:read-only,.utrecht-html input[type=week i]:read-only{border-color:var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))))}.utrecht-textbox__placeholder,.utrecht-textbox--html-input::placeholder,.utrecht-html input:not([type])::placeholder,.utrecht-html input[type=date i]::placeholder,.utrecht-html input[type=datetime-local i]::placeholder,.utrecht-html input[type=email i]::placeholder,.utrecht-html input[type=month i]::placeholder,.utrecht-html input[type=number i]::placeholder,.utrecht-html input[type=password i]::placeholder,.utrecht-html input[type=search i]::placeholder,.utrecht-html input[type=tel i]::placeholder,.utrecht-html input[type=text i]::placeholder,.utrecht-html input[type=time i]::placeholder,.utrecht-html input[type=url i]::placeholder,.utrecht-html input[type=week i]::placeholder{color:var(--utrecht-textbox-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));font-style:var(--utrecht-form-input-placeholder-font-style);opacity:100%}.utrecht-textbox--numeric,.utrecht-html input[autocomplete~=bday i],.utrecht-html input[autocomplete~=bday-day i],.utrecht-html input[autocomplete~=bday-month i],.utrecht-html input[autocomplete~=bday-year i],.utrecht-html input[autocomplete~=cc-csc i],.utrecht-html input[autocomplete~=cc-exp i],.utrecht-html input[autocomplete~=cc-exp-month i],.utrecht-html input[autocomplete~=cc-exp-year i],.utrecht-html input[autocomplete~=cc-number i],.utrecht-html input[autocomplete~=one-time-code i],.utrecht-html input[autocomplete~=postal-code i],.utrecht-html input[autocomplete~=tel i],.utrecht-html input[autocomplete~=tel-area-code i],.utrecht-html input[autocomplete~=tel-country-code i],.utrecht-html input[autocomplete~=tel-extension i],.utrecht-html input[autocomplete~=tel-local i],.utrecht-html input[autocomplete~=tel-national i],.utrecht-html input[autocomplete~=transaction-amount i],.utrecht-html input[inputmode=decimal i],.utrecht-html input[inputmode=numeric i],.utrecht-html input[type=number i]{font-variant-numeric:lining-nums tabular-nums}.utrecht-textbox--password,.utrecht-html input[autocomplete~=current-password i],.utrecht-html input[autocomplete~=new-password i]{font-variant-ligatures:none;font-variant-numeric:slashed-zero}.utrecht-textbox--url,.utrecht-html input[type=url i]{font-variant-ligatures:none}.utrecht-textbox--html-input:focus:not(:focus-visible),.utrecht-html input:focus:not(:focus-visible):not([type]),.utrecht-html input[type=date i]:focus:not(:focus-visible),.utrecht-html input[type=datetime-local i]:focus:not(:focus-visible),.utrecht-html input[type=email i]:focus:not(:focus-visible),.utrecht-html input[type=month i]:focus:not(:focus-visible),.utrecht-html input[type=number i]:focus:not(:focus-visible),.utrecht-html input[type=password i]:focus:not(:focus-visible),.utrecht-html input[type=search i]:focus:not(:focus-visible),.utrecht-html input[type=tel i]:focus:not(:focus-visible),.utrecht-html input[type=text i]:focus:not(:focus-visible),.utrecht-html input[type=time i]:focus:not(:focus-visible),.utrecht-html input[type=url i]:focus:not(:focus-visible),.utrecht-html input[type=week i]:focus:not(:focus-visible){box-shadow:none;outline-style:none}.utrecht-unordered-list,.utrecht-html ul{font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-document-font-size, inherit);line-height:var(--utrecht-document-line-height, inherit);margin-block-end:0;margin-block-start:0;padding-inline-start:var(--utrecht-unordered-list-padding-inline-start, 2ch)}.utrecht-unordered-list--distanced,.utrecht-html ul{margin-block-end:var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end));margin-block-start:var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start))}.utrecht-unordered-list--nested{margin-block-end:0;margin-inline-start:2ch}.utrecht-unordered-list__item,.utrecht-html ul>li{margin-block-end:var(--utrecht-unordered-list-item-margin-block-end);margin-block-start:var(--utrecht-unordered-list-item-margin-block-start);padding-inline-start:var(--utrecht-unordered-list-item-padding-inline-start, 1ch)}.utrecht-unordered-list__item::marker,.utrecht-html ul>li::marker,.utrecht-unordered-list__marker{color:var(--utrecht-unordered-list-marker-color);content:\"●\"}:host{display:block}:host([hidden]){display:none !important}";
|
|
8
8
|
|
|
9
9
|
let HTMLContent = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -104,16 +104,73 @@ ol.utrecht-breadcrumb__list {
|
|
|
104
104
|
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
105
105
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
106
106
|
*/
|
|
107
|
+
/* stylelint-disable scss/no-global-function-names */
|
|
107
108
|
/**
|
|
108
109
|
* @license EUPL-1.2
|
|
109
110
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
110
111
|
* Copyright (c) 2021 Robbert Broersma
|
|
111
112
|
*/
|
|
112
113
|
/* stylelint-disable-next-line block-no-empty */
|
|
114
|
+
/*
|
|
115
|
+
|
|
116
|
+
# CSS implementation
|
|
117
|
+
|
|
118
|
+
## `text-decoration-skip`
|
|
119
|
+
|
|
120
|
+
`text-decoration-skip` can be helpful to avoid making some texts unreadable.
|
|
121
|
+
For example by obscuring Arabic diacritics.
|
|
122
|
+
|
|
123
|
+
However, the combination of a greater thickness and skipping this thick underline
|
|
124
|
+
leads to a very unappealing rendering of the underline. To avoid this,
|
|
125
|
+
`text-decoration-skip` is disabled for interactive states.
|
|
126
|
+
|
|
127
|
+
For design token configurations that have identical thickness for normal and interactive
|
|
128
|
+
states, this will lead to the (undesirable) effect that the focus/hover effect is switching
|
|
129
|
+
from an interrupted to an uninterrupted underline (for some texts).
|
|
130
|
+
|
|
131
|
+
Apart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.
|
|
132
|
+
|
|
133
|
+
---
|
|
134
|
+
|
|
135
|
+
Disabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now
|
|
136
|
+
that moving the pointer away from a link or having focus elsewhere first is simple enough to
|
|
137
|
+
not make this too inconvenient.
|
|
138
|
+
|
|
139
|
+
---
|
|
140
|
+
|
|
141
|
+
Some folks implement the underline of links using `border-bottom` or even using a finely crafted
|
|
142
|
+
`linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches
|
|
143
|
+
would unfortunately not be able to provide the improved readability of `text-decoration-skip`.
|
|
144
|
+
|
|
145
|
+
## `text-decoration-thickness`
|
|
146
|
+
|
|
147
|
+
Varying `text-decoration-thickness` can be used to distinguish interactive states.
|
|
148
|
+
|
|
149
|
+
---
|
|
150
|
+
|
|
151
|
+
`text-decoration-thickness` appears to have rendering differences between Chrome and Safari.
|
|
152
|
+
In Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome
|
|
153
|
+
the underline offset also seems to increase along with the thickness, which effectively means
|
|
154
|
+
the underline is closer to the next line than in Safari.
|
|
155
|
+
|
|
156
|
+
---
|
|
157
|
+
|
|
158
|
+
It might be nice to use font-relative units for `text-decoration-thickness`, and that is why we
|
|
159
|
+
use the `max()` function to ensure the underline remains visible for every font size.
|
|
160
|
+
|
|
161
|
+
## `transition`
|
|
162
|
+
|
|
163
|
+
`text-decoration-thickness` could be a candidate for animating between interactive states,
|
|
164
|
+
however browsers don't seem to have implemented great looking supixel tweening yet.
|
|
165
|
+
|
|
166
|
+
`text-decoration-skip` also makes the transition more challenging to implement.
|
|
167
|
+
|
|
168
|
+
*/
|
|
113
169
|
.utrecht-link {
|
|
114
170
|
color: var(--utrecht-link-color, blue);
|
|
115
171
|
text-decoration: var(--utrecht-link-text-decoration, underline);
|
|
116
172
|
text-decoration-skip-ink: all;
|
|
173
|
+
text-decoration-thickness: max(var(--utrecht-link-text-decoration-thickness), 1px);
|
|
117
174
|
text-underline-offset: var(--utrecht-link-text-underline-offset);
|
|
118
175
|
}
|
|
119
176
|
|
|
@@ -126,6 +183,9 @@ ol.utrecht-breadcrumb__list {
|
|
|
126
183
|
.utrecht-link--hover {
|
|
127
184
|
color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
|
|
128
185
|
text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
186
|
+
text-decoration-skip: none;
|
|
187
|
+
text-decoration-skip-ink: none;
|
|
188
|
+
text-decoration-thickness: max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
|
|
129
189
|
}
|
|
130
190
|
|
|
131
191
|
.utrecht-link:active,
|
|
@@ -136,6 +196,9 @@ ol.utrecht-breadcrumb__list {
|
|
|
136
196
|
.utrecht-link--focus, .utrecht-link:focus {
|
|
137
197
|
color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
|
|
138
198
|
text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
199
|
+
text-decoration-skip: none;
|
|
200
|
+
text-decoration-skip-ink: none;
|
|
201
|
+
text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
|
|
139
202
|
}
|
|
140
203
|
|
|
141
204
|
.utrecht-link--focus-visible, .utrecht-link:focus {
|
|
@@ -498,16 +498,73 @@
|
|
|
498
498
|
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
499
499
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
500
500
|
*/
|
|
501
|
+
/* stylelint-disable scss/no-global-function-names */
|
|
501
502
|
/**
|
|
502
503
|
* @license EUPL-1.2
|
|
503
504
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
504
505
|
* Copyright (c) 2021 Robbert Broersma
|
|
505
506
|
*/
|
|
506
507
|
/* stylelint-disable-next-line block-no-empty */
|
|
508
|
+
/*
|
|
509
|
+
|
|
510
|
+
# CSS implementation
|
|
511
|
+
|
|
512
|
+
## `text-decoration-skip`
|
|
513
|
+
|
|
514
|
+
`text-decoration-skip` can be helpful to avoid making some texts unreadable.
|
|
515
|
+
For example by obscuring Arabic diacritics.
|
|
516
|
+
|
|
517
|
+
However, the combination of a greater thickness and skipping this thick underline
|
|
518
|
+
leads to a very unappealing rendering of the underline. To avoid this,
|
|
519
|
+
`text-decoration-skip` is disabled for interactive states.
|
|
520
|
+
|
|
521
|
+
For design token configurations that have identical thickness for normal and interactive
|
|
522
|
+
states, this will lead to the (undesirable) effect that the focus/hover effect is switching
|
|
523
|
+
from an interrupted to an uninterrupted underline (for some texts).
|
|
524
|
+
|
|
525
|
+
Apart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.
|
|
526
|
+
|
|
527
|
+
---
|
|
528
|
+
|
|
529
|
+
Disabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now
|
|
530
|
+
that moving the pointer away from a link or having focus elsewhere first is simple enough to
|
|
531
|
+
not make this too inconvenient.
|
|
532
|
+
|
|
533
|
+
---
|
|
534
|
+
|
|
535
|
+
Some folks implement the underline of links using `border-bottom` or even using a finely crafted
|
|
536
|
+
`linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches
|
|
537
|
+
would unfortunately not be able to provide the improved readability of `text-decoration-skip`.
|
|
538
|
+
|
|
539
|
+
## `text-decoration-thickness`
|
|
540
|
+
|
|
541
|
+
Varying `text-decoration-thickness` can be used to distinguish interactive states.
|
|
542
|
+
|
|
543
|
+
---
|
|
544
|
+
|
|
545
|
+
`text-decoration-thickness` appears to have rendering differences between Chrome and Safari.
|
|
546
|
+
In Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome
|
|
547
|
+
the underline offset also seems to increase along with the thickness, which effectively means
|
|
548
|
+
the underline is closer to the next line than in Safari.
|
|
549
|
+
|
|
550
|
+
---
|
|
551
|
+
|
|
552
|
+
It might be nice to use font-relative units for `text-decoration-thickness`, and that is why we
|
|
553
|
+
use the `max()` function to ensure the underline remains visible for every font size.
|
|
554
|
+
|
|
555
|
+
## `transition`
|
|
556
|
+
|
|
557
|
+
`text-decoration-thickness` could be a candidate for animating between interactive states,
|
|
558
|
+
however browsers don't seem to have implemented great looking supixel tweening yet.
|
|
559
|
+
|
|
560
|
+
`text-decoration-skip` also makes the transition more challenging to implement.
|
|
561
|
+
|
|
562
|
+
*/
|
|
507
563
|
.utrecht-link, .utrecht-html a:link {
|
|
508
564
|
color: var(--utrecht-link-color, blue);
|
|
509
565
|
text-decoration: var(--utrecht-link-text-decoration, underline);
|
|
510
566
|
text-decoration-skip-ink: all;
|
|
567
|
+
text-decoration-thickness: max(var(--utrecht-link-text-decoration-thickness), 1px);
|
|
511
568
|
text-underline-offset: var(--utrecht-link-text-underline-offset);
|
|
512
569
|
}
|
|
513
570
|
|
|
@@ -522,6 +579,9 @@
|
|
|
522
579
|
.utrecht-html a:hover {
|
|
523
580
|
color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
|
|
524
581
|
text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
582
|
+
text-decoration-skip: none;
|
|
583
|
+
text-decoration-skip-ink: none;
|
|
584
|
+
text-decoration-thickness: max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
|
|
525
585
|
}
|
|
526
586
|
|
|
527
587
|
.utrecht-link:active,
|
|
@@ -533,6 +593,9 @@
|
|
|
533
593
|
.utrecht-link--focus, .utrecht-html a:focus, .utrecht-link:focus {
|
|
534
594
|
color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
|
|
535
595
|
text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
596
|
+
text-decoration-skip: none;
|
|
597
|
+
text-decoration-skip-ink: none;
|
|
598
|
+
text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
|
|
536
599
|
}
|
|
537
600
|
|
|
538
601
|
.utrecht-link--focus-visible, .utrecht-html a:focus, .utrecht-link:focus {
|
|
@@ -7,16 +7,73 @@
|
|
|
7
7
|
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
8
8
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
9
9
|
*/
|
|
10
|
+
/* stylelint-disable scss/no-global-function-names */
|
|
10
11
|
/**
|
|
11
12
|
* @license EUPL-1.2
|
|
12
13
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
13
14
|
* Copyright (c) 2021 Robbert Broersma
|
|
14
15
|
*/
|
|
15
16
|
/* stylelint-disable-next-line block-no-empty */
|
|
17
|
+
/*
|
|
18
|
+
|
|
19
|
+
# CSS implementation
|
|
20
|
+
|
|
21
|
+
## `text-decoration-skip`
|
|
22
|
+
|
|
23
|
+
`text-decoration-skip` can be helpful to avoid making some texts unreadable.
|
|
24
|
+
For example by obscuring Arabic diacritics.
|
|
25
|
+
|
|
26
|
+
However, the combination of a greater thickness and skipping this thick underline
|
|
27
|
+
leads to a very unappealing rendering of the underline. To avoid this,
|
|
28
|
+
`text-decoration-skip` is disabled for interactive states.
|
|
29
|
+
|
|
30
|
+
For design token configurations that have identical thickness for normal and interactive
|
|
31
|
+
states, this will lead to the (undesirable) effect that the focus/hover effect is switching
|
|
32
|
+
from an interrupted to an uninterrupted underline (for some texts).
|
|
33
|
+
|
|
34
|
+
Apart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
Disabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now
|
|
39
|
+
that moving the pointer away from a link or having focus elsewhere first is simple enough to
|
|
40
|
+
not make this too inconvenient.
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
Some folks implement the underline of links using `border-bottom` or even using a finely crafted
|
|
45
|
+
`linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches
|
|
46
|
+
would unfortunately not be able to provide the improved readability of `text-decoration-skip`.
|
|
47
|
+
|
|
48
|
+
## `text-decoration-thickness`
|
|
49
|
+
|
|
50
|
+
Varying `text-decoration-thickness` can be used to distinguish interactive states.
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
`text-decoration-thickness` appears to have rendering differences between Chrome and Safari.
|
|
55
|
+
In Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome
|
|
56
|
+
the underline offset also seems to increase along with the thickness, which effectively means
|
|
57
|
+
the underline is closer to the next line than in Safari.
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
It might be nice to use font-relative units for `text-decoration-thickness`, and that is why we
|
|
62
|
+
use the `max()` function to ensure the underline remains visible for every font size.
|
|
63
|
+
|
|
64
|
+
## `transition`
|
|
65
|
+
|
|
66
|
+
`text-decoration-thickness` could be a candidate for animating between interactive states,
|
|
67
|
+
however browsers don't seem to have implemented great looking supixel tweening yet.
|
|
68
|
+
|
|
69
|
+
`text-decoration-skip` also makes the transition more challenging to implement.
|
|
70
|
+
|
|
71
|
+
*/
|
|
16
72
|
.utrecht-link {
|
|
17
73
|
color: var(--utrecht-link-color, blue);
|
|
18
74
|
text-decoration: var(--utrecht-link-text-decoration, underline);
|
|
19
75
|
text-decoration-skip-ink: all;
|
|
76
|
+
text-decoration-thickness: max(var(--utrecht-link-text-decoration-thickness), 1px);
|
|
20
77
|
text-underline-offset: var(--utrecht-link-text-underline-offset);
|
|
21
78
|
}
|
|
22
79
|
|
|
@@ -29,6 +86,9 @@
|
|
|
29
86
|
.utrecht-link--hover {
|
|
30
87
|
color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
|
|
31
88
|
text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
89
|
+
text-decoration-skip: none;
|
|
90
|
+
text-decoration-skip-ink: none;
|
|
91
|
+
text-decoration-thickness: max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
|
|
32
92
|
}
|
|
33
93
|
|
|
34
94
|
.utrecht-link:active,
|
|
@@ -39,6 +99,9 @@
|
|
|
39
99
|
.utrecht-link--focus, .utrecht-link:focus {
|
|
40
100
|
color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
|
|
41
101
|
text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
102
|
+
text-decoration-skip: none;
|
|
103
|
+
text-decoration-skip-ink: none;
|
|
104
|
+
text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
|
|
42
105
|
}
|
|
43
106
|
|
|
44
107
|
.utrecht-link--focus-visible, .utrecht-link:focus {
|