@utrecht/component-library-css 6.1.0 → 7.1.0

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.
@@ -5,78 +5,21 @@
5
5
  */
6
6
  /**
7
7
  * @license EUPL-1.2
8
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
9
- */
10
- /**
11
- * @license EUPL-1.2
12
- * Copyright (c) 2021 Robbert Broersma
13
- * Copyright (c) 2021 Gemeente Utrecht
14
- */
15
- /**
16
- * @license EUPL-1.2
17
- * Copyright (c) 2022 Gemeente Utrecht
18
- * Copyright (c) 2022 Robbert Broersma
19
- */
20
- /**
21
- * @license EUPL-1.2
22
- * Copyright (c) 2022 The Knights Who Say NIH! B.V.
23
- * Copyright (c) 2022 Gemeente Utrecht
24
- */
25
- /**
26
- * @license EUPL-1.2
27
- * Copyright (c) 2022 Robbert Broersma
28
- */
29
- /**
30
- * @license EUPL-1.2
31
- * Copyright (c) 2022 Gemeente Utrecht
32
- * Copyright (c) 2022 Robbert Broersma
33
- * Copyright (c) 2022 The Knights Who Say NIH! B.V.
34
- */
35
- /**
36
- * @license EUPL-1.2
37
- * Copyright (c) 2021-2022 Frameless B.V.
38
- */
39
- /**
40
- * @license EUPL-1.2
41
- * Copyright (c) 2021 Gemeente Utrecht
42
- * Copyright (c) 2021 Robbert Broersma
43
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
8
+ * Copyright (c) 2020-2022 Gemeente Utrecht
9
+ * Copyright (c) 2020-2022 Frameless B.V.
44
10
  */
45
11
  /**
46
12
  * @license EUPL-1.2
47
13
  * Copyright (c) 2023 Frameless B.V.
48
14
  */
49
- /**
50
- * @license EUPL-1.2
51
- * Copyright (c) 2021-2022 Gemeente Utrecht
52
- * Copyright (c) 2021-2022 Frameless B.V.
53
- */
54
- /**
55
- * @license EUPL-1.2
56
- * Copyright (c) 2021 Gemeente Utrecht
57
- * Copyright (c) 2021 Robbert Broersma
58
- */
59
- /**
60
- * @license EUPL-1.2
61
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
62
- * Copyright (c) 2021 Gemeente Utrecht
63
- */
64
15
  /**
65
16
  * @license EUPL-1.2
66
17
  * Copyright (c) 2022 Frameless B.V.
67
18
  */
68
19
  /**
69
20
  * @license EUPL-1.2
70
- * Copyright (c) 2021 Robbert Broersma
71
- */
72
- /**
73
- * @license EUPL-1.2
74
- * Copyright (c) 2020-2022 Gemeente Utrecht
75
- * Copyright (c) 2020-2022 Frameless B.V.
76
- */
77
- /**
78
- * @license EUPL-1.2
79
- * Copyright (c) 2021 Gemeente Utrecht
21
+ * Copyright (c) 2020-2024 Frameless B.V.
22
+ * Copyright (c) 2021-2024 Gemeente Utrecht
80
23
  */
81
24
  .utrecht-accordion {
82
25
  display: grid;
@@ -178,15 +121,19 @@
178
121
  padding-top: var(--utrecht-alert-padding-block-start);
179
122
  padding-right: var(--utrecht-alert-padding-inline-end);
180
123
  padding-left: var(--utrecht-alert-padding-inline-start);
124
+ align-self: center;
181
125
  border-color: var(--utrecht-alert-dialog-border-color);
182
126
  border-radius: var(--utrecht-alert-dialog-border-radius, 0);
183
127
  border-style: solid;
184
128
  border-width: var(--utrecht-alert-dialog-border-width, 0);
185
129
  box-shadow: var(--utrecht-alert-dialog-box-shadow);
186
- max-height: var(--utrecht-alert-dialog-max-block-size);
187
- max-width: var(--utrecht-alert-dialog-max-inline-size);
130
+ justify-self: center;
131
+ max-height: min(var(--utrecht-alert-dialog-max-block-size), 100%);
132
+ max-width: min(var(--utrecht-alert-dialog-max-inline-size), 100%);
188
133
  min-height: var(--utrecht-alert-dialog-min-block-size);
189
134
  min-width: var(--utrecht-alert-dialog-min-inline-size);
135
+ overflow-y: auto;
136
+ overflow-block: auto;
190
137
  }
191
138
 
192
139
  .utrecht-alert-dialog[prince-xml-ignore-pseudo-element-backdrop] {
@@ -357,28 +304,6 @@
357
304
  text-decoration: none;
358
305
  white-space: nowrap;
359
306
  }
360
- .utrecht-badge-data {
361
- background-color: var(--utrecht-badge-background-color, hsl(0, 0%, 0%));
362
- border-radius: var(--utrecht-badge-border-radius, 0.5ch);
363
- color: var(--utrecht-badge-color, hsl(0, 0%, 100%));
364
- display: inline-block;
365
- font-family: var(--utrecht-document-font-family, sans-serif);
366
- font-size: var(--utrecht-badge-font-size, inherit);
367
- font-style: var(--utrecht-badge-font-style, normal);
368
- font-weight: var(--utrecht-badge-font-weight, bold);
369
- line-height: var(--utrecht-badge-line-height, 1em);
370
- max-height: max-content;
371
- max-width: max-content;
372
- min-height: 1em;
373
- min-width: 1em;
374
- padding-bottom: var(--utrecht-badge-padding-block, 0.5ex);
375
- padding-top: var(--utrecht-badge-padding-block, 0.5ex);
376
- padding-right: var(--utrecht-badge-padding-inline, 0.5ch);
377
- padding-left: var(--utrecht-badge-padding-inline, 0.5ch);
378
- text-decoration: none;
379
- letter-spacing: var(--utrecht-badge-data-letter-spacing, inherit);
380
- text-transform: var(--utrecht-badge-data-text-transform, inherit);
381
- }
382
307
  .utrecht-badge-list {
383
308
  column-gap: var(--utrecht-badge-list-column-gap);
384
309
  display: flex;
@@ -513,6 +438,27 @@
513
438
  color: var(--utrecht-blockquote-content-color, inherit);
514
439
  font-size: var(--utrecht-blockquote-content-font-size, inherit);
515
440
  }
