@utrecht/component-library-css 9.0.10 → 9.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -96,10 +96,10 @@
96
96
  }
97
97
 
98
98
  .utrecht-accordion__panel {
99
- border-top: none;
100
99
  border-color: var(--utrecht-accordion-panel-border-color);
101
100
  border-style: solid;
102
101
  border-width: var(--utrecht-accordion-panel-border-width);
102
+ border-top: none;
103
103
  padding-bottom: var(--utrecht-accordion-panel-padding-block-end);
104
104
  padding-top: var(--utrecht-accordion-panel-padding-block-start);
105
105
  padding-right: var(--utrecht-accordion-panel-padding-inline-end);
@@ -658,10 +658,10 @@
658
658
  .utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link::after,
659
659
  .utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link::before {
660
660
  height: 0;
661
- border-bottom-width: var(--utrecht-breadcrumb-nav-min-block-size);
662
- border-top-width: var(--utrecht-breadcrumb-nav-min-block-size);
663
661
  border-color: transparent;
664
662
  border-style: solid;
663
+ border-bottom-width: var(--utrecht-breadcrumb-nav-min-block-size);
664
+ border-top-width: var(--utrecht-breadcrumb-nav-min-block-size);
665
665
  content: " ";
666
666
  display: block;
667
667
  width: 0;
@@ -927,12 +927,12 @@
927
927
  align-items: center;
928
928
  background-color: var(--_utrecht-button-background-color);
929
929
  height: fit-content;
930
- border-bottom-color: var(--_utrecht-button-border-bottom-color);
931
- border-bottom-width: var(--_utrecht-button-border-block-end-width);
932
930
  border-color: var(--_utrecht-button-border-color);
933
931
  border-radius: var(--utrecht-button-border-radius);
934
932
  border-style: solid;
935
933
  border-width: var(--_utrecht-button-border-width);
934
+ border-bottom-color: var(--_utrecht-button-border-bottom-color);
935
+ border-bottom-width: var(--_utrecht-button-border-block-end-width);
936
936
  box-sizing: border-box;
937
937
  color: var(--_utrecht-button-color);
938
938
  column-gap: var(--utrecht-button-column-gap);
@@ -1298,12 +1298,12 @@
1298
1298
  align-items: center;
1299
1299
  background-color: var(--_utrecht-button-background-color);
1300
1300
  height: fit-content;
1301
- border-bottom-color: var(--_utrecht-button-border-bottom-color);
1302
- border-bottom-width: var(--_utrecht-button-border-block-end-width);
1303
1301
  border-color: var(--_utrecht-button-border-color);
1304
1302
  border-radius: var(--utrecht-button-border-radius);
1305
1303
  border-style: solid;
1306
1304
  border-width: var(--_utrecht-button-border-width);
1305
+ border-bottom-color: var(--_utrecht-button-border-bottom-color);
1306
+ border-bottom-width: var(--_utrecht-button-border-block-end-width);
1307
1307
  box-sizing: border-box;
1308
1308
  color: var(--_utrecht-button-color);
1309
1309
  column-gap: var(--utrecht-button-column-gap);
@@ -2143,6 +2143,127 @@
2143
2143
  border-width: var(--utrecht-checkbox-indeterminate-border-width, var(--utrecht-checkbox-border-width));
2144
2144
  color: var(--utrecht-checkbox-indeterminate-color, var(--utrecht-checkbox-color));
2145
2145
  }
2146
+ .utrecht-customizable-text-input {
2147
+ display: inline-block;
2148
+ max-width: min(100%, var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
2149
+ position: relative;
2150
+ }
2151
+
2152
+ .utrecht-customizable-text-input__inner {
2153
+ --_utrecht-textbox-border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
2154
+ --_utrecht-textbox-border-block-end-width: var(
2155
+ --utrecht-textbox-border-bottom-width,
2156
+ var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
2157
+ );
2158
+ border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
2159
+ border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
2160
+ border-style: solid;
2161
+ border-width: var(--_utrecht-textbox-border-width);
2162
+ border-bottom-width: var(--_utrecht-textbox-border-block-end-width);
2163
+ box-sizing: border-box;
2164
+ background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
2165
+ color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
2166
+ cursor: text;
2167
+ display: flex;
2168
+ min-height: calc(var(--utrecht-pointer-target-min-size, 44px) - var(--_utrecht-textbox-border-width) - var(--_utrecht-textbox-border-block-end-width));
2169
+ }
2170
+ .utrecht-customizable-text-input__inner:has(input[prince-xml-ignore-pseudo-class-focus-visible], .utrecht-textbox--focus-visible) {
2171
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
2172
+ var(--utrecht-focus-inverse-outline-color, transparent);
2173
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
2174
+ outline-color: var(--utrecht-focus-outline-color, revert);
2175
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
2176
+ outline-style: var(--utrecht-focus-outline-style, revert);
2177
+ outline-width: var(--utrecht-focus-outline-width, revert);
2178
+ z-index: 1;
2179
+ background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
2180
+ border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
2181
+ color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
2182
+ }
2183
+ .utrecht-customizable-text-input__inner:has(input[aria-invalid=true], .utrecht-textbox--invalid) {
2184
+ --_utrecht-textbox-border-width: var(
2185
+ --utrecht-textbox-invalid-border-width,
2186
+ var(
2187
+ --utrecht-form-control-invalid-border-width,
2188
+ var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
2189
+ )
2190
+ );
2191
+ border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
2192
+ border-width: var(--_utrecht-textbox-border-width);
2193
+ border-bottom-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
2194
+ background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
2195
+ color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
2196
+ }
2197
+ .utrecht-customizable-text-input__inner:has(input:read-only, .utrecht-textbox--read-only) {
2198
+ background-color: var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
2199
+ border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
2200
+ color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
2201
+ }
2202
+ .utrecht-customizable-text-input__inner:has(input:disabled, .utrecht-textbox--disabled) {
2203
+ background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
2204
+ border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
2205
+ color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
2206
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
2207
+ }
2208
+
2209
+ .utrecht-customizable-text-input__wrap-input {
2210
+ display: flex;
2211
+ min-width: 0;
2212
+ order: 2;
2213
+ }
2214
+
2215
+ .utrecht-customizable-text-input__wrap-input .utrecht-textbox,
2216
+ .utrecht-customizable-text-input__slot {
2217
+ margin-bottom: calc(var(--_utrecht-textbox-border-block-end-width) * -1);
2218
+ margin-top: calc(var(--_utrecht-textbox-border-width) * -1);
2219
+ }
2220
+
2221
+ .utrecht-customizable-text-input__wrap-input .utrecht-textbox {
2222
+ width: clamp(var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-inline-size, 44px)), var(--_utrecht-textbox-max-inline-size, var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size))), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
2223
+ max-width: none;
2224
+ min-width: 0;
2225
+ padding-bottom: calc(var(--_utrecht-textbox-padding-block-end) + var(--_utrecht-textbox-border-block-end-width));
2226
+ padding-top: calc(var(--_utrecht-textbox-padding-block-start) + var(--_utrecht-textbox-border-width));
2227
+ }
2228
+ .utrecht-customizable-text-input__wrap-input .utrecht-textbox, .utrecht-customizable-text-input__wrap-input .utrecht-textbox:focus, .utrecht-customizable-text-input__wrap-input .utrecht-textbox[prince-xml-ignore-pseudo-class-focus-visible], .utrecht-customizable-text-input__wrap-input .utrecht-textbox.utrecht-textbox--focus-visible, .utrecht-customizable-text-input__wrap-input .utrecht-textbox.utrecht-textbox--invalid, .utrecht-customizable-text-input__wrap-input .utrecht-textbox.utrecht-textbox--disabled {
2229
+ background-color: transparent;
2230
+ border-width: 0;
2231
+ box-shadow: none;
2232
+ color: currentColor;
2233
+ outline: none;
2234
+ }
2235
+
2236
+ .utrecht-customizable-text-input__wrap-input .utrecht-combobox {
2237
+ display: flex;
2238
+ position: static;
2239
+ }
2240
+
2241
+ .utrecht-customizable-text-input__slot {
2242
+ --utrecht-icon-size: var(--utrecht-textbox-icon-size, 1em);
2243
+ align-items: center;
2244
+ display: flex;
2245
+ justify-content: center;
2246
+ white-space: nowrap;
2247
+ }
2248
+
2249
+ .utrecht-customizable-text-input__slot:is(label),
2250
+ .utrecht-customizable-text-input__slot--label {
2251
+ cursor: inherit;
2252
+ }
2253
+
2254
+ .utrecht-customizable-text-input__slot--start {
2255
+ order: 1;
2256
+ }
2257
+ .utrecht-customizable-text-input__slot--start.utrecht-customizable-text-input__action {
2258
+ margin-left: calc(var(--_utrecht-textbox-border-width) * -1);
2259
+ }
2260
+
2261
+ .utrecht-customizable-text-input__slot--end {
2262
+ order: 3;
2263
+ }
2264
+ .utrecht-customizable-text-input__slot--end.utrecht-customizable-text-input__action {
2265
+ margin-right: calc(var(--_utrecht-textbox-border-width) * -1);
2266
+ }
2146
2267
  .utrecht-badge-data,