441
+ .utrecht-body {
442
+ height: 100%;
443
+ font-family: var(--utrecht-body-font-family, inherit);
444
+ font-size: var(--utrecht-body-font-size, inherit);
445
+ font-weight: var(--utrecht-body-font-weight, inherit);
446
+ line-height: var(--utrecht-body-line-height, inherit);
447
+ margin-bottom: 0;
448
+ margin-top: 0;
449
+ margin-right: 0;
450
+ margin-left: 0;
451
+ padding-bottom: 0;
452
+ padding-top: 0;
453
+ padding-right: 0;
454
+ padding-left: 0;
455
+ }
456
+ @media screen {
457
+ .utrecht-body {
458
+ min-height: 100vh;
459
+ min-height: 100vb;
460
+ }
461
+ }
516
462
  .utrecht-breadcrumb-nav {
517
463
  --utrecht-focus-background-color: var(--utrecht-breadcrumb-nav-link-focus-background-color);
518
464
  --utrecht-link-background-color: var(--utrecht-breadcrumb-nav-link-background-color);
@@ -678,6 +624,7 @@
678
624
  .utrecht-button-group {
679
625
  align-items: baseline;
680
626
  background-color: var(--utrecht-button-group-background-color);
627
+ break-inside: avoid;
681
628
  display: flex;
682
629
  flex-wrap: wrap;
683
630
  gap: var(--utrecht-button-group-inline-gap, 1em);
@@ -962,6 +909,7 @@
962
909
  outline-offset: var(--utrecht-focus-outline-offset, revert);
963
910
  outline-style: var(--utrecht-focus-outline-style, revert);
964
911
  outline-width: var(--utrecht-focus-outline-width, revert);
912
+ z-index: 1;
965
913
  }
966
914
 
967
915
  .utrecht-button-link--placeholder {
@@ -985,6 +933,7 @@
985
933
  outline-offset: var(--utrecht-focus-outline-offset, revert);
986
934
  outline-style: var(--utrecht-focus-outline-style, revert);
987
935
  outline-width: var(--utrecht-focus-outline-width, revert);
936
+ z-index: 1;
988
937
  }
989
938
  .utrecht-button-link--html-a:hover {
990
939
  background-color: var(--_utrecht-button-hover-background-color);
@@ -1338,6 +1287,7 @@
1338
1287
  outline-offset: var(--utrecht-focus-outline-offset, revert);
1339
1288
  outline-style: var(--utrecht-focus-outline-style, revert);
1340
1289
  outline-width: var(--utrecht-focus-outline-width, revert);
1290
+ z-index: 1;
1341
1291
  }
1342
1292
 
1343
1293
  .utrecht-button--focus:not(.utrecht-button--disabled) {
@@ -1355,6 +1305,7 @@
1355
1305
  outline-offset: var(--utrecht-focus-outline-offset, revert);
1356
1306
  outline-style: var(--utrecht-focus-outline-style, revert);
1357
1307
  outline-width: var(--utrecht-focus-outline-width, revert);
1308
+ z-index: 1;
1358
1309
  }
1359
1310
 
1360
1311
  .utrecht-button:focus:not(:disabled, [aria-disabled=true], .utrecht-button--disabled) {
@@ -1839,6 +1790,7 @@
1839
1790
  outline-offset: var(--utrecht-focus-outline-offset, revert);
1840
1791
  outline-style: var(--utrecht-focus-outline-style, revert);
1841
1792
  outline-width: var(--utrecht-focus-outline-width, revert);
1793
+ z-index: 1;
1842
1794
  }
1843
1795
 
1844
1796
  .utrecht-checkbox--html-input:disabled {
@@ -1852,6 +1804,7 @@
1852
1804
  outline-offset: var(--utrecht-focus-outline-offset, revert);
1853
1805
  outline-style: var(--utrecht-focus-outline-style, revert);
1854
1806
  outline-width: var(--utrecht-focus-outline-width, revert);
1807
+ z-index: 1;
1855
1808
  }
1856
1809
  .utrecht-code-block {
1857
1810
  background-color: var(--utrecht-code-background-color);
@@ -1944,7 +1897,7 @@
1944
1897
  left: 0;
1945
1898
  overflow: auto;
1946
1899
  position: absolute;
1947
- z-index: var(--utrecht-combobox-popover-z-index);
1900
+ z-index: var(--utrecht-combobox-popover-z-index, 1);
1948
1901
  }
1949
1902
 
1950
1903
  .utrecht-combobox__popover--block-end {
@@ -2022,7 +1975,6 @@
2022
1975
  .utrecht-checkbox--custom.utrecht-checkbox--active,
2023
1976
  .utrecht-custom-checkbox--active {
2024
1977
  background-color: var(--utrecht-checkbox-active-background-color, var(--utrecht-checkbox-background-color));
2025
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
2026
1978
  border-color: var(--utrecht-checkbox-active-border-color, var(--utrecht-checkbox-border-color));
2027
1979
  border-width: var(--utrecht-checkbox-active-border-width, var(--utrecht-checkbox-border-width));
2028
1980
  color: var(--utrecht-checkbox-active-color, var(--utrecht-checkbox-color));
@@ -2038,7 +1990,6 @@
2038
1990
  .utrecht-checkbox--custom.utrecht-checkbox--focus,
2039
1991
  .utrecht-custom-checkbox--focus {
2040
1992
  background-color: var(--utrecht-checkbox-focus-background-color, var(--utrecht-checkbox-background-color));
2041
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
2042
1993
  border-color: var(--utrecht-checkbox-focus-border-color, var(--utrecht-checkbox-border-color));
2043
1994
  border-width: var(--utrecht-checkbox-focus-border-width, var(--utrecht-checkbox-border-width));
2044
1995
  }
@@ -2052,6 +2003,7 @@
2052
2003
  outline-offset: var(--utrecht-focus-outline-offset, revert);
2053
2004
  outline-style: var(--utrecht-focus-outline-style, revert);
2054
2005
  outline-width: var(--utrecht-focus-outline-width, revert);
2006
+ z-index: 1;
2055
2007
  }
2056
2008
 
2057
2009
  .utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled,
@@ -2078,7 +2030,6 @@
2078
2030
  .utrecht-checkbox--custom.utrecht-checkbox--html-input:focus,
2079
2031
  .utrecht-custom-checkbox--html-input:focus {
2080
2032
  background-color: var(--utrecht-checkbox-focus-background-color, var(--utrecht-checkbox-background-color));
2081
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
2082
2033
  border-color: var(--utrecht-checkbox-focus-border-color, var(--utrecht-checkbox-border-color));
2083
2034
  border-width: var(--utrecht-checkbox-focus-border-width, var(--utrecht-checkbox-border-width));
2084
2035
  }
@@ -2091,6 +2042,7 @@
2091
2042
  outline-offset: var(--utrecht-focus-outline-offset, revert);
2092
2043
  outline-style: var(--utrecht-focus-outline-style, revert);
2093
2044
  outline-width: var(--utrecht-focus-outline-width, revert);
2045
+ z-index: 1;
2094
2046
  }
2095
2047
  .utrecht-checkbox--custom.utrecht-checkbox--html-input:invalid, .utrecht-checkbox--custom.utrecht-checkbox--html-input[aria-invalid=true],
2096
2048
  .utrecht-custom-checkbox--html-input:invalid,
@@ -2101,7 +2053,6 @@
2101
2053
  .utrecht-checkbox--custom.utrecht-checkbox--html-input:active,
2102
2054
  .utrecht-custom-checkbox--html-input:active {
2103
2055
  background-color: var(--utrecht-checkbox-active-background-color, var(--utrecht-checkbox-background-color));
2104
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
2105
2056
  border-color: var(--utrecht-checkbox-active-border-color, var(--utrecht-checkbox-border-color));
2106
2057
  border-width: var(--utrecht-checkbox-active-border-width, var(--utrecht-checkbox-border-width));
2107
2058
  color: var(--utrecht-checkbox-active-color, var(--utrecht-checkbox-color));
@@ -2122,6 +2073,27 @@
2122
2073
  border-width: var(--utrecht-checkbox-indeterminate-border-width, var(--utrecht-checkbox-border-width));
2123
2074
  color: var(--utrecht-checkbox-indeterminate-color, var(--utrecht-checkbox-color));
2124
2075
  }
2076
+ .utrecht-badge-data,
2077
+ .utrecht-data-badge {
2078
+ background-color: var(--utrecht-data-badge-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
2079
+ border-radius: var(--utrecht-data-badge-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
2080
+ border-width: var(--utrecht-data-badge-border-width, 0);
2081
+ color: var(--utrecht-data-badge-color, var(--utrecht-badge-color, hsl(0, 0%, 100%)));
2082
+ display: inline-block;
2083
+ font-family: var(--utrecht-data-badge-font-family, var(--utrecht-document-font-family, sans-serif));
2084
+ font-size: var(--utrecht-data-badge-font-size, var(--utrecht-badge-font-size, inherit));
2085
+ font-weight: var(--utrecht-data-badge-font-weight, var(--utrecht-badge-font-weight, bold));
2086
+ line-height: var(--utrecht-data-badge-line-height, var(--utrecht-badge-line-height, 1em));
2087
+ max-height: max-content;
2088
+ max-width: max-content;
2089
+ min-height: var(--utrecht-data-badge-min-block-size, 1em);
2090
+ min-width: var(--utrecht-data-badge-min-inline-size, 1em);
2091
+ padding-bottom: var(--utrecht-data-badge-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
2092
+ padding-top: var(--utrecht-data-badge-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
2093
+ padding-right: var(--utrecht-data-badge-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
2094
+ padding-left: var(--utrecht-data-badge-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
2095
+ text-decoration: none;
2096
+ }
2125
2097
  .utrecht-data-list {
2126
2098
  display: block;
2127
2099
  margin-bottom: calc(var(--utrecht-space-around, 0) * var(--utrecht-data-list-margin-block-end, 0));
@@ -2605,6 +2577,7 @@
2605
2577
  outline-offset: var(--utrecht-focus-outline-offset, revert);
2606
2578
  outline-style: var(--utrecht-focus-outline-style, revert);
2607
2579
  outline-width: var(--utrecht-focus-outline-width, revert);
2580
+ z-index: 1;
2608
2581
  }
2609
2582
 
2610
2583
  .utrecht-form-toggle--hover {
@@ -2673,6 +2646,7 @@
2673
2646
  outline-offset: var(--utrecht-focus-outline-offset, revert);
2674
2647
  outline-style: var(--utrecht-focus-outline-style, revert);
2675
2648
  outline-width: var(--utrecht-focus-outline-width, revert);
2649
+ z-index: 1;
2676
2650
  }
2677
2651
 
2678
2652
  .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox {
@@ -2696,6 +2670,7 @@
2696
2670
  outline-offset: var(--utrecht-focus-outline-offset, revert);
2697
2671
  outline-style: var(--utrecht-focus-outline-style, revert);
2698
2672
  outline-width: var(--utrecht-focus-outline-width, revert);
2673
+ z-index: 1;
2699
2674
  }
2700
2675
  .utrecht-form {
2701
2676
  display: block;
@@ -2826,8 +2801,10 @@
2826
2801
  pointer-events: none;
2827
2802
  width: 100%;
2828
2803
  }
2829
- .utrecht-img {
2804
+ .utrecht-img:not(img[height]) {
2830
2805
  height: auto;
2806
+ }
2807
+ .utrecht-img:not(img[width]) {
2831
2808
  width: auto;
2832
2809
  }
2833
2810
 
@@ -2868,6 +2845,7 @@
2868
2845
  text-underline-offset: var(--utrecht-link-text-underline-offset);
2869
2846
  --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
2870
2847
  align-items: center;
2848
+ border-radius: var(--utrecht-button-border-radius, 0);
2871
2849
  cursor: pointer;
2872
2850
  display: inline-flex;
2873
2851
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
@@ -2920,6 +2898,7 @@
2920
2898
  outline-offset: var(--utrecht-focus-outline-offset, revert);
2921
2899
  outline-style: var(--utrecht-focus-outline-style, revert);
2922
2900
  outline-width: var(--utrecht-focus-outline-width, revert);
2901
+ z-index: 1;
2923
2902
  --_utrecht-link-state-text-decoration: var(
2924
2903
  --utrecht-link-focus-visible-text-decoration,
2925
2904
  var(--utrecht-link-focus-text-decoration)
@@ -3020,6 +2999,7 @@
3020
2999
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3021
3000
  outline-style: var(--utrecht-focus-outline-style, revert);
3022
3001
  outline-width: var(--utrecht-focus-outline-width, revert);
3002
+ z-index: 1;
3023
3003
  }
3024
3004
 
3025
3005
  .utrecht-link-social--distanced {
@@ -3067,6 +3047,7 @@
3067
3047
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3068
3048
  outline-style: var(--utrecht-focus-outline-style, revert);
3069
3049
  outline-width: var(--utrecht-focus-outline-width, revert);
3050
+ z-index: 1;
3070
3051
  --_utrecht-link-state-text-decoration: var(
3071
3052
  --utrecht-link-focus-visible-text-decoration,
3072
3053
  var(--utrecht-link-focus-text-decoration)
@@ -3086,6 +3067,7 @@
3086
3067
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3087
3068
  outline-style: var(--utrecht-focus-outline-style, revert);
3088
3069
  outline-width: var(--utrecht-focus-outline-width, revert);
3070
+ z-index: 1;
3089
3071
  --_utrecht-link-state-text-decoration: var(
3090
3072
  --utrecht-link-focus-visible-text-decoration,
3091
3073
  var(--utrecht-link-focus-text-decoration)
@@ -3162,18 +3144,20 @@
3162
3144
  }
3163
3145
  .utrecht-listbox {
3164
3146
  --utrecht-listbox-max-block-size: 300px;
3165
- background-color: var(--utrecht-listbox-background-color);
3166
- border-color: var(--utrecht-listbox-border-color);
3147
+ background-color: var(--_utrecht-listbox-disabled-background-color, var(--_utrecht-listbox-interactive-background-color, var(--utrecht-listbox-background-color)));
3148
+ border-color: var(--_utrecht-listbox-disabled-border-color, var(--_utrecht-listbox-interactive-border-color, var(--utrecht-listbox-border-color)));
3167
3149
  border-radius: var(--utrecht-listbox-border-radius);
3168
3150
  border-style: solid;
3169
3151
  border-width: var(--utrecht-listbox-border-width);
3170
3152
  box-sizing: border-box;
3153
+ color: var(--_utrecht-listbox-disabled-color, var(--_utrecht-listbox-interactive-color, var(--utrecht-listbox-color)));
3171
3154
  cursor: default;
3172
3155
  display: flex;
3173
3156
  flex-direction: column;
3174
3157
  font-weight: var(--utrecht-listbox-font-weight, var(--utrecht-form-control-font-weight, initial));
3175
3158
  width: var(--utrecht-listbox-inline-size, var(--utrecht-form-control-max-inline-size));
3176
3159
  max-height: var(--utrecht-listbox-max-block-size);
3160
+ max-width: 100%;
3177
3161
  min-height: 1em;
3178
3162
  overflow-block: auto;
3179
3163
  overflow-y: auto;
@@ -3186,6 +3170,7 @@
3186
3170
  }
3187
3171
 
3188
3172
  .utrecht-listbox--focus {
3173
+ --_utrecht-listbox-interactive-border-color: var(--utrecht-listbox-focus-border-color);
3189
3174
  }
3190
3175
 
3191
3176
  .utrecht-listbox--focus-visible {
@@ -3196,14 +3181,12 @@
3196
3181
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3197
3182
  outline-style: var(--utrecht-focus-outline-style, revert);
3198
3183
  outline-width: var(--utrecht-focus-outline-width, revert);
3184
+ z-index: 1;
3199
3185
  }
3200
3186
 
3201
3187
  .utrecht-listbox--invalid {
3202
3188
  }
3203
3189
 
3204
- .utrecht-listbox--read-only {
3205
- }
3206
-
3207
3190
  .utrecht-listbox__list {
3208
3191
  margin-bottom: 0;
3209
3192
  margin-top: 0;
@@ -3231,11 +3214,24 @@
3231
3214
 
3232
3215
  .utrecht-listbox__option {
3233
3216
  list-style: none;
3234
- --utrecht-icon-size: var(--utrecht-listbox-option-icon-size, 16px);
3217
+ --_utrecht-listbox-option-background-color: var(
3218
+ --_utrecht-listbox-option-disabled-background-color,
3219
+ var(
3220
+ --_utrecht-listbox-option-interactive-background-color,
3221
+ var(--_utrecht-listbox-option-state-background-color, var(--utrecht-listbox-option-background-color))
3222
+ )
3223
+ );
3224
+ --_utrecht-listbox-option-color: var(
3225
+ --_utrecht-listbox-option-disabled-color,
3226
+ var(
3227
+ --_utrecht-listbox-option-interactive-color,
3228
+ var(--_utrecht-listbox-option-state-color, var(--utrecht-listbox-option-color))
3229
+ )
3230
+ );
3235
3231
  align-items: center;
3236
- background-color: var(--utrecht-listbox-option-background-color);
3232
+ background-color: var(--_utrecht-listbox-option-background-color);
3237
3233
  box-sizing: border-box;
3238
- color: var(--utrecht-listbox-option-color);
3234
+ color: var(--_utrecht-listbox-option-color);
3239
3235
  display: flex;
3240
3236
  min-height: var(--utrecht-listbox-option-min-block-size, var(--utrecht-pointer-target-min-size, 24px));
3241
3237
  padding-bottom: var(--utrecht-listbox-option-padding-block-end);
@@ -3244,19 +3240,14 @@
3244
3240
  padding-left: var(--utrecht-listbox-option-padding-inline-start);
3245
3241
  }
3246
3242
 
3247
- .utrecht-listbox__option--disabled {
3248
- background-color: var(--utrecht-listbox-option-disabled-background-color);
3249
- color: var(--utrecht-listbox-option-disabled-color);
3250
- }
3251
-
3252
3243
  .utrecht-listbox__option--hover {
3253
- background-color: var(--utrecht-listbox-option-hover-background-color, var(--utrecht-listbox-option-color));
3254
- color: var(--utrecht-listbox-option-hover-color, var(--utrecht-listbox-option-color));
3244
+ --_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-hover-background-color);
3245
+ --_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-hover-color);
3255
3246
  }
3256
3247
 
3257
3248
  .utrecht-listbox__option--focus {
3258
- background-color: var(--utrecht-listbox-option-focus-background-color, var(--utrecht-listbox-option-color));
3259
- color: var(--utrecht-listbox-option-focus-color, var(--utrecht-listbox-option-color));
3249
+ --_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-focus-background-color);
3250
+ --_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-focus-color);
3260
3251
  }
3261
3252
 
3262
3253
  .utrecht-listbox__option--focus-visible {
@@ -3267,37 +3258,55 @@
3267
3258
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3268
3259
  outline-style: var(--utrecht-focus-outline-style, revert);
3269
3260
  outline-width: var(--utrecht-focus-outline-width, revert);
3261
+ z-index: 1;
3270
3262
  --utrecht-focus-outline-offset: calc(var(--utrecht-focus-outline-width) * -1);
3271
3263
  }
3272
3264
 
3273
3265
  .utrecht-listbox__option--active {
3274
- background-color: var(--utrecht-listbox-option-is-active-background-color);
3275
- color: var(--utrecht-listbox-option-is-active-color);
3266
+ --_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-active-background-color);
3267
+ --_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-active-color);
3276
3268
  font-weight: var(--utrecht-listbox-option-is-active-font-weight);
3277
3269
  }
3278
3270
 
3279
3271
  .utrecht-listbox__option--selected {
3280
- background-color: var(--utrecht-listbox-option-selected-background-color);
3281
- color: var(--utrecht-listbox-option-selected-color);
3272
+ --_utrecht-listbox-option-disabled-background-color: var(--utrecht-listbox-option-selected-disabled-background-color);
3273
+ --_utrecht-listbox-option-disabled-color: var(--utrecht-listbox-option-selected-disabled-color);
3274
+ --_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-selected-hover-background-color);
3275
+ --_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-selected-hover-color);
3276
+ --_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-selected-background-color);
3277
+ --_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-selected-color);
3282
3278
  }
3283
3279
 
3284
3280
  .utrecht-listbox__option--html-li {
3285
3281
  list-style: none;
3286
3282
  }
3287
3283
  .utrecht-listbox__option--html-li:hover {
3288
- background-color: var(--utrecht-listbox-option-hover-background-color, var(--utrecht-listbox-option-color));
3289
- color: var(--utrecht-listbox-option-hover-color, var(--utrecht-listbox-option-color));
3284
+ --_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-hover-background-color);
3285
+ --_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-hover-color);
3290
3286
  }
3291
3287
  .utrecht-listbox__option--html-li:focus {
3292
- background-color: var(--utrecht-listbox-option-focus-background-color, var(--utrecht-listbox-option-color));
3293
- color: var(--utrecht-listbox-option-focus-color, var(--utrecht-listbox-option-color));
3288
+ --_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-focus-background-color);
3289
+ --_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-focus-color);
3290
+ }
3291
+ .utrecht-listbox__option--disabled {
3292
+ --utrecht-listbox-option-hover-background-color: var(--utrecht-listbox-option-disabled-background-color);
3293
+ --utrecht-listbox-option-hover-color: var(--utrecht-listbox-option-disabled-color);
3294
+ --_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-disabled-background-color);
3295
+ --_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-disabled-color);
3296
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
3294
3297
  }
3295
3298
 
3296
3299
  .utrecht-listbox--disabled {
3300
+ --_utrecht-listbox-option-disabled-background-color: var(--utrecht-listbox-option-disabled-background-color);
3301
+ --_utrecht-listbox-option-disabled-color: var(--utrecht-listbox-option-disabled-color);
3302
+ --_utrecht-listbox-disabled-background-color: var(--utrecht-listbox-disabled-background-color);
3303
+ --_utrecht-listbox-disabled-border-color: var(--utrecht-listbox-disabled-border-color);
3304
+ --_utrecht-listbox-disabled-color: var(--utrecht-listbox-disabled-color);
3297
3305
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
3298
3306
  }