2147
2268
  .utrecht-data-badge {
2148
2269
  background-color: var(--utrecht-data-badge-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
@@ -2542,7 +2663,7 @@
2542
2663
  .utrecht-form-fieldset--html-fieldset,
2543
2664
  .utrecht-form-fieldset__fieldset--html-fieldset {
2544
2665
  all: revert;
2545
- border: 0;
2666
+ border-width: 0;
2546
2667
  margin-right: 0;
2547
2668
  margin-left: 0;
2548
2669
  min-width: 0;
@@ -2721,7 +2842,7 @@
2721
2842
 
2722
2843
  .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox {
2723
2844
  height: 1px !important;
2724
- border: 0 !important;
2845
+ border-width: 0 !important;
2725
2846
  clip-path: inset(50%) !important;
2726
2847
  width: 1px !important;
2727
2848
  margin: -1px !important;
@@ -3371,7 +3492,6 @@
3371
3492
  break-after: avoid;
3372
3493
  break-inside: avoid-column;
3373
3494
  break-inside: avoid;
3374
- break-after: avoid-page;
3375
3495
  color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3376
3496
  font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
3377
3497
  font-size: var(--utrecht-heading-1-font-size, revert);
@@ -3388,7 +3508,6 @@
3388
3508
  break-after: avoid;
3389
3509
  break-inside: avoid-column;
3390
3510
  break-inside: avoid;
3391
- break-after: avoid-page;
3392
3511
  color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3393
3512
  font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
3394
3513
  font-size: var(--utrecht-heading-2-font-size, revert);
@@ -3405,7 +3524,6 @@
3405
3524
  break-after: avoid;
3406
3525
  break-inside: avoid-column;
3407
3526
  break-inside: avoid;
3408
- break-after: avoid-page;
3409
3527
  color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3410
3528
  font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
3411
3529
  font-size: var(--utrecht-heading-3-font-size, revert);
@@ -3422,7 +3540,6 @@
3422
3540
  break-after: avoid;
3423
3541
  break-inside: avoid-column;
3424
3542
  break-inside: avoid;
3425
- break-after: avoid-page;
3426
3543
  color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3427
3544
  font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
3428
3545
  font-size: var(--utrecht-heading-4-font-size, revert);
@@ -3439,7 +3556,6 @@
3439
3556
  break-after: avoid;
3440
3557
  break-inside: avoid-column;
3441
3558
  break-inside: avoid;
3442
- break-after: avoid-page;
3443
3559
  color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3444
3560
  font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
3445
3561
  font-size: var(--utrecht-heading-5-font-size, revert);
@@ -3456,7 +3572,6 @@
3456
3572
  break-after: avoid;
3457
3573
  break-inside: avoid-column;
3458
3574
  break-inside: avoid;
3459
- break-after: avoid-page;
3460
3575
  color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3461
3576
  font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
3462
3577
  font-size: var(--utrecht-heading-6-font-size, revert);
@@ -4565,6 +4680,10 @@
4565
4680
  display: grid;
4566
4681
  flex-grow: 1;
4567
4682
  width: 100%;
4683
+ padding-bottom: var(--utrecht-page-body-padding-block-end);
4684
+ padding-top: var(--utrecht-page-body-padding-block-start);
4685
+ padding-right: var(--utrecht-page-body-padding-inline-end);
4686
+ padding-left: var(--utrecht-page-body-padding-inline-start);
4568
4687
  }
4569
4688
 
4570
4689
  .utrecht-page-body__content {
@@ -7190,7 +7309,7 @@
7190
7309
  -webkit-font-smoothing: auto !important;
7191
7310
  -moz-osx-font-smoothing: auto !important;
7192
7311
  background-color: var(--utrecht-root-background-color, Canvas);
7193
- border: 0;
7312
+ border-width: 0;
7194
7313
  box-sizing: border-box;
7195
7314
  color: var(--utrecht-root-color, CanvasText);
7196
7315
  font-family: var(--utrecht-root-font-family);
@@ -7331,14 +7450,14 @@
7331
7450
  color: var(--utrecht-search-bar-list-item-is-selected-color);
7332
7451
  }
7333
7452
  .utrecht-select {
7334
- background-color: var(--utrecht-select-background-color, var(--utrecht-form-control-background-color));
7453
+ border-color: var(--utrecht-select-border-color, var(--utrecht-form-control-border-color));
7454
+ border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-control-border-radius, 0));
7455
+ border-style: solid;
7335
7456
  border-bottom-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-control-border-width)));
7336
7457
  border-top-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
7337
- border-color: var(--utrecht-select-border-color, var(--utrecht-form-control-border-color));
7338
7458
  border-right-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
7339
7459
  border-left-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
7340
- border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-control-border-radius, 0));
7341
- border-style: solid;
7460
+ background-color: var(--utrecht-select-background-color, var(--utrecht-form-control-background-color));
7342
7461
  color: var(--utrecht-select-color, var(--utrecht-form-control-color));
7343
7462
  font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
7344
7463
  font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
@@ -7396,10 +7515,10 @@
7396
7515
  var(--utrecht-select-border-width, var(--utrecht-form-control-border-width))
7397
7516
  )
7398
7517
  );
7399
- background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
7518
+ border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
7400
7519
  border-width: var(--_utrecht-select-border-width);
7401
7520
  border-bottom-width: var(--utrecht-select-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-select-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-select-border-width)))));
7402
- border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
7521
+ background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
7403
7522
  }
7404
7523
  .utrecht-select--html-select {
7405
7524
  }
@@ -7844,7 +7963,9 @@
7844
7963
 
7845
7964
  .utrecht-table__header--hidden {
7846
7965
  height: 1px;
7847
- border: 0 solid silver;
7966
+ border-color: silver;
7967
+ border-style: solid;
7968
+ border-width: 0;
7848
7969
  clip-path: inset(50%);
7849
7970
  width: 1px;
7850
7971
  outline: 1px solid red;
@@ -7901,13 +8022,13 @@
7901
8022
  font-variant-numeric: lining-nums tabular-nums;
7902
8023
  }