3299
3307
 
3300
3308
  .utrecht-listbox--html-div:focus {
3309
+ --_utrecht-listbox-interactive-border-color: var(--utrecht-listbox-focus-border-color);
3301
3310
  }
3302
3311
  .utrecht-listbox--html-div[prince-xml-ignore-pseudo-class-focus-visible] {
3303
3312
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
@@ -3307,6 +3316,31 @@
3307
3316
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3308
3317
  outline-style: var(--utrecht-focus-outline-style, revert);
3309
3318
  outline-width: var(--utrecht-focus-outline-width, revert);
3319
+ z-index: 1;
3320
+ }
3321
+
3322
+ .utrecht-listbox--forced-colors {
3323
+ --utrecht-listbox-background-color: field;
3324
+ --utrecht-listbox-border-color: fieldtext;
3325
+ --utrecht-listbox-hover-background-color: field;
3326
+ --utrecht-listbox-hover-border-color: fieldtext;
3327
+ --utrecht-listbox-hover-color: fieldtext;
3328
+ --utrecht-listbox-focus-border-color: Highlight;
3329
+ --utrecht-listbox-disabled-border-color: GrayText;
3330
+ --utrecht-listbox-option-background-color: field;
3331
+ --utrecht-listbox-option-color: fieldtext;
3332
+ --utrecht-listbox-option-hover-background-color: Highlight;
3333
+ --utrecht-listbox-option-hover-color: HighlightText;
3334
+ --utrecht-listbox-option-active-background-color: Highlight;
3335
+ --utrecht-listbox-option-active-color: HighlightText;
3336
+ --utrecht-listbox-option-disabled-background-color: field;
3337
+ --utrecht-listbox-option-disabled-color: GrayText;
3338
+ --utrecht-listbox-option-selected-background-color: Highlight;
3339
+ --utrecht-listbox-option-selected-color: HighlightText;
3340
+ --utrecht-listbox-option-selected-hover-background-color: Highlight;
3341
+ --utrecht-listbox-option-selected-hover-color: HighlightText;
3342
+ --utrecht-listbox-option-selected-disabled-background-color: GrayText;
3343
+ --utrecht-listbox-option-selected-disabled-color: field;
3310
3344
  }
3311
3345
  .utrecht-logo-button {
3312
3346
  --utrecht-icon-size: var(--utrecht-logo-button-icon, 50px);
@@ -3365,59 +3399,6 @@
3365
3399
  width: var(--utrecht-map-marker-size);
3366
3400
  justify-content: center;
3367
3401
  }
3368
- .utrecht-mapcontrolbutton {
3369
- --utrecht-icon-size: var(--utrecht-mapcontrolbutton-min-block-size);
3370
- --utrecht-icon-color: var(--utrecht-mapcontrolbutton-color);
3371
- align-items: center;
3372
- background-color: var(--utrecht-mapcontrolbutton-background-color);
3373
- border-color: var(--utrecht-mapcontrolbutton-border-color);
3374
- border-radius: var(--utrecht-mapcontrolbutton-border-radius);
3375
- border-style: var(--utrecht-mapcontrolbutton-border-style);
3376
- border-width: var(--utrecht-mapcontrolbutton-border-width);
3377
- color: var(--utrecht-mapcontrolbutton-color);
3378
- display: flex;
3379
- flex-direction: row;
3380
- justify-content: center;
3381
- min-height: var(--utrecht-mapcontrolbutton-min-block-size);
3382
- min-width: var(--utrecht-mapcontrolbutton-min-inline-size);
3383
- padding-bottom: 0;
3384
- padding-top: 0;
3385
- padding-right: 0;
3386
- padding-left: 0;
3387
- }
3388
-
3389
- .utrecht-mapcontrolbutton:disabled,
3390
- .utrecht-mapcontrolbutton--disabled {
3391
- --utrecht-icon-color: var(--utrecht-mapcontrolbutton-disabled-color, var(--utrecht-mapcontrolbutton-color));
3392
- background-color: var(--utrecht-mapcontrolbutton-disabled-background-color);
3393
- border-color: var(--utrecht-mapcontrolbutton-disabled-border-color);
3394
- color: var(--utrecht-mapcontrolbutton-disabled-color);
3395
- }
3396
-
3397
- .utrecht-mapcontrolbutton--focus-visible, .utrecht-mapcontrolbutton[prince-xml-ignore-pseudo-class-focus-visible] {
3398
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3399
- var(--utrecht-focus-inverse-outline-color, transparent);
3400
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
3401
- outline-color: var(--utrecht-focus-outline-color, revert);
3402
- outline-offset: var(--utrecht-focus-outline-offset, revert);
3403
- outline-style: var(--utrecht-focus-outline-style, revert);
3404
- outline-width: var(--utrecht-focus-outline-width, revert);
3405
- }
3406
-
3407
- .utrecht-mapcontrolbutton--focus, .utrecht-mapcontrolbutton:focus:not(:disabled, [aria-disabled=true], .utrecht-mapcontrolbutton--disabled) {
3408
- --utrecht-icon-color: var(--utrecht-mapcontrolbutton-focus-color, var(--utrecht-mapcontrolbutton-color));
3409
- }
3410
- .utrecht-mapcontrolbutton--hover:not(:disabled),
3411
- .utrecht-mapcontrolbutton:hover:not(:disabled, .utrecht-mapcontrolbutton--disabled) {
3412
- background-color: var(--utrecht-mapcontrolbutton-hover-background-color);
3413
- color: var(--utrecht-mapcontrolbutton-color);
3414
- }
3415
-
3416
- .utrecht-mapcontrolbutton__label {
3417
- display: block;
3418
- padding-right: var(--utrecht-mapcontrolbutton-label-margin-inline-end);
3419
- padding-left: var(--utrecht-mapcontrolbutton-label-margin-inline-start);
3420
- }
3421
3402
  .utrecht-mark {
3422
3403
  background-color: var(--utrecht-mark-background-color, revert);
3423
3404
  color: var(--utrecht-mark-color, revert);
@@ -3444,45 +3425,6 @@
3444
3425
  background-color: Highlight;
3445
3426
  color: HighlightText;
3446
3427
  }
3447
- .utrecht-menulijst {
3448
- border-bottom: var(--utrecht-border-width-md) solid var(--utrecht-color-grey-90);
3449
- border-top: var(--utrecht-border-width-md) solid var(--utrecht-color-grey-90);
3450
- font-family: var(--utrecht-document-font-family);
3451
- padding-bottom: var(--utrecht-space-block-sm);
3452
- padding-top: var(--utrecht-space-block-sm);
3453
- padding-left: 0;
3454
- }
3455
-
3456
- .utrecht-menulijst__item {
3457
- list-style: none;
3458
- margin-bottom: var(--utrecht-space-block-sm);
3459
- margin-top: var(--utrecht-space-block-sm);
3460
- }
3461
-
3462
- .utrecht-menulijst__item a {
3463
- background-image: var(--utrecht-menulijst-item-background-image, none);
3464
- background-position: 0 0.25em;
3465
- background-repeat: no-repeat;
3466
- color: var(--utrecht-menulijst-item-color, var(--utrecht-link-color, blue));
3467
- display: block;
3468
- font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
3469
- padding-left: var(--utrecht-space-block-md);
3470
- text-decoration: none;
3471
- }
3472
-
3473
- .utrecht-menulijst__item a:hover {
3474
- color: var(--utrecht-menulijst-item-hover-color, var(--utrecht-link-hover-color, red));
3475
- }
3476
-
3477
- .utrecht-menulijst__link--focus-visible, .utrecht-menulijst__link[prince-xml-ignore-pseudo-class-focus-visible] {
3478
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3479
- var(--utrecht-focus-inverse-outline-color, transparent);
3480
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
3481
- outline-color: var(--utrecht-focus-outline-color, revert);
3482
- outline-offset: var(--utrecht-focus-outline-offset, revert);
3483
- outline-style: var(--utrecht-focus-outline-style, revert);
3484
- outline-width: var(--utrecht-focus-outline-width, revert);
3485
- }
3486
3428
  .utrecht-multiline-data {
3487
3429
  white-space: pre-line;
3488
3430
  }
@@ -3495,17 +3437,20 @@
3495
3437
  .utrecht-nav-bar {
3496
3438
  background-color: var(--utrecht-nav-bar-background-color);
3497
3439
  color: var(--utrecht-nav-bar-color);
3498
- display: flex;
3499
- justify-content: center;
3440
+ display: grid;
3441
+ width: 100%;
3500
3442
  }
3501
3443
 
3502
3444
  .utrecht-nav-bar__content {
3503
3445
  align-items: stretch;
3446
+ background-color: var(--utrecht-nav-bar-content-background-color);
3447
+ color: var(--utrecht-nav-bar-content-color);
3504
3448
  display: flex;
3505
3449
  flex-direction: row;
3506
3450
  flex-wrap: wrap;
3507
3451
  width: 100%;
3508
3452
  justify-content: space-between;
3453
+ justify-self: center;
3509
3454
  max-width: var(--utrecht-nav-bar-content-max-inline-size);
3510
3455
  }
3511
3456
  .utrecht-nav-list {
@@ -3540,226 +3485,6 @@
3540
3485
  padding-left: var(--utrecht-nav-bar-link-padding-inline-start);
3541
3486
  text-decoration: none;
3542
3487
  }