7903
8024
  .utrecht-textarea {
7904
- background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
7905
- height: initial;
7906
- border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
7907
- border-bottom-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
7908
8025
  border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
7909
8026
  border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
7910
8027
  border-style: solid;
8028
+ border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
8029
+ border-bottom-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
8030
+ background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
8031
+ height: initial;
7911
8032
  box-sizing: border-box;
7912
8033
  color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
7913
8034
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
@@ -7934,10 +8055,10 @@
7934
8055
  var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))
7935
8056
  )
7936
8057
  );
7937
- background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
8058
+ border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
7938
8059
  border-width: var(--_utrecht-textarea-border-width);
7939
8060
  border-bottom-width: var(--utrecht-textarea-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-textarea-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-textarea-border-width)))));
7940
- border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
8061
+ background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
7941
8062
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
7942
8063
  }
7943
8064
 
@@ -8002,10 +8123,10 @@
8002
8123
  var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))
8003
8124
  )
8004
8125
  );
8005
- background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
8126
+ border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
8006
8127
  border-width: var(--_utrecht-textarea-border-width);
8007
8128
  border-bottom-width: var(--utrecht-textarea-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-textarea-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-textarea-border-width)))));
8008
- border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
8129
+ background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
8009
8130
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
8010
8131
  }
8011
8132
  .utrecht-textarea--html-textarea:read-only {
@@ -8033,27 +8154,40 @@
8033
8154
  var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width, 0)) +
8034
8155
  var(--utrecht-textbox-autocomplete-ui-size, 44px)
8035
8156
  );
8036
- background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
8037
- height: initial;
8038
- border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
8039
- border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));
8157
+ max-width: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
8158
+ min-height: var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-block-size, 44px));
8159
+ min-width: var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-inline-size, 44px));
8160
+ --_utrecht-textbox-border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
8161
+ --_utrecht-textbox-border-block-end-width: var(
8162
+ --utrecht-textbox-border-bottom-width,
8163
+ var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
8164
+ );
8040
8165
  border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
8041
8166
  border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
8042
8167
  border-style: solid;
8168
+ border-width: var(--_utrecht-textbox-border-width);
8169
+ border-bottom-width: var(--_utrecht-textbox-border-block-end-width);
8043
8170
  box-sizing: border-box;
8171
+ background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
8044
8172
  color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
8173
+ --_utrecht-textbox-padding-block-end: var(
8174
+ --utrecht-textbox-padding-block-end,
8175
+ var(--utrecht-form-control-padding-block-end, 0)
8176
+ );
8177
+ --_utrecht-textbox-padding-block-start: var(
8178
+ --utrecht-textbox-padding-block-start,
8179
+ var(--utrecht-form-control-padding-block-start, 0)
8180
+ );
8181
+ height: initial;
8045
8182
  display: block;
8046
8183
  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
8047
8184
  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
8048
8185
  font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial));
8049
8186
  width: 100%;
8050
8187
  line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
8051
- min-height: var(--utrecht-pointer-target-min-size, 44px);
8052
- min-width: var(--utrecht-pointer-target-min-size, 44px);
8053
- max-width: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
8054
8188
  overflow: hidden;
8055
- padding-bottom: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
8056
- padding-top: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
8189
+ padding-bottom: var(--_utrecht-textbox-padding-block-end);
8190
+ padding-top: var(--_utrecht-textbox-padding-block-start);
8057
8191
  padding-right: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
8058
8192
  padding-left: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
8059
8193
  white-space: nowrap;
@@ -8067,10 +8201,10 @@
8067
8201
  var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
8068
8202
  )
8069
8203
  );
8070
- background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
8204
+ border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
8071
8205
  border-width: var(--_utrecht-textbox-border-width);
8072
8206
  border-bottom-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
8073
- border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
8207
+ background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
8074
8208
  color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
8075
8209
  }
8076
8210
 
@@ -8191,10 +8325,10 @@
8191
8325
  var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
8192
8326
  )
8193
8327
  );
8194
- background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
8328
+ border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
8195
8329
  border-width: var(--_utrecht-textbox-border-width);
8196
8330
  border-bottom-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
8197
- border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
8331
+ background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
8198
8332
  color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
8199
8333
  }