3543
- .utrecht-sidenav {
3544
- --utrecht-sidenav-connection-color: var(--utrecht-sidenav-item-marker-color);
3545
- --utrecht-sidenav-connection-inline-size: 2px;
3546
- --utrecht-sidenav-marker-current-color: var(--utrecht-sidenav-link-hover-color);
3547
- --utrecht-sidenav-marker-offset: 26px;
3548
- --utrecht-sidenav-connection-block-size: 100%;
3549
- --utrecht-sidenav-marker-height: 8px;
3550
- --utrecht-sidenav-marker-outline-width: 2px;
3551
- border-bottom: 1px solid var(--utrecht-color-grey-80);
3552
- border-top: 1px solid var(--utrecht-color-grey-80);
3553
- width: 19rem;
3554
- margin-bottom: 0;
3555
- margin-top: 0;
3556
- padding-bottom: 0;
3557
- padding-top: 0;
3558
- }
3559
-
3560
- .utrecht-sidenav__list {
3561
- margin-bottom: 0;
3562
- margin-top: 0.2rem;
3563
- padding-bottom: 0;
3564
- padding-top: 0;
3565
- padding-left: 0;
3566
- }
3567
-
3568
- .utrecht-sidenav__list--child {
3569
- margin-top: 0;
3570
- padding-right: 0;
3571
- padding-left: 1.4rem;
3572
- }
3573
-
3574
- .utrecht-sidenav__item {
3575
- list-style: none;
3576
- margin-left: 0;
3577
- position: relative;
3578
- }
3579
-
3580
- .utrecht-sidenav__item--current {
3581
- color: var(--utrecht-sidenav-item-hover-color, var(--utrecht-link-hover-color, red));
3582
- }
3583
-
3584
- .utrecht-sidenav__item--last {
3585
- border-bottom: none;
3586
- }
3587
- .utrecht-sidenav__item-separator:not(.utrecht-sidenav__item--last .utrecht-sidenav__item-separator) {
3588
- border-bottom: 1px solid var(--utrecht-color-grey-80);
3589
- display: block;
3590
- margin-left: var(--utrecht-space-inline-lg);
3591
- }
3592
-
3593
- .utrecht-sidenav__link {
3594
- color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
3595
- display: block;
3596
- margin-left: 0;
3597
- padding-bottom: var(--utrecht-space-block-xs);
3598
- padding-top: var(--utrecht-space-block-xs);
3599
- padding-right: var(--utrecht-space-inline-3xs);
3600
- padding-left: var(--utrecht-space-inline-lg);
3601
- text-decoration: none;
3602
- }
3603
-
3604
- .utrecht-sidenav__link:hover {
3605
- color: var(--utrecht-sidenav-link-hover-color, var(--utrecht-link-hover-color, red));
3606
- text-decoration: underline;
3607
- }
3608
-
3609
- .utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link[prince-xml-ignore-pseudo-class-focus-visible] {
3610
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3611
- var(--utrecht-focus-inverse-outline-color, transparent);
3612
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
3613
- outline-color: var(--utrecht-focus-outline-color, revert);
3614
- outline-offset: var(--utrecht-focus-outline-offset, revert);
3615
- outline-style: var(--utrecht-focus-outline-style, revert);
3616
- outline-width: var(--utrecht-focus-outline-width, revert);
3617
- }
3618
- .utrecht-sidenav__link--parent {
3619
- padding-bottom: 0;
3620
- }
3621
- .utrecht-sidenav__connection, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:not(.utrecht-sidenav__link--sibling,
3622
- .utrecht-sidenav__link--parent,
3623
- .utrecht-sidenav__link--child)::after {
3624
- background: var(--utrecht-sidenav-connection-color);
3625
- height: calc(var(--utrecht-sidenav-connection-block-size) - var(--utrecht-sidenav-marker-height) - 2 * var(--utrecht-sidenav-marker-outline-width));
3626
- content: "";
3627
- display: block;
3628
- width: var(--utrecht-sidenav-connection-inline-size);
3629
- bottom: 0;
3630
- top: calc(var(--utrecht-sidenav-marker-offset));
3631
- left: 3px;
3632
- overflow: hidden;
3633
- position: absolute;
3634
- z-index: 5;
3635
- }
3636
-
3637
- .utrecht-sidenav__connection--last,
3638
- .utrecht-sidenav__connection--parent,
3639
- .utrecht-sidenav__connection--sibling {
3640
- display: none;
3641
- }
3642
- .utrecht-sidenav__marker, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before {
3643
- background-color: var(--utrecht-sidenav-item-marker-color);
3644
- height: var(--utrecht-sidenav-marker-height);
3645
- border-radius: 100%;
3646
- content: "";
3647
- width: 8px;
3648
- top: 20px;
3649
- left: var(--utrecht-sidenav-marker-offset);
3650
- overflow: hidden;
3651
- position: absolute;
3652
- transform: translateY(-50%) translateX(calc(-1 * var(--utrecht-sidenav-marker-offset)));
3653
- z-index: 10;
3654
- }
3655
- .utrecht-sidenav__marker--child, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::before {
3656
- background-color: transparent;
3657
- height: 4px;
3658
- border: 2px solid var(--utrecht-sidenav-link-color);
3659
- width: 4px;
3660
- top: 16px;
3661
- left: 1.2rem;
3662
- transform: translateY(-50%) translateX(-19.5px);
3663
- }
3664
- .utrecht-sidenav__marker--current, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current::before,
3665
- .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current-child::before {
3666
- background-color: var(--utrecht-sidenav-marker-current-color);
3667
- }
3668
-
3669
- .utrecht-sidenav__link--child,
3670
- .utrecht-sidenav__link--current-child {
3671
- color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
3672
- margin-bottom: 0;
3673
- margin-top: 0;
3674
- padding-bottom: var(--utrecht-space-block-2xs);
3675
- padding-top: var(--utrecht-space-block-2xs);
3676
- padding-right: var(--utrecht-space-inline-3xs);
3677
- padding-left: var(--utrecht-space-inline-lg);
3678
- text-decoration: none;
3679
- }
3680
-
3681
- .utrecht-sidenav__link--current,
3682
- .utrecht-sidenav__link--current-child {
3683
- font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
3684
- }
3685
- .utrecht-sidenav__marker--hover, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover::before, .utrecht-sidenav__link:hover .utrecht-sidenav__marker, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__link::before {
3686
- background-color: var(--utrecht-sidenav-link-hover-color);
3687
- }
3688
- .utrecht-sidenav__marker--child.utrecht-sidenav__marker--hover, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--child.utrecht-sidenav__link:hover::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--hover.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child.utrecht-sidenav__link:hover::before, .utrecht-sidenav__link:hover .utrecht-sidenav__marker--child.utrecht-sidenav__marker, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__marker.utrecht-sidenav__link--child::before, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--child.utrecht-sidenav__link::before, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__marker--child.utrecht-sidenav__link::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__link.utrecht-sidenav__link--child::before {
3689
- background-color: var(--utrecht-sidenav-link-hover-color);
3690
- border: 2px solid var(--utrecht-sidenav-link-hover-color);
3691
- }
3692
-
3693
- .utrecht-sidenav--pseudo-elements {
3694
- }
3695
- .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::after {
3696
- display: none;
3697
- }
3698
- .utrecht-navhtml {
3699
- font-family: var(--utrecht-document-font-family);
3700
- }
3701
-
3702
- .utrecht-topnav__list {
3703
- background-color: var(--utrecht-topnav-list-background-color);
3704
- display: flex;
3705
- justify-content: space-between;
3706
- list-style: none;
3707
- list-style-image: none;
3708
- margin-bottom: 0;
3709
- margin-top: 0;
3710
- overflow: visible;
3711
- padding-bottom: 0;
3712
- padding-top: 0;
3713
- padding-right: 0;
3714
- padding-left: 0;
3715
- }
3716
-
3717
- .utrecht-topnav__item {
3718
- border-right: 1px solid var(--utrecht-topnav-list-border-color);
3719
- flex: 1 0 auto;
3720
- margin-left: 0;
3721
- text-align: center;
3722
- }
3723
-
3724
- .utrecht-topnav__item li:first-child {
3725
- border-left: 1px solid var(--utrecht-topnav-list-border-color);
3726
- padding-left: 0;
3727
- }
3728
-
3729
- .utrecht-topnav__link {
3730
- color: var(--utrecht-topnav-link-color);
3731
- display: block;
3732
- padding-bottom: 1rem;
3733
- padding-top: 1rem;
3734
- text-decoration: none;
3735
- }
3736
-
3737
- .utrecht-topnav__link--hover,
3738
- .utrecht-topnav__link:hover {
3739
- background-color: var(--utrecht-topnav-link-hover-background-color);
3740
- color: var(--utrecht-topnav-link-color);
3741
- text-decoration: underline;
3742
- }
3743
-
3744
- .utrecht-topnav__link--current {
3745
- background-color: var(--utrecht-topnav-list-background-active);
3746
- text-decoration: underline;
3747
- }
3748
-
3749
- .utrecht-topnav__link--focus, .utrecht-topnav__link:focus {
3750
- background-color: var(--utrecht-topnav-link-focus-background-color, var(--utrecht-topnav-link-background-color));
3751
- color: var(--utrecht-topnav-link-focus-color, var(--utrecht-topnav-link-color));
3752
- }
3753
-
3754
- .utrecht-topnav__link--focus-visible, .utrecht-topnav__link[prince-xml-ignore-pseudo-class-focus-visible] {
3755
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3756
- var(--utrecht-focus-inverse-outline-color, transparent);
3757
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
3758
- outline-color: var(--utrecht-focus-outline-color, revert);
3759
- outline-offset: var(--utrecht-focus-outline-offset, revert);
3760
- outline-style: var(--utrecht-focus-outline-style, revert);
3761
- outline-width: var(--utrecht-focus-outline-width, revert);
3762
- }
3763
3488
  .utrecht-number-badge {
3764
3489
  background-color: var(--utrecht-number-badge-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
3765
3490
  border-color: var(--utrecht-number-badge-border-color, var(--utrecht-badge-border-color));
@@ -3830,6 +3555,27 @@
3830
3555
  margin-top: var(--utrecht-ordered-list-item-margin-block-start, var(--utrecht-unordered-list-item-margin-block-start));
3831
3556
  padding-left: var(--utrecht-ordered-list-item-padding-inline-start, var(--utrecht-unordered-list-item-padding-inline-start, 1ch));
3832
3557
  }
3558
+ .utrecht-page-body {
3559
+ background-color: var(--utrecht-page-body-background-color);
3560
+ box-sizing: border-box;
3561
+ color: var(--utrecht-page-body-color);
3562
+ display: grid;
3563
+ flex-grow: 1;
3564
+ width: 100%;
3565
+ }
3566
+
3567
+ .utrecht-page-body__content {
3568
+ background-color: var(--utrecht-page-body-content-background-color);
3569
+ box-sizing: border-box;
3570
+ color: var(--utrecht-page-body-content-color);
3571
+ width: 100%;
3572
+ justify-self: center;
3573
+ max-width: var(--utrecht-page-body-content-max-inline-size);
3574
+ padding-bottom: var(--utrecht-page-body-content-padding-block-end);
3575
+ padding-top: var(--utrecht-page-body-content-padding-block-start);
3576
+ padding-right: var(--utrecht-page-body-content-padding-inline-end);
3577
+ padding-left: var(--utrecht-page-body-content-padding-inline-start);
3578
+ }
3833
3579
  .utrecht-page-content {
3834
3580
  padding-bottom: var(--utrecht-page-content-padding-block-end);
3835
3581
  padding-top: var(--utrecht-page-content-padding-block-start);
@@ -3854,15 +3600,31 @@
3854
3600
  --utrecht-link-visited-color: currentColor;
3855
3601
  background-color: var(--utrecht-page-footer-background-color);
3856
3602
  background-image: var(--utrecht-page-footer-background-image);
3603
+ box-sizing: border-box;
3857
3604
  color: var(--utrecht-page-footer-color);
3605
+ display: grid;
3858
3606
  font-family: var(--utrecht-document-font-family);
3859
3607
  font-size: var(--utrecht-document-font-size);
3608
+ width: 100%;
3860
3609
  padding-bottom: var(--utrecht-page-footer-padding-block-end);
3861
3610
  padding-top: var(--utrecht-page-footer-padding-block-start);
3862
3611
  padding-right: var(--utrecht-page-footer-padding-inline-end);
3863
3612
  padding-left: var(--utrecht-page-footer-padding-inline-start);
3864
3613
  }
3865
3614
 
3615
+ .utrecht-page-footer__content {
3616
+ background-color: var(--utrecht-page-footer-content-background-color);
3617
+ box-sizing: border-box;
3618
+ color: var(--utrecht-page-footer-content-color);
3619
+ width: 100%;
3620
+ justify-self: center;
3621
+ max-width: var(--utrecht-page-footer-content-max-inline-size);
3622
+ padding-bottom: var(--utrecht-page-footer-content-padding-block-end);
3623
+ padding-top: var(--utrecht-page-footer-content-padding-block-start);
3624
+ padding-left: var(--utrecht-page-footer-content-padding-inline);
3625
+ padding-right: var(--utrecht-page-footer-content-padding-inline);
3626
+ }
3627
+
3866
3628
  .utrecht-page-footer__address--reset-address {
3867
3629
  font-style: inherit;
3868
3630
  margin-bottom: 0;
@@ -3870,8 +3632,14 @@
3870
3632
  }
3871
3633
  .utrecht-page-header {
3872
3634
  background-color: var(--utrecht-page-header-background-color);
3635
+ border-bottom-color: var(--utrecht-page-header-border-block-end-color, currentColor);
3636
+ border-bottom-style: solid;
3637
+ border-bottom-width: var(--utrecht-page-header-border-block-end-width, 0);
3638
+ box-sizing: border-box;
3873
3639
  color: var(--utrecht-page-header-color);
3640
+ display: grid;
3874
3641
  grid-area: "utrecht-header";
3642
+ width: 100%;
3875
3643
  padding-bottom: var(--utrecht-page-header-padding-block-end);
3876
3644
  padding-top: var(--utrecht-page-header-padding-block-start);
3877
3645
  padding-right: var(--utrecht-page-padding-inline-end);
@@ -3879,7 +3647,24 @@
3879
3647
  }
3880
3648
 
3881
3649
  .utrecht-page-header__content {
3882
- max-width: var(--utrecht-page-max-inline-size);
3650
+ background-color: var(--utrecht-page-header-content-background-color);
3651
+ box-sizing: border-box;
3652
+ color: var(--utrecht-page-header-content-color);
3653
+ width: 100%;
3654
+ justify-self: center;
3655
+ max-width: var(--utrecht-page-header-content-max-inline-size);
3656
+ padding-bottom: var(--utrecht-page-header-content-padding-block-end);
3657
+ padding-top: var(--utrecht-page-header-content-padding-block-start);
3658
+ padding-left: var(--utrecht-page-header-content-padding-inline);
3659
+ padding-right: var(--utrecht-page-header-content-padding-inline);
3660
+ }
3661
+ .utrecht-page-layout {
3662
+ align-items: flex-start;
3663
+ height: 100%;
3664
+ display: flex;
3665
+ flex-direction: column;
3666
+ width: 100%;
3667
+ justify-content: flex-start;
3883
3668
  }
3884
3669
  .utrecht-page {
3885
3670
  margin-right: auto;
@@ -3985,6 +3770,7 @@
3985
3770
  outline-offset: var(--utrecht-focus-outline-offset, revert);
3986
3771
  outline-style: var(--utrecht-focus-outline-style, revert);
3987
3772
  outline-width: var(--utrecht-focus-outline-width, revert);
3773
+ z-index: 1;
3988
3774
  }
3989
3775
  .utrecht-paragraph {
3990
3776
  color: var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));