8200
8334
  .utrecht-textbox--html-input:read-only {
@@ -8404,10 +8538,13 @@
8404
8538
  --utrecht-icon-color: currentColor;
8405
8539
  --utrecht-icon-size: var(--utrecht-toptask-link-icon-size);
8406
8540
  background-color: var(--utrecht-toptask-link-background-color);
8541
+ border-radius: var(--utrecht-toptask-link-border-radius);
8407
8542
  color: var(--utrecht-toptask-link-color);
8408
8543
  display: flex;
8409
8544
  flex-direction: column;
8545
+ font-family: var(--utrecht-toptask-link-font-family);
8410
8546
  font-size: var(--utrecht-toptask-link-font-size);
8547
+ font-weight: var(--utrecht-toptask-link-font-weight);
8411
8548
  line-height: var(--utrecht-toptask-link-line-height);
8412
8549
  max-width: var(--utrecht-toptask-link-max-inline-size);
8413
8550
  min-height: var(--utrecht-toptask-link-min-block-size);
@@ -8869,12 +9006,12 @@
8869
9006
  align-items: center;
8870
9007
  background-color: var(--_utrecht-button-background-color);
8871
9008
  height: fit-content;
8872
- border-bottom-color: var(--_utrecht-button-border-bottom-color);
8873
- border-bottom-width: var(--_utrecht-button-border-block-end-width);
8874
9009
  border-color: var(--_utrecht-button-border-color);
8875
9010
  border-radius: var(--utrecht-button-border-radius);
8876
9011
  border-style: solid;
8877
9012
  border-width: var(--_utrecht-button-border-width);
9013
+ border-bottom-color: var(--_utrecht-button-border-bottom-color);
9014
+ border-bottom-width: var(--_utrecht-button-border-block-end-width);
8878
9015
  box-sizing: border-box;
8879
9016
  color: var(--_utrecht-button-color);
8880
9017
  column-gap: var(--utrecht-button-column-gap);
@@ -9005,7 +9142,7 @@
9005
9142
  margin-bottom: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
9006
9143
  margin-top: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
9007
9144
  all: revert;
9008
- border: 0;
9145
+ border-width: 0;
9009
9146
  margin-right: 0;
9010
9147
  margin-left: 0;
9011
9148
  min-width: 0;
@@ -9092,7 +9229,6 @@
9092
9229
  break-after: avoid;
9093
9230
  break-inside: avoid-column;
9094
9231
  break-inside: avoid;
9095
- break-after: avoid-page;
9096
9232
  color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
9097
9233
  font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
9098
9234
  font-size: var(--utrecht-heading-1-font-size, revert);
@@ -9106,7 +9242,6 @@
9106
9242
  break-after: avoid;
9107
9243
  break-inside: avoid-column;
9108
9244
  break-inside: avoid;
9109
- break-after: avoid-page;
9110
9245
  color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
9111
9246
  font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
9112
9247
  font-size: var(--utrecht-heading-2-font-size, revert);
@@ -9120,7 +9255,6 @@
9120
9255
  break-after: avoid;
9121
9256
  break-inside: avoid-column;
9122
9257
  break-inside: avoid;
9123
- break-after: avoid-page;
9124
9258
  color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
9125
9259
  font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
9126
9260
  font-size: var(--utrecht-heading-3-font-size, revert);
@@ -9134,7 +9268,6 @@
9134
9268
  break-after: avoid;
9135
9269
  break-inside: avoid-column;
9136
9270
  break-inside: avoid;
9137
- break-after: avoid-page;
9138
9271
  color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
9139
9272
  font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
9140
9273
  font-size: var(--utrecht-heading-4-font-size, revert);
@@ -9148,7 +9281,6 @@
9148
9281
  break-after: avoid;
9149
9282
  break-inside: avoid-column;
9150
9283
  break-inside: avoid;
9151
- break-after: avoid-page;
9152
9284
  color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
9153
9285
  font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
9154
9286
  font-size: var(--utrecht-heading-5-font-size, revert);
@@ -9162,7 +9294,6 @@
9162
9294
  break-after: avoid;
9163
9295
  break-inside: avoid-column;
9164
9296
  break-inside: avoid;
9165
- break-after: avoid-page;
9166
9297
  color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
9167
9298
  font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
9168
9299
  font-size: var(--utrecht-heading-6-font-size, revert);
@@ -9457,14 +9588,14 @@
9457
9588
  );
9458
9589
  }
9459
9590
  .utrecht-html select {
9460
- background-color: var(--utrecht-select-background-color, var(--utrecht-form-control-background-color));
9591
+ border-color: var(--utrecht-select-border-color, var(--utrecht-form-control-border-color));
9592
+ border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-control-border-radius, 0));
9593
+ border-style: solid;
9461
9594
  border-bottom-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-control-border-width)));
9462
9595
  border-top-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
9463
- border-color: var(--utrecht-select-border-color, var(--utrecht-form-control-border-color));
9464
9596
  border-right-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
9465
9597
  border-left-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
9466
- border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-control-border-radius, 0));
9467
- border-style: solid;
9598
+ background-color: var(--utrecht-select-background-color, var(--utrecht-form-control-background-color));
9468
9599
  color: var(--utrecht-select-color, var(--utrecht-form-control-color));
9469
9600
  font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
9470
9601
  font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
@@ -9513,10 +9644,10 @@
9513
9644
  var(--utrecht-select-border-width, var(--utrecht-form-control-border-width))
9514
9645
  )
9515
9646
  );
9516
- background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
9647
+ border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
9517
9648
  border-width: var(--_utrecht-select-border-width);
9518
9649
  border-bottom-width: var(--utrecht-select-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-select-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-select-border-width)))));
9519
- border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
9650
+ background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
9520
9651
  }
9521
9652
  .utrecht-html hr {
9522
9653
  border-color: var(--utrecht-separator-color);
@@ -9635,13 +9766,13 @@
9635
9766
  color: var(--utrecht-table-row-alternate-odd-color);
9636
9767
  }
9637
9768
  .utrecht-html textarea {
9638
- background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
9639
- height: initial;
9640
- border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
9641
- border-bottom-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
9642
9769
  border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
9643
9770
  border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
9644
9771
  border-style: solid;
9772
+ border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
9773
+ border-bottom-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
9774
+ background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
9775
+ height: initial;
9645
9776
  box-sizing: border-box;
9646
9777
  color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
9647
9778
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
@@ -9682,10 +9813,10 @@
9682
9813
  var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))
9683
9814
  )
9684
9815
  );
9685
- background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
9816
+ border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
9686
9817
  border-width: var(--_utrecht-textarea-border-width);
9687
9818
  border-bottom-width: var(--utrecht-textarea-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-textarea-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-textarea-border-width)))));
9688
- border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
9819
+ background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
9689
9820
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
9690
9821
  }
9691
9822
  .utrecht-html textarea:read-only {
@@ -9725,27 +9856,40 @@
9725
9856
  var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width, 0)) +
9726
9857
  var(--utrecht-textbox-autocomplete-ui-size, 44px)
9727
9858
  );
9728
- background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
9729
- height: initial;
9730
- border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
9731
- border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));
9859
+ max-width: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
9860
+ min-height: var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-block-size, 44px));
9861
+ min-width: var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-inline-size, 44px));
9862
+ --_utrecht-textbox-border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
9863
+ --_utrecht-textbox-border-block-end-width: var(
9864
+ --utrecht-textbox-border-bottom-width,
9865
+ var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
9866
+ );
9732
9867
  border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
9733
9868
  border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
9734
9869
  border-style: solid;
9870
+ border-width: var(--_utrecht-textbox-border-width);
9871
+ border-bottom-width: var(--_utrecht-textbox-border-block-end-width);
9735
9872
  box-sizing: border-box;
9873
+ background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
9736
9874
  color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
9875
+ --_utrecht-textbox-padding-block-end: var(
9876
+ --utrecht-textbox-padding-block-end,
9877
+ var(--utrecht-form-control-padding-block-end, 0)
9878
+ );
9879
+ --_utrecht-textbox-padding-block-start: var(
9880
+ --utrecht-textbox-padding-block-start,
9881
+ var(--utrecht-form-control-padding-block-start, 0)
9882
+ );
9883
+ height: initial;
9737
9884
  display: block;
9738
9885
  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
9739
9886
  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
9740
9887
  font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial));
9741
9888
  width: 100%;
9742
9889
  line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
9743
- min-height: var(--utrecht-pointer-target-min-size, 44px);
9744
- min-width: var(--utrecht-pointer-target-min-size, 44px);
9745
- max-width: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
9746
9890
  overflow: hidden;
9747
- padding-bottom: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
9748
- padding-top: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
9891
+ padding-bottom: var(--_utrecht-textbox-padding-block-end);
9892
+ padding-top: var(--_utrecht-textbox-padding-block-start);
9749
9893
  padding-right: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
9750
9894
  padding-left: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
9751
9895
  white-space: nowrap;
@@ -9821,10 +9965,10 @@
9821
9965
  var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
9822
9966
  )
9823
9967
  );
9824
- background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
9968
+ border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
9825
9969
  border-width: var(--_utrecht-textbox-border-width);
9826
9970
  border-bottom-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
9827
- border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
9971
+ background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
9828
9972
  color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
9829
9973
  }
9830
9974
  .utrecht-html input:not([type]):read-only,