@@ -4132,19 +3918,19 @@
4132
3918
 
4133
3919
  .utrecht-radio-button--focus {
4134
3920
  --_utrecht-radio-button-interactive-background-color: var(
4135
- --utrecht-radio-button-focus-background-color,
3921
+ --_utrecht-radio-button-state-focus-background-color,
4136
3922
  var(--utrecht-radio-button-focus-background-color)
4137
3923
  );
4138
3924
  --_utrecht-radio-button-interactive-border-color: var(
4139
- --utrecht-radio-button-focus-border-color,
3925
+ --_utrecht-radio-button-state-focus-border-color,
4140
3926
  var(--utrecht-radio-button-focus-border-color)
4141
3927
  );
4142
3928
  --_utrecht-radio-button-interactive-border-width: var(
4143
- --utrecht-radio-button-focus-border-width,
3929
+ --_utrecht-radio-button-state-focus-border-width,
4144
3930
  var(--utrecht-radio-button-focus-border-width)
4145
3931
  );
4146
3932
  --_utrecht-radio-button-interactive-color: var(
4147
- --utrecht-radio-button-focus-color,
3933
+ --_utrecht-radio-button-state-focus-color,
4148
3934
  var(--utrecht-radio-button-focus-color)
4149
3935
  );
4150
3936
  }
@@ -4157,6 +3943,7 @@
4157
3943
  outline-offset: var(--utrecht-focus-outline-offset, revert);
4158
3944
  outline-style: var(--utrecht-focus-outline-style, revert);
4159
3945
  outline-width: var(--utrecht-focus-outline-width, revert);
3946
+ z-index: 1;
4160
3947
  }
4161
3948
 
4162
3949
  .utrecht-radio-button--active {
@@ -4269,19 +4056,19 @@
4269
4056
  }
4270
4057
  .utrecht-radio-button--html-input:focus:not([aria-disabled=true], :disabled) {
4271
4058
  --_utrecht-radio-button-interactive-background-color: var(
4272
- --utrecht-radio-button-focus-background-color,
4059
+ --_utrecht-radio-button-state-focus-background-color,
4273
4060
  var(--utrecht-radio-button-focus-background-color)
4274
4061
  );
4275
4062
  --_utrecht-radio-button-interactive-border-color: var(
4276
- --utrecht-radio-button-focus-border-color,
4063
+ --_utrecht-radio-button-state-focus-border-color,
4277
4064
  var(--utrecht-radio-button-focus-border-color)
4278
4065
  );
4279
4066
  --_utrecht-radio-button-interactive-border-width: var(
4280
- --utrecht-radio-button-focus-border-width,
4067
+ --_utrecht-radio-button-state-focus-border-width,
4281
4068
  var(--utrecht-radio-button-focus-border-width)
4282
4069
  );
4283
4070
  --_utrecht-radio-button-interactive-color: var(
4284
- --utrecht-radio-button-focus-color,
4071
+ --_utrecht-radio-button-state-focus-color,
4285
4072
  var(--utrecht-radio-button-focus-color)
4286
4073
  );
4287
4074
  }
@@ -4293,6 +4080,7 @@
4293
4080
  outline-offset: var(--utrecht-focus-outline-offset, revert);
4294
4081
  outline-style: var(--utrecht-focus-outline-style, revert);
4295
4082
  outline-width: var(--utrecht-focus-outline-width, revert);
4083
+ z-index: 1;
4296
4084
  }
4297
4085
  .utrecht-radio-button--html-input:hover:not([aria-disabled=true], :disabled) {
4298
4086
  --_utrecht-radio-button-interactive-background-color: var(
@@ -6088,6 +5876,27 @@
6088
5876
  .utrecht-rich-text .utrecht-unordered-list:has(+ .utrecht-unordered-list) {
6089
5877
  --utrecht-unordered-list-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
6090
5878
  }
5879
+ .utrecht-root {
5880
+ -webkit-font-smoothing: auto !important;
5881
+ -moz-osx-font-smoothing: auto !important;
5882
+ background-color: var(--utrecht-root-background-color);
5883
+ height: 100%;
5884
+ color: var(--utrecht-root-color);
5885
+ font-family: var(--utrecht-root-font-family);
5886
+ -webkit-hyphens: auto;
5887
+ -moz-hyphens: auto;
5888
+ -ms-hyphens: auto;
5889
+ hyphens: auto;
5890
+ width: 100%;
5891
+ overflow-block: auto;
5892
+ overflow-inline: auto;
5893
+ position: relative;
5894
+ text-rendering: optimizeLegibility;
5895
+ -moz-text-size-adjust: none;
5896
+ -webkit-text-size-adjust: none;
5897
+ text-size-adjust: none;
5898
+ word-break: break-word;
5899
+ }
6091
5900
  .utrecht-search-bar {
6092
5901
  --utrecht-button-border-color: var(--utrecht-search-bar-button-border-color);
6093
5902
  --utrecht-button-hover-scale: var(--utrecht-search-bar-hover-scale);
@@ -6187,6 +5996,12 @@
6187
5996
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
6188
5997
  }
6189
5998
 
5999
+ .utrecht-select--hover {
6000
+ background-color: var(--utrecht-select-hover-background-color, var(--utrecht-form-control-hover-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
6001
+ border-color: var(--utrecht-select-hover-border-color, var(--utrecht-form-control-hover-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
6002
+ color: var(--utrecht-select-hover-color, var(--utrecht-form-control-hover-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
6003
+ }
6004
+
6190
6005
  .utrecht-select--focus {
6191
6006
  background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
6192
6007
  border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
@@ -6201,6 +6016,7 @@
6201
6016
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6202
6017
  outline-style: var(--utrecht-focus-outline-style, revert);
6203
6018
  outline-width: var(--utrecht-focus-outline-width, revert);
6019
+ z-index: 1;
6204
6020
  }
6205
6021
 
6206
6022
  .utrecht-select--busy {
@@ -6222,6 +6038,11 @@
6222
6038
  }
6223
6039
  .utrecht-select--html-select {
6224
6040
  }
6041
+ .utrecht-select--html-select:hover {
6042
+ background-color: var(--utrecht-select-hover-background-color, var(--utrecht-form-control-hover-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
6043
+ border-color: var(--utrecht-select-hover-border-color, var(--utrecht-form-control-hover-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
6044
+ color: var(--utrecht-select-hover-color, var(--utrecht-form-control-hover-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
6045
+ }
6225
6046
  .utrecht-select--html-select:focus {
6226
6047
  background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
6227
6048
  border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
@@ -6235,6 +6056,7 @@
6235
6056
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6236
6057
  outline-style: var(--utrecht-focus-outline-style, revert);
6237
6058
  outline-width: var(--utrecht-focus-outline-width, revert);
6059
+ z-index: 1;
6238
6060
  }
6239
6061
  .utrecht-select--html-select:disabled {
6240
6062
  background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
@@ -6312,6 +6134,7 @@
6312
6134
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6313
6135
  outline-style: var(--utrecht-focus-outline-style, revert);
6314
6136
  outline-width: var(--utrecht-focus-outline-width, revert);
6137
+ z-index: 1;
6315
6138
  text-decoration: var(--utrecht-skip-link-focus-visible-text-decoration, var(--utrecht-skip-link-focus-text-decoration));
6316
6139
  }
6317
6140
 
@@ -6324,11 +6147,13 @@
6324
6147
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6325
6148
  outline-style: var(--utrecht-focus-outline-style, revert);
6326
6149
  outline-width: var(--utrecht-focus-outline-width, revert);
6150
+ z-index: 1;
6327
6151
  text-decoration: var(--utrecht-skip-link-focus-visible-text-decoration, var(--utrecht-skip-link-focus-text-decoration));
6328
6152
  }
6329
6153
  .utrecht-spotlight-section {
6330
6154
  background-color: var(--_utrecht-spotlight-section-background-color, var(--utrecht-spotlight-section-background-color));
6331
6155
  border-color: var(--_utrecht-spotlight-section-border-color, var(--utrecht-spotlight-section-border-color));
6156
+ border-radius: var(--utrecht-spotlight-section-border-radius, 0);
6332
6157
  border-style: solid;
6333
6158
  border-width: var(--_utrecht-spotlight-section-border-width, var(--utrecht-spotlight-section-border-width, 0));
6334
6159
  color: var(--_utrecht-spotlight-section-color, var(--utrecht-spotlight-section-color));
@@ -6791,6 +6616,7 @@
6791
6616
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6792
6617
  outline-style: var(--utrecht-focus-outline-style, revert);
6793
6618
  outline-width: var(--utrecht-focus-outline-width, revert);
6619
+ z-index: 1;
6794
6620
  }
6795
6621
 
6796
6622
  .utrecht-textarea--read-only {
@@ -6820,6 +6646,7 @@
6820
6646
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6821
6647
  outline-style: var(--utrecht-focus-outline-style, revert);
6822
6648
  outline-width: var(--utrecht-focus-outline-width, revert);
6649
+ z-index: 1;
6823
6650
  }
6824
6651
  .utrecht-textarea--html-textarea:invalid, .utrecht-textarea--html-textarea[aria-invalid=true] {
6825
6652
  --_utrecht-textarea-border-width: var(
@@ -6928,6 +6755,7 @@
6928
6755
  outline-offset: var(--utrecht-focus-outline-offset, revert);
6929
6756
  outline-style: var(--utrecht-focus-outline-style, revert);
6930
6757
  outline-width: var(--utrecht-focus-outline-width, revert);
6758
+ z-index: 1;
6931
6759
  }
6932
6760
 
6933
6761
  .utrecht-textbox--read-only {
@@ -7013,6 +6841,7 @@
7013
6841
  outline-offset: var(--utrecht-focus-outline-offset, revert);
7014
6842
  outline-style: var(--utrecht-focus-outline-style, revert);
7015
6843
  outline-width: var(--utrecht-focus-outline-width, revert);
6844
+ z-index: 1;
7016
6845
  }
7017
6846
  .utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true] {
7018
6847
  --_utrecht-textbox-border-width: var(
@@ -7089,6 +6918,7 @@
7089
6918
  outline-offset: var(--utrecht-focus-outline-offset, revert);
7090
6919
  outline-style: var(--utrecht-focus-outline-style, revert);
7091
6920
  outline-width: var(--utrecht-focus-outline-width, revert);
6921
+ z-index: 1;
7092
6922
  }
7093
6923
 
7094
6924
  .utrecht-toptask-link--focus, .utrecht-toptask-link:focus {
@@ -7480,6 +7310,7 @@
7480
7310
  outline-offset: var(--utrecht-focus-outline-offset, revert);
7481
7311
  outline-style: var(--utrecht-focus-outline-style, revert);
7482
7312
  outline-width: var(--utrecht-focus-outline-width, revert);
7313
+ z-index: 1;
7483
7314
  }
7484
7315
  .utrecht-html input[type=checkbox i] {
7485
7316
  margin-bottom: 0;
@@ -7508,6 +7339,7 @@
7508
7339
  outline-offset: var(--utrecht-focus-outline-offset, revert);
7509
7340
  outline-style: var(--utrecht-focus-outline-style, revert);
7510
7341
  outline-width: var(--utrecht-focus-outline-width, revert);
7342
+ z-index: 1;
7511
7343
  }
7512
7344
  .utrecht-html body {
7513
7345
  -webkit-font-smoothing: auto !important;
@@ -7749,6 +7581,7 @@
7749
7581
  outline-offset: var(--utrecht-focus-outline-offset, revert);
7750
7582
  outline-style: var(--utrecht-focus-outline-style, revert);
7751
7583
  outline-width: var(--utrecht-focus-outline-width, revert);
7584
+ z-index: 1;
7752
7585
  --_utrecht-link-state-text-decoration: var(
7753
7586
  --utrecht-link-focus-visible-text-decoration,
7754
7587
  var(--utrecht-link-focus-text-decoration)
@@ -7931,19 +7764,19 @@
7931
7764
  }
7932
7765
  .utrecht-html input[type=radio i]:focus:not([aria-disabled=true], :disabled) {
7933
7766
  --_utrecht-radio-button-interactive-background-color: var(
7934
- --utrecht-radio-button-focus-background-color,
7767
+ --_utrecht-radio-button-state-focus-background-color,
7935
7768
  var(--utrecht-radio-button-focus-background-color)
7936
7769
  );
7937
7770
  --_utrecht-radio-button-interactive-border-color: var(
7938
- --utrecht-radio-button-focus-border-color,
7771
+ --_utrecht-radio-button-state-focus-border-color,
7939
7772
  var(--utrecht-radio-button-focus-border-color)
7940
7773
  );
7941
7774
  --_utrecht-radio-button-interactive-border-width: var(
7942
- --utrecht-radio-button-focus-border-width,
7775
+ --_utrecht-radio-button-state-focus-border-width,
7943
7776
  var(--utrecht-radio-button-focus-border-width)
7944
7777
  );
7945
7778
  --_utrecht-radio-button-interactive-color: var(
7946
- --utrecht-radio-button-focus-color,
7779
+ --_utrecht-radio-button-state-focus-color,
7947
7780
  var(--utrecht-radio-button-focus-color)
7948
7781
  );
7949
7782
  }
@@ -7955,6 +7788,7 @@
7955
7788
  outline-offset: var(--utrecht-focus-outline-offset, revert);
7956
7789
  outline-style: var(--utrecht-focus-outline-style, revert);
7957
7790
  outline-width: var(--utrecht-focus-outline-width, revert);
7791
+ z-index: 1;
7958
7792
  }
7959
7793
  .utrecht-html input[type=radio i]:hover:not([aria-disabled=true], :disabled) {
7960
7794
  --_utrecht-radio-button-interactive-background-color: var(
@@ -8020,6 +7854,11 @@
8020
7854
  -prince-pdf-form: enable;
8021
7855
  }
8022
7856
  }
7857
+ .utrecht-html select:hover {
7858
+ background-color: var(--utrecht-select-hover-background-color, var(--utrecht-form-control-hover-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
7859
+ border-color: var(--utrecht-select-hover-border-color, var(--utrecht-form-control-hover-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
7860
+ color: var(--utrecht-select-hover-color, var(--utrecht-form-control-hover-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
7861
+ }
8023
7862
  .utrecht-html select:focus {
8024
7863
  background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
8025
7864
  border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
@@ -8033,6 +7872,7 @@
8033
7872
  outline-offset: var(--utrecht-focus-outline-offset, revert);
8034
7873
  outline-style: var(--utrecht-focus-outline-style, revert);
8035
7874
  outline-width: var(--utrecht-focus-outline-width, revert);
7875
+ z-index: 1;
8036
7876
  }
8037
7877
  .utrecht-html select:disabled {
8038
7878
  background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
@@ -8217,6 +8057,7 @@
8217
8057
  outline-offset: var(--utrecht-focus-outline-offset, revert);
8218
8058
  outline-style: var(--utrecht-focus-outline-style, revert);
8219
8059
  outline-width: var(--utrecht-focus-outline-width, revert);
8060
+ z-index: 1;
8220
8061
  }
8221
8062
  .utrecht-html textarea:invalid, .utrecht-html textarea[aria-invalid=true] {
8222
8063
  --_utrecht-textarea-border-width: var(
@@ -8349,6 +8190,7 @@
8349
8190
  outline-offset: var(--utrecht-focus-outline-offset, revert);
8350
8191
  outline-style: var(--utrecht-focus-outline-style, revert);
8351
8192
  outline-width: var(--utrecht-focus-outline-width, revert);
8193
+ z-index: 1;
8352
8194
  }
8353
8195
  .utrecht-html input:not([type]):invalid, .utrecht-html input:not([type])[aria-invalid=true],
8354
8196
  .utrecht-html input[type=date i]:invalid,