dso-toolkit 95.2.0 → 97.0.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.
Files changed (25) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/dist/dso.css +200 -622
  3. package/dist/dso.css.map +1 -1
  4. package/dist/dso.min.css +1 -1
  5. package/dist/dso.min.css.map +1 -1
  6. package/dist/index.js +0 -2
  7. package/package.json +1 -1
  8. package/src/components/heading/heading.mixins.scss +1 -0
  9. package/src/components/rich-content/rich-content.scss +3 -0
  10. package/src/dso.scss +0 -5
  11. package/src/global/mixins/set-colors.mixin.scss +18 -3
  12. package/src/components/attachments-counter/_index.scss +0 -1
  13. package/src/components/attachments-counter/attachments-counter.mixins.scss +0 -9
  14. package/src/components/attachments-counter/attachments-counter.scss +0 -14
  15. package/src/components/banner/_index.scss +0 -2
  16. package/src/components/banner/banner.mixins.scss +0 -118
  17. package/src/components/banner/banner.scss +0 -175
  18. package/src/components/banner/banner.variables.scss +0 -22
  19. package/src/components/card-container/_index.scss +0 -1
  20. package/src/components/card-container/card-container.scss +0 -13
  21. package/src/components/card-container/card-container.variables.scss +0 -1
  22. package/src/components/card-grid/card-grid.scss +0 -25
  23. package/src/components/card-list/_index.scss +0 -1
  24. package/src/components/card-list/card-list.scss +0 -16
  25. package/src/components/card-list/card-list.variables.scss +0 -4
package/dist/dso.css CHANGED
@@ -1,5 +1,5 @@
1
1
  :root {
2
- --dso-toolkit-version: "95.2.0";
2
+ --dso-toolkit-version: "97.0.0";
3
3
  }
4
4
 
5
5
  @font-face {
@@ -246,9 +246,16 @@ dso-action-list .dso-rich-content .h5 {
246
246
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
247
247
  }
248
248
  .alert.alert-success {
249
+ --_dso-icon-button-secondary-active-color: #fff;
250
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
251
+ --_dso-icon-button-secondary-toggled-color: #fff;
252
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
253
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
249
254
  --_dso-icon-button-tertiary-color: #191919;
250
255
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
251
- --_dso-icon-button-tertiary-active-color: #173521;
256
+ --_dso-icon-button-tertiary-active-color: #1f472c;
257
+ --_dso-icon-button-tertiary-toggled-color: #275937;
258
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
252
259
  --_dso-icon-button-tertiary-disabled-color: #999;
253
260
  --_dso-button-tertiary-color: #191919;
254
261
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -279,9 +286,16 @@ dso-action-list .dso-rich-content .h5 {
279
286
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
280
287
  }
281
288
  .alert.alert-error {
289
+ --_dso-icon-button-secondary-active-color: #fff;
290
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
291
+ --_dso-icon-button-secondary-toggled-color: #fff;
292
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
293
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
282
294
  --_dso-icon-button-tertiary-color: #191919;
283
295
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
284
- --_dso-icon-button-tertiary-active-color: #173521;
296
+ --_dso-icon-button-tertiary-active-color: #1f472c;
297
+ --_dso-icon-button-tertiary-toggled-color: #275937;
298
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
285
299
  --_dso-icon-button-tertiary-disabled-color: #999;
286
300
  --_dso-button-tertiary-color: #191919;
287
301
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -312,9 +326,16 @@ dso-action-list .dso-rich-content .h5 {
312
326
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
313
327
  }
314
328
  .alert.alert-warning {
329
+ --_dso-icon-button-secondary-active-color: #fff;
330
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
331
+ --_dso-icon-button-secondary-toggled-color: #fff;
332
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
333
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
315
334
  --_dso-icon-button-tertiary-color: #191919;
316
335
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
317
- --_dso-icon-button-tertiary-active-color: #173521;
336
+ --_dso-icon-button-tertiary-active-color: #1f472c;
337
+ --_dso-icon-button-tertiary-toggled-color: #275937;
338
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
318
339
  --_dso-icon-button-tertiary-disabled-color: #999;
319
340
  --_dso-button-tertiary-color: #191919;
320
341
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -345,9 +366,16 @@ dso-action-list .dso-rich-content .h5 {
345
366
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
346
367
  }
347
368
  .alert.alert-info {
369
+ --_dso-icon-button-secondary-active-color: #fff;
370
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
371
+ --_dso-icon-button-secondary-toggled-color: #fff;
372
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
373
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
348
374
  --_dso-icon-button-tertiary-color: #191919;
349
375
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
350
- --_dso-icon-button-tertiary-active-color: #173521;
376
+ --_dso-icon-button-tertiary-active-color: #1f472c;
377
+ --_dso-icon-button-tertiary-toggled-color: #275937;
378
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
351
379
  --_dso-icon-button-tertiary-disabled-color: #999;
352
380
  --_dso-button-tertiary-color: #191919;
353
381
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -483,558 +511,6 @@ dso-action-list .dso-rich-content .h5 {
483
511
  text-align: end;
484
512
  }
485
513
 
486
- .dso-attachments {
487
- color: var(--dso-attachments-counter-color, #666);
488
- display: inline-block;
489
- font-weight: 400;
490
- text-decoration: none;
491
- white-space: nowrap;
492
- }
493
- .dso-attachments::after {
494
- background: url("./di.svg#paperclip-grijs") no-repeat center;
495
- background-size: cover;
496
- block-size: 24px;
497
- vertical-align: top;
498
- inline-size: 24px;
499
- content: "";
500
- display: inline-block;
501
- }
502
-
503
- .dso-banner {
504
- padding-block: 16px;
505
- padding-inline: 0;
506
- position: relative;
507
- }
508
- .dso-banner.dso-compact {
509
- padding-block: 12px;
510
- padding-inline: 0;
511
- }
512
- .dso-banner a {
513
- text-decoration: underline;
514
- }
515
- .dso-banner a:active {
516
- text-decoration: none;
517
- }
518
- .dso-banner .dso-banner-inner {
519
- line-height: 1.5;
520
- position: relative;
521
- padding-inline: 16px;
522
- }
523
- .dso-banner .dso-banner-inner dso-icon-button {
524
- position: absolute;
525
- inset-inline-end: 16px;
526
- inset-block-start: 0;
527
- --_dso-icon-button-tertiary-color: #000;
528
- }
529
- .dso-banner .dso-banner-inner > .dso-rich-content {
530
- padding-inline-end: 24px;
531
- }
532
- .dso-banner .dso-banner-inner > .dso-rich-content h1,
533
- .dso-banner .dso-banner-inner > .dso-rich-content h2,
534
- .dso-banner .dso-banner-inner > .dso-rich-content h3,
535
- .dso-banner .dso-banner-inner > .dso-rich-content h4,
536
- .dso-banner .dso-banner-inner > .dso-rich-content h5,
537
- .dso-banner .dso-banner-inner > .dso-rich-content h6 {
538
- color: #000;
539
- font-size: 1rem;
540
- line-height: 1.5;
541
- margin-block-end: 0;
542
- }
543
- .dso-banner .dso-banner-inner > .dso-rich-content h1 + p,
544
- .dso-banner .dso-banner-inner > .dso-rich-content h2 + p,
545
- .dso-banner .dso-banner-inner > .dso-rich-content h3 + p,
546
- .dso-banner .dso-banner-inner > .dso-rich-content h4 + p,
547
- .dso-banner .dso-banner-inner > .dso-rich-content h5 + p,
548
- .dso-banner .dso-banner-inner > .dso-rich-content h6 + p {
549
- display: inline;
550
- }
551
- .dso-banner .dso-banner-inner > .dso-rich-content h1 + p + *,
552
- .dso-banner .dso-banner-inner > .dso-rich-content h2 + p + *,
553
- .dso-banner .dso-banner-inner > .dso-rich-content h3 + p + *,
554
- .dso-banner .dso-banner-inner > .dso-rich-content h4 + p + *,
555
- .dso-banner .dso-banner-inner > .dso-rich-content h5 + p + *,
556
- .dso-banner .dso-banner-inner > .dso-rich-content h6 + p + * {
557
- margin-block-start: 16px;
558
- }
559
- .dso-banner .dso-banner-inner > .dso-rich-content > h2:first-child {
560
- float: inline-start;
561
- margin-inline-end: 8px;
562
- }
563
- .dso-banner .dso-banner-inner > .dso-rich-content *:first-child {
564
- margin-block-start: 0;
565
- }
566
- .dso-banner .dso-banner-inner > .dso-rich-content *:last-child {
567
- margin-block-end: 0;
568
- }
569
- .dso-banner .dso-banner-inner {
570
- margin-inline: auto;
571
- }
572
- @media (min-width: 768px) {
573
- .dso-banner .dso-banner-inner {
574
- inline-size: auto;
575
- }
576
- }
577
- @media (min-width: 992px) {
578
- .dso-banner .dso-banner-inner {
579
- inline-size: 922px;
580
- }
581
- }
582
- @media (min-width: 1200px) {
583
- .dso-banner .dso-banner-inner {
584
- inline-size: 1152px;
585
- }
586
- }
587
- .dso-banner .dso-banner-inner::before {
588
- content: "";
589
- display: inline-block;
590
- inset-inline-start: 16px;
591
- position: absolute;
592
- inset-block-start: 0;
593
- }
594
- @media screen and (min-width: 480px) {
595
- .dso-banner.dso-icon .dso-banner-inner {
596
- padding-inline-start: 48px;
597
- }
598
- }
599
- @media screen and (max-width: 479.01px) {
600
- .dso-banner.dso-icon .dso-banner-inner {
601
- padding-block-start: 39px;
602
- }
603
- .dso-banner.dso-icon .dso-banner-inner > .dso-rich-content {
604
- padding-inline-end: 0;
605
- }
606
- }
607
- .dso-banner.alert-success {
608
- --_dso-alert-success-border-color: #39870c;
609
- --_dso-alert-error-border-color: #ce3f51;
610
- --_dso-alert-info-border-color: #6ca4d9;
611
- --_dso-alert-warning-border-color: #dcd400;
612
- --link-color: currentColor;
613
- --link-hover-color: currentColor;
614
- --link-visited-color: currentColor;
615
- }
616
- .dso-banner.alert-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
617
- background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
618
- }
619
- .dso-banner.alert-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
620
- background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
621
- }
622
- .dso-banner.alert-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
623
- background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
624
- }
625
- .dso-banner.alert-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
626
- background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
627
- }
628
- .dso-banner.alert-success {
629
- --_dso-icon-button-tertiary-color: #191919;
630
- --_dso-icon-button-tertiary-hover-color: #4c4c4c;
631
- --_dso-icon-button-tertiary-active-color: #173521;
632
- --_dso-icon-button-tertiary-disabled-color: #999;
633
- --_dso-button-tertiary-color: #191919;
634
- --_dso-button-tertiary-hover-color: #4c4c4c;
635
- --_dso-button-tertiary-active-color: #173521;
636
- --_dso-button-tertiary-disabled-color: #999;
637
- background-color: #e4f1d4;
638
- color: #191919;
639
- border-color: #e4f1d4;
640
- }
641
- .dso-banner.alert-success.dso-icon .dso-banner-inner::before {
642
- background: url("./di.svg#status-success") no-repeat center;
643
- background-size: cover;
644
- block-size: 24px;
645
- vertical-align: top;
646
- inline-size: 24px;
647
- }
648
- .dso-banner.alert-error {
649
- --_dso-alert-success-border-color: #39870c;
650
- --_dso-alert-error-border-color: #ce3f51;
651
- --_dso-alert-info-border-color: #6ca4d9;
652
- --_dso-alert-warning-border-color: #dcd400;
653
- --link-color: currentColor;
654
- --link-hover-color: currentColor;
655
- --link-visited-color: currentColor;
656
- }
657
- .dso-banner.alert-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
658
- background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
659
- }
660
- .dso-banner.alert-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
661
- background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
662
- }
663
- .dso-banner.alert-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
664
- background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
665
- }
666
- .dso-banner.alert-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
667
- background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
668
- }
669
- .dso-banner.alert-error {
670
- --_dso-icon-button-tertiary-color: #191919;
671
- --_dso-icon-button-tertiary-hover-color: #4c4c4c;
672
- --_dso-icon-button-tertiary-active-color: #173521;
673
- --_dso-icon-button-tertiary-disabled-color: #999;
674
- --_dso-button-tertiary-color: #191919;
675
- --_dso-button-tertiary-hover-color: #4c4c4c;
676
- --_dso-button-tertiary-active-color: #173521;
677
- --_dso-button-tertiary-disabled-color: #999;
678
- background-color: #f5d8dc;
679
- color: #191919;
680
- border-color: #f5d8dc;
681
- }
682
- .dso-banner.alert-error.dso-icon .dso-banner-inner::before {
683
- background: url("./di.svg#status-error") no-repeat center;
684
- background-size: cover;
685
- block-size: 24px;
686
- vertical-align: top;
687
- inline-size: 24px;
688
- }
689
- .dso-banner.alert-info {
690
- --_dso-alert-success-border-color: #39870c;
691
- --_dso-alert-error-border-color: #ce3f51;
692
- --_dso-alert-info-border-color: #6ca4d9;
693
- --_dso-alert-warning-border-color: #dcd400;
694
- --link-color: currentColor;
695
- --link-hover-color: currentColor;
696
- --link-visited-color: currentColor;
697
- }
698
- .dso-banner.alert-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
699
- background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
700
- }
701
- .dso-banner.alert-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
702
- background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
703
- }
704
- .dso-banner.alert-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
705
- background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
706
- }
707
- .dso-banner.alert-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
708
- background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
709
- }
710
- .dso-banner.alert-info {
711
- --_dso-icon-button-tertiary-color: #191919;
712
- --_dso-icon-button-tertiary-hover-color: #4c4c4c;
713
- --_dso-icon-button-tertiary-active-color: #173521;
714
- --_dso-icon-button-tertiary-disabled-color: #999;
715
- --_dso-button-tertiary-color: #191919;
716
- --_dso-button-tertiary-hover-color: #4c4c4c;
717
- --_dso-button-tertiary-active-color: #173521;
718
- --_dso-button-tertiary-disabled-color: #999;
719
- background-color: #e1ecf7;
720
- color: #191919;
721
- border-color: #e1ecf7;
722
- }
723
- .dso-banner.alert-info.dso-icon .dso-banner-inner::before {
724
- background: url("./di.svg#status-info-solid") no-repeat center;
725
- background-size: cover;
726
- block-size: 24px;
727
- vertical-align: top;
728
- inline-size: 24px;
729
- }
730
- .dso-banner.alert-warning {
731
- --_dso-alert-success-border-color: #39870c;
732
- --_dso-alert-error-border-color: #ce3f51;
733
- --_dso-alert-info-border-color: #6ca4d9;
734
- --_dso-alert-warning-border-color: #dcd400;
735
- --link-color: currentColor;
736
- --link-hover-color: currentColor;
737
- --link-visited-color: currentColor;
738
- }
739
- .dso-banner.alert-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
740
- background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
741
- }
742
- .dso-banner.alert-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
743
- background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
744
- }
745
- .dso-banner.alert-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
746
- background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
747
- }
748
- .dso-banner.alert-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
749
- background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
750
- }
751
- .dso-banner.alert-warning {
752
- --_dso-icon-button-tertiary-color: #191919;
753
- --_dso-icon-button-tertiary-hover-color: #4c4c4c;
754
- --_dso-icon-button-tertiary-active-color: #173521;
755
- --_dso-icon-button-tertiary-disabled-color: #999;
756
- --_dso-button-tertiary-color: #191919;
757
- --_dso-button-tertiary-hover-color: #4c4c4c;
758
- --_dso-button-tertiary-active-color: #173521;
759
- --_dso-button-tertiary-disabled-color: #999;
760
- background-color: #f8f6cc;
761
- color: #191919;
762
- border-color: #f8f6cc;
763
- }
764
- .dso-banner.alert-warning.dso-icon .dso-banner-inner::before {
765
- background: url("./di.svg#status-warning") no-repeat center;
766
- background-size: cover;
767
- block-size: 24px;
768
- vertical-align: top;
769
- inline-size: 24px;
770
- }
771
- .dso-banner a.download {
772
- background-image: var(--_dso-di-background-image, url("./di.svg#download-grijs90"));
773
- }
774
- .dso-banner a.extern {
775
- background-image: var(--_dso-di-background-image, url("./di.svg#external-link-grijs90"));
776
- }
777
-
778
- dso-banner a {
779
- text-decoration: underline;
780
- }
781
- dso-banner a:active {
782
- text-decoration: none;
783
- }
784
- dso-banner .dso-banner-inner {
785
- line-height: 1.5;
786
- position: relative;
787
- padding-inline: 16px;
788
- }
789
- dso-banner .dso-banner-inner dso-icon-button {
790
- position: absolute;
791
- inset-inline-end: 16px;
792
- inset-block-start: 0;
793
- --_dso-icon-button-tertiary-color: #000;
794
- }
795
- dso-banner .dso-banner-inner > .dso-rich-content {
796
- padding-inline-end: 24px;
797
- }
798
- dso-banner .dso-banner-inner > .dso-rich-content h1,
799
- dso-banner .dso-banner-inner > .dso-rich-content h2,
800
- dso-banner .dso-banner-inner > .dso-rich-content h3,
801
- dso-banner .dso-banner-inner > .dso-rich-content h4,
802
- dso-banner .dso-banner-inner > .dso-rich-content h5,
803
- dso-banner .dso-banner-inner > .dso-rich-content h6 {
804
- color: #000;
805
- font-size: 1rem;
806
- line-height: 1.5;
807
- margin-block-end: 0;
808
- }
809
- dso-banner .dso-banner-inner > .dso-rich-content h1 + p,
810
- dso-banner .dso-banner-inner > .dso-rich-content h2 + p,
811
- dso-banner .dso-banner-inner > .dso-rich-content h3 + p,
812
- dso-banner .dso-banner-inner > .dso-rich-content h4 + p,
813
- dso-banner .dso-banner-inner > .dso-rich-content h5 + p,
814
- dso-banner .dso-banner-inner > .dso-rich-content h6 + p {
815
- display: inline;
816
- }
817
- dso-banner .dso-banner-inner > .dso-rich-content h1 + p + *,
818
- dso-banner .dso-banner-inner > .dso-rich-content h2 + p + *,
819
- dso-banner .dso-banner-inner > .dso-rich-content h3 + p + *,
820
- dso-banner .dso-banner-inner > .dso-rich-content h4 + p + *,
821
- dso-banner .dso-banner-inner > .dso-rich-content h5 + p + *,
822
- dso-banner .dso-banner-inner > .dso-rich-content h6 + p + * {
823
- margin-block-start: 16px;
824
- }
825
- dso-banner .dso-banner-inner > .dso-rich-content > h2:first-child {
826
- float: inline-start;
827
- margin-inline-end: 8px;
828
- }
829
- dso-banner .dso-banner-inner > .dso-rich-content *:first-child {
830
- margin-block-start: 0;
831
- }
832
- dso-banner .dso-banner-inner > .dso-rich-content *:last-child {
833
- margin-block-end: 0;
834
- }
835
- dso-banner .dso-banner-inner {
836
- margin-inline: auto;
837
- }
838
- @media (min-width: 768px) {
839
- dso-banner .dso-banner-inner {
840
- inline-size: auto;
841
- }
842
- }
843
- @media (min-width: 992px) {
844
- dso-banner .dso-banner-inner {
845
- inline-size: 922px;
846
- }
847
- }
848
- @media (min-width: 1200px) {
849
- dso-banner .dso-banner-inner {
850
- inline-size: 1152px;
851
- }
852
- }
853
- dso-banner .dso-banner-inner::before {
854
- content: "";
855
- position: absolute;
856
- inset-inline-start: 16px;
857
- inset-block-start: 0;
858
- display: inline-block;
859
- }
860
- @media screen and (min-width: 480px) {
861
- dso-banner[icon] .dso-banner-inner {
862
- padding-inline-start: 48px;
863
- }
864
- }
865
- @media screen and (max-width: 479.01px) {
866
- dso-banner[icon] .dso-banner-inner {
867
- padding-block-start: 39px;
868
- }
869
- dso-banner[icon] .dso-banner-inner > .dso-rich-content {
870
- padding-inline-end: 0;
871
- }
872
- }
873
- dso-banner[status=success] {
874
- --_dso-alert-success-border-color: #39870c;
875
- --_dso-alert-error-border-color: #ce3f51;
876
- --_dso-alert-info-border-color: #6ca4d9;
877
- --_dso-alert-warning-border-color: #dcd400;
878
- --link-color: currentColor;
879
- --link-hover-color: currentColor;
880
- --link-visited-color: currentColor;
881
- }
882
- dso-banner[status=success] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
883
- background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
884
- }
885
- dso-banner[status=success] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
886
- background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
887
- }
888
- dso-banner[status=success] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
889
- background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
890
- }
891
- dso-banner[status=success] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
892
- background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
893
- }
894
- dso-banner[status=success] {
895
- --_dso-icon-button-tertiary-color: #191919;
896
- --_dso-icon-button-tertiary-hover-color: #4c4c4c;
897
- --_dso-icon-button-tertiary-active-color: #173521;
898
- --_dso-icon-button-tertiary-disabled-color: #999;
899
- --_dso-button-tertiary-color: #191919;
900
- --_dso-button-tertiary-hover-color: #4c4c4c;
901
- --_dso-button-tertiary-active-color: #173521;
902
- --_dso-button-tertiary-disabled-color: #999;
903
- background-color: #e4f1d4;
904
- color: #191919;
905
- border-color: #e4f1d4;
906
- }
907
- dso-banner[status=success][icon] .dso-banner-inner::before {
908
- background: url("./di.svg#status-success") no-repeat center;
909
- background-size: cover;
910
- block-size: 24px;
911
- vertical-align: top;
912
- inline-size: 24px;
913
- }
914
- dso-banner[status=error] {
915
- --_dso-alert-success-border-color: #39870c;
916
- --_dso-alert-error-border-color: #ce3f51;
917
- --_dso-alert-info-border-color: #6ca4d9;
918
- --_dso-alert-warning-border-color: #dcd400;
919
- --link-color: currentColor;
920
- --link-hover-color: currentColor;
921
- --link-visited-color: currentColor;
922
- }
923
- dso-banner[status=error] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
924
- background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
925
- }
926
- dso-banner[status=error] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
927
- background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
928
- }
929
- dso-banner[status=error] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
930
- background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
931
- }
932
- dso-banner[status=error] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
933
- background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
934
- }
935
- dso-banner[status=error] {
936
- --_dso-icon-button-tertiary-color: #191919;
937
- --_dso-icon-button-tertiary-hover-color: #4c4c4c;
938
- --_dso-icon-button-tertiary-active-color: #173521;
939
- --_dso-icon-button-tertiary-disabled-color: #999;
940
- --_dso-button-tertiary-color: #191919;
941
- --_dso-button-tertiary-hover-color: #4c4c4c;
942
- --_dso-button-tertiary-active-color: #173521;
943
- --_dso-button-tertiary-disabled-color: #999;
944
- background-color: #f5d8dc;
945
- color: #191919;
946
- border-color: #f5d8dc;
947
- }
948
- dso-banner[status=error][icon] .dso-banner-inner::before {
949
- background: url("./di.svg#status-error") no-repeat center;
950
- background-size: cover;
951
- block-size: 24px;
952
- vertical-align: top;
953
- inline-size: 24px;
954
- }
955
- dso-banner[status=info] {
956
- --_dso-alert-success-border-color: #39870c;
957
- --_dso-alert-error-border-color: #ce3f51;
958
- --_dso-alert-info-border-color: #6ca4d9;
959
- --_dso-alert-warning-border-color: #dcd400;
960
- --link-color: currentColor;
961
- --link-hover-color: currentColor;
962
- --link-visited-color: currentColor;
963
- }
964
- dso-banner[status=info] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
965
- background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
966
- }
967
- dso-banner[status=info] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
968
- background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
969
- }
970
- dso-banner[status=info] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
971
- background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
972
- }
973
- dso-banner[status=info] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
974
- background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
975
- }
976
- dso-banner[status=info] {
977
- --_dso-icon-button-tertiary-color: #191919;
978
- --_dso-icon-button-tertiary-hover-color: #4c4c4c;
979
- --_dso-icon-button-tertiary-active-color: #173521;
980
- --_dso-icon-button-tertiary-disabled-color: #999;
981
- --_dso-button-tertiary-color: #191919;
982
- --_dso-button-tertiary-hover-color: #4c4c4c;
983
- --_dso-button-tertiary-active-color: #173521;
984
- --_dso-button-tertiary-disabled-color: #999;
985
- background-color: #e1ecf7;
986
- color: #191919;
987
- border-color: #e1ecf7;
988
- }
989
- dso-banner[status=info][icon] .dso-banner-inner::before {
990
- background: url("./di.svg#status-info-solid") no-repeat center;
991
- background-size: cover;
992
- block-size: 24px;
993
- vertical-align: top;
994
- inline-size: 24px;
995
- }
996
- dso-banner[status=warning] {
997
- --_dso-alert-success-border-color: #39870c;
998
- --_dso-alert-error-border-color: #ce3f51;
999
- --_dso-alert-info-border-color: #6ca4d9;
1000
- --_dso-alert-warning-border-color: #dcd400;
1001
- --link-color: currentColor;
1002
- --link-hover-color: currentColor;
1003
- --link-visited-color: currentColor;
1004
- }
1005
- dso-banner[status=warning] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
1006
- background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
1007
- }
1008
- dso-banner[status=warning] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
1009
- background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
1010
- }
1011
- dso-banner[status=warning] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
1012
- background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
1013
- }
1014
- dso-banner[status=warning] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
1015
- background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
1016
- }
1017
- dso-banner[status=warning] {
1018
- --_dso-icon-button-tertiary-color: #191919;
1019
- --_dso-icon-button-tertiary-hover-color: #4c4c4c;
1020
- --_dso-icon-button-tertiary-active-color: #173521;
1021
- --_dso-icon-button-tertiary-disabled-color: #999;
1022
- --_dso-button-tertiary-color: #191919;
1023
- --_dso-button-tertiary-hover-color: #4c4c4c;
1024
- --_dso-button-tertiary-active-color: #173521;
1025
- --_dso-button-tertiary-disabled-color: #999;
1026
- background-color: #f8f6cc;
1027
- color: #191919;
1028
- border-color: #f8f6cc;
1029
- }
1030
- dso-banner[status=warning][icon] .dso-banner-inner::before {
1031
- background: url("./di.svg#status-warning") no-repeat center;
1032
- background-size: cover;
1033
- block-size: 24px;
1034
- vertical-align: top;
1035
- inline-size: 24px;
1036
- }
1037
-
1038
514
  blockquote {
1039
515
  border-inline-start: 5px solid #e5e5e5;
1040
516
  font-size: 1.25rem;
@@ -2209,50 +1685,6 @@ a.dso-tertiary, a.dso-tertiary:visited {
2209
1685
  flex-wrap: nowrap;
2210
1686
  }
2211
1687
 
2212
- dso-card-container[mode=list] > li {
2213
- border-block-start: 1px solid #ccc;
2214
- }
2215
-
2216
- dso-card-container[mode=grid] dso-card {
2217
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
2218
- }
2219
-
2220
- .dso-card-grid {
2221
- display: grid;
2222
- gap: 32px;
2223
- grid-auto-rows: 1fr;
2224
- }
2225
- .dso-card-grid .dso-card {
2226
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
2227
- }
2228
- @media (max-width: 991px) {
2229
- .dso-card-grid {
2230
- grid-template-columns: repeat(1, 1fr);
2231
- }
2232
- }
2233
- @media (min-width: 992px) and (max-width: 1199px) {
2234
- .dso-card-grid {
2235
- grid-template-columns: repeat(2, 1fr);
2236
- }
2237
- }
2238
- @media (min-width: 1200px) {
2239
- .dso-card-grid {
2240
- grid-template-columns: repeat(3, 1fr);
2241
- }
2242
- }
2243
-
2244
- ul.dso-card-list,
2245
- ol.dso-card-list {
2246
- padding-inline-start: 0;
2247
- list-style: none;
2248
- border-block-end: 1px solid #ccc;
2249
- margin-block-start: -1px;
2250
- }
2251
- ul.dso-card-list > li,
2252
- ol.dso-card-list > li {
2253
- border-block-start: 1px solid #ccc;
2254
- }
2255
-
2256
1688
  code {
2257
1689
  background-color: #f9f2f4;
2258
1690
  border-radius: 4px;
@@ -2685,9 +2117,16 @@ del a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [hr
2685
2117
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
2686
2118
  }
2687
2119
  del {
2120
+ --_dso-icon-button-secondary-active-color: #fff;
2121
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
2122
+ --_dso-icon-button-secondary-toggled-color: #fff;
2123
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
2124
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
2688
2125
  --_dso-icon-button-tertiary-color: #191919;
2689
2126
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
2690
- --_dso-icon-button-tertiary-active-color: #173521;
2127
+ --_dso-icon-button-tertiary-active-color: #1f472c;
2128
+ --_dso-icon-button-tertiary-toggled-color: #275937;
2129
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
2691
2130
  --_dso-icon-button-tertiary-disabled-color: #999;
2692
2131
  --_dso-button-tertiary-color: #191919;
2693
2132
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -2842,9 +2281,16 @@ dso-document-component[not-applicable] dso-document-component[not-applicable] {
2842
2281
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
2843
2282
  }
2844
2283
  .dso-document-header {
2284
+ --_dso-icon-button-secondary-active-color: #fff;
2285
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
2286
+ --_dso-icon-button-secondary-toggled-color: #fff;
2287
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
2288
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
2845
2289
  --_dso-icon-button-tertiary-color: #191919;
2846
2290
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
2847
- --_dso-icon-button-tertiary-active-color: #173521;
2291
+ --_dso-icon-button-tertiary-active-color: #1f472c;
2292
+ --_dso-icon-button-tertiary-toggled-color: #275937;
2293
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
2848
2294
  --_dso-icon-button-tertiary-disabled-color: #999;
2849
2295
  --_dso-button-tertiary-color: #191919;
2850
2296
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -2893,9 +2339,16 @@ dso-document-component[not-applicable] dso-document-component[not-applicable] {
2893
2339
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
2894
2340
  }
2895
2341
  .dso-document-header.dso-variant-ontwerp .dso-document-header-status {
2342
+ --_dso-icon-button-secondary-active-color: #fff;
2343
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
2344
+ --_dso-icon-button-secondary-toggled-color: #fff;
2345
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
2346
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
2896
2347
  --_dso-icon-button-tertiary-color: #191919;
2897
2348
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
2898
- --_dso-icon-button-tertiary-active-color: #173521;
2349
+ --_dso-icon-button-tertiary-active-color: #1f472c;
2350
+ --_dso-icon-button-tertiary-toggled-color: #275937;
2351
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
2899
2352
  --_dso-icon-button-tertiary-disabled-color: #999;
2900
2353
  --_dso-button-tertiary-color: #191919;
2901
2354
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -2926,8 +2379,16 @@ dso-document-component[not-applicable] dso-document-component[not-applicable] {
2926
2379
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"));
2927
2380
  }
2928
2381
  .dso-document-header.dso-variant-besluitversie .dso-document-header-status {
2929
- --_dso-icon-button-tertiary-color: #fff;
2930
- --_dso-icon-button-tertiary-hover-color: #e5e5e5;
2382
+ --_dso-icon-button-secondary-active-color: #fff;
2383
+ --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);
2384
+ --_dso-icon-button-secondary-toggled-color: #fff;
2385
+ --_dso-icon-button-secondary-toggled-background-color: rgba(255, 255, 255, 0.2);
2386
+ --_dso-icon-button-secondary-toggled-hover-background-color: rgba(255, 255, 255, 0.3);
2387
+ --_dso-icon-button-tertiary-color: #f2f2f2;
2388
+ --_dso-icon-button-tertiary-hover-color: #fff;
2389
+ --_dso-icon-button-tertiary-active-color: rgba(255, 255, 255, 0.4);
2390
+ --_dso-icon-button-tertiary-toggled-color: #fff;
2391
+ --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3);
2931
2392
  --_dso-icon-button-tertiary-disabled-color: #b2b2b2;
2932
2393
  --_dso-button-primary-background-color: #fff;
2933
2394
  --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);
@@ -3728,9 +3189,16 @@ footer a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"],
3728
3189
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
3729
3190
  }
3730
3191
  footer {
3192
+ --_dso-icon-button-secondary-active-color: #fff;
3193
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
3194
+ --_dso-icon-button-secondary-toggled-color: #fff;
3195
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
3196
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
3731
3197
  --_dso-icon-button-tertiary-color: #191919;
3732
3198
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
3733
- --_dso-icon-button-tertiary-active-color: #173521;
3199
+ --_dso-icon-button-tertiary-active-color: #1f472c;
3200
+ --_dso-icon-button-tertiary-toggled-color: #275937;
3201
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
3734
3202
  --_dso-icon-button-tertiary-disabled-color: #999;
3735
3203
  --_dso-button-tertiary-color: #191919;
3736
3204
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -5413,6 +4881,7 @@ h2,
5413
4881
 
5414
4882
  h2 {
5415
4883
  color: var(--_dt-heading-h2-color, #275937);
4884
+ float: var(--_dt-heading-h2-first-child-float, none);
5416
4885
  font-size: var(--_dt-heading-h2-font-size-xs, 1.25rem);
5417
4886
  font-weight: 700;
5418
4887
  }
@@ -5511,9 +4980,16 @@ h6,
5511
4980
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
5512
4981
  }
5513
4982
  .dso-highlight-box:not(.dso-white, .dso-yellow, .dso-border, .dso-green) {
4983
+ --_dso-icon-button-secondary-active-color: #fff;
4984
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
4985
+ --_dso-icon-button-secondary-toggled-color: #fff;
4986
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
4987
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
5514
4988
  --_dso-icon-button-tertiary-color: #191919;
5515
4989
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
5516
- --_dso-icon-button-tertiary-active-color: #173521;
4990
+ --_dso-icon-button-tertiary-active-color: #1f472c;
4991
+ --_dso-icon-button-tertiary-toggled-color: #275937;
4992
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
5517
4993
  --_dso-icon-button-tertiary-disabled-color: #999;
5518
4994
  --_dso-button-tertiary-color: #191919;
5519
4995
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -5544,9 +5020,16 @@ h6,
5544
5020
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
5545
5021
  }
5546
5022
  .dso-highlight-box.dso-grey {
5023
+ --_dso-icon-button-secondary-active-color: #fff;
5024
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
5025
+ --_dso-icon-button-secondary-toggled-color: #fff;
5026
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
5027
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
5547
5028
  --_dso-icon-button-tertiary-color: #191919;
5548
5029
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
5549
- --_dso-icon-button-tertiary-active-color: #173521;
5030
+ --_dso-icon-button-tertiary-active-color: #1f472c;
5031
+ --_dso-icon-button-tertiary-toggled-color: #275937;
5032
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
5550
5033
  --_dso-icon-button-tertiary-disabled-color: #999;
5551
5034
  --_dso-button-tertiary-color: #191919;
5552
5035
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -5585,9 +5068,16 @@ h6,
5585
5068
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
5586
5069
  }
5587
5070
  .dso-highlight-box.dso-yellow {
5071
+ --_dso-icon-button-secondary-active-color: #fff;
5072
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
5073
+ --_dso-icon-button-secondary-toggled-color: #fff;
5074
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
5075
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
5588
5076
  --_dso-icon-button-tertiary-color: #191919;
5589
5077
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
5590
- --_dso-icon-button-tertiary-active-color: #173521;
5078
+ --_dso-icon-button-tertiary-active-color: #1f472c;
5079
+ --_dso-icon-button-tertiary-toggled-color: #275937;
5080
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
5591
5081
  --_dso-icon-button-tertiary-disabled-color: #999;
5592
5082
  --_dso-button-tertiary-color: #191919;
5593
5083
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -5618,9 +5108,16 @@ h6,
5618
5108
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
5619
5109
  }
5620
5110
  .dso-highlight-box.dso-green {
5111
+ --_dso-icon-button-secondary-active-color: #fff;
5112
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
5113
+ --_dso-icon-button-secondary-toggled-color: #fff;
5114
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
5115
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
5621
5116
  --_dso-icon-button-tertiary-color: #191919;
5622
5117
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
5623
- --_dso-icon-button-tertiary-active-color: #173521;
5118
+ --_dso-icon-button-tertiary-active-color: #1f472c;
5119
+ --_dso-icon-button-tertiary-toggled-color: #275937;
5120
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
5624
5121
  --_dso-icon-button-tertiary-disabled-color: #999;
5625
5122
  --_dso-button-tertiary-color: #191919;
5626
5123
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -5768,9 +5265,16 @@ dso-highlight-box:not([white], [yellow], [border], [green]) a:not(.dso-primary,
5768
5265
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
5769
5266
  }
5770
5267
  dso-highlight-box:not([white], [yellow], [border], [green]) {
5268
+ --_dso-icon-button-secondary-active-color: #fff;
5269
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
5270
+ --_dso-icon-button-secondary-toggled-color: #fff;
5271
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
5272
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
5771
5273
  --_dso-icon-button-tertiary-color: #191919;
5772
5274
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
5773
- --_dso-icon-button-tertiary-active-color: #173521;
5275
+ --_dso-icon-button-tertiary-active-color: #1f472c;
5276
+ --_dso-icon-button-tertiary-toggled-color: #275937;
5277
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
5774
5278
  --_dso-icon-button-tertiary-disabled-color: #999;
5775
5279
  --_dso-button-tertiary-color: #191919;
5776
5280
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -5801,9 +5305,16 @@ dso-highlight-box[grey] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([h
5801
5305
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
5802
5306
  }
5803
5307
  dso-highlight-box[grey] {
5308
+ --_dso-icon-button-secondary-active-color: #fff;
5309
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
5310
+ --_dso-icon-button-secondary-toggled-color: #fff;
5311
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
5312
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
5804
5313
  --_dso-icon-button-tertiary-color: #191919;
5805
5314
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
5806
- --_dso-icon-button-tertiary-active-color: #173521;
5315
+ --_dso-icon-button-tertiary-active-color: #1f472c;
5316
+ --_dso-icon-button-tertiary-toggled-color: #275937;
5317
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
5807
5318
  --_dso-icon-button-tertiary-disabled-color: #999;
5808
5319
  --_dso-button-tertiary-color: #191919;
5809
5320
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -5842,9 +5353,16 @@ dso-highlight-box[yellow] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(
5842
5353
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
5843
5354
  }
5844
5355
  dso-highlight-box[yellow] {
5356
+ --_dso-icon-button-secondary-active-color: #fff;
5357
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
5358
+ --_dso-icon-button-secondary-toggled-color: #fff;
5359
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
5360
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
5845
5361
  --_dso-icon-button-tertiary-color: #191919;
5846
5362
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
5847
- --_dso-icon-button-tertiary-active-color: #173521;
5363
+ --_dso-icon-button-tertiary-active-color: #1f472c;
5364
+ --_dso-icon-button-tertiary-toggled-color: #275937;
5365
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
5848
5366
  --_dso-icon-button-tertiary-disabled-color: #999;
5849
5367
  --_dso-button-tertiary-color: #191919;
5850
5368
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -5875,9 +5393,16 @@ dso-highlight-box[green] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([
5875
5393
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
5876
5394
  }
5877
5395
  dso-highlight-box[green] {
5396
+ --_dso-icon-button-secondary-active-color: #fff;
5397
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
5398
+ --_dso-icon-button-secondary-toggled-color: #fff;
5399
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
5400
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
5878
5401
  --_dso-icon-button-tertiary-color: #191919;
5879
5402
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
5880
- --_dso-icon-button-tertiary-active-color: #173521;
5403
+ --_dso-icon-button-tertiary-active-color: #1f472c;
5404
+ --_dso-icon-button-tertiary-toggled-color: #275937;
5405
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
5881
5406
  --_dso-icon-button-tertiary-disabled-color: #999;
5882
5407
  --_dso-button-tertiary-color: #191919;
5883
5408
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -6049,9 +5574,16 @@ img {
6049
5574
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
6050
5575
  }
6051
5576
  .dso-info:not(.dso-accordion-section) {
5577
+ --_dso-icon-button-secondary-active-color: #fff;
5578
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
5579
+ --_dso-icon-button-secondary-toggled-color: #fff;
5580
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
5581
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
6052
5582
  --_dso-icon-button-tertiary-color: #191919;
6053
5583
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
6054
- --_dso-icon-button-tertiary-active-color: #173521;
5584
+ --_dso-icon-button-tertiary-active-color: #1f472c;
5585
+ --_dso-icon-button-tertiary-toggled-color: #275937;
5586
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
6055
5587
  --_dso-icon-button-tertiary-disabled-color: #999;
6056
5588
  --_dso-button-tertiary-color: #191919;
6057
5589
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -6106,9 +5638,16 @@ img {
6106
5638
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
6107
5639
  }
6108
5640
  .dso-info:not(.dso-accordion-section) {
5641
+ --_dso-icon-button-secondary-active-color: #fff;
5642
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
5643
+ --_dso-icon-button-secondary-toggled-color: #fff;
5644
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
5645
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
6109
5646
  --_dso-icon-button-tertiary-color: #191919;
6110
5647
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
6111
- --_dso-icon-button-tertiary-active-color: #173521;
5648
+ --_dso-icon-button-tertiary-active-color: #1f472c;
5649
+ --_dso-icon-button-tertiary-toggled-color: #275937;
5650
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
6112
5651
  --_dso-icon-button-tertiary-disabled-color: #999;
6113
5652
  --_dso-button-tertiary-color: #191919;
6114
5653
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -6181,9 +5720,16 @@ dso-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"]
6181
5720
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
6182
5721
  }
6183
5722
  dso-info {
5723
+ --_dso-icon-button-secondary-active-color: #fff;
5724
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
5725
+ --_dso-icon-button-secondary-toggled-color: #fff;
5726
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
5727
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
6184
5728
  --_dso-icon-button-tertiary-color: #191919;
6185
5729
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
6186
- --_dso-icon-button-tertiary-active-color: #173521;
5730
+ --_dso-icon-button-tertiary-active-color: #1f472c;
5731
+ --_dso-icon-button-tertiary-toggled-color: #275937;
5732
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
6187
5733
  --_dso-icon-button-tertiary-disabled-color: #999;
6188
5734
  --_dso-button-tertiary-color: #191919;
6189
5735
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -6294,9 +5840,16 @@ ins a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [hr
6294
5840
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
6295
5841
  }
6296
5842
  ins {
5843
+ --_dso-icon-button-secondary-active-color: #fff;
5844
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
5845
+ --_dso-icon-button-secondary-toggled-color: #fff;
5846
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
5847
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
6297
5848
  --_dso-icon-button-tertiary-color: #191919;
6298
5849
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
6299
- --_dso-icon-button-tertiary-active-color: #173521;
5850
+ --_dso-icon-button-tertiary-active-color: #1f472c;
5851
+ --_dso-icon-button-tertiary-toggled-color: #275937;
5852
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
6300
5853
  --_dso-icon-button-tertiary-disabled-color: #999;
6301
5854
  --_dso-button-tertiary-color: #191919;
6302
5855
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -6996,8 +6549,12 @@ pre {
6996
6549
  block-size: auto;
6997
6550
  max-inline-size: 100%;
6998
6551
  }
6552
+ .dso-rich-content {
6553
+ padding-inline-end: var(--_dt-rich-content-padding-inline-end, 0);
6554
+ }
6999
6555
  .dso-rich-content > :first-child:not(hr, .dso-button-row) {
7000
6556
  margin-block-start: var(--_dt-rich-content-margin-block-start, 8px);
6557
+ margin-inline-end: var(--_dt-rich-content-margin-inline-end, 0);
7001
6558
  }
7002
6559
  .dso-rich-content > :last-child:not(hr, .dso-button-row) {
7003
6560
  margin-block-end: var(--_dt-rich-content-margin-block-end, 8px);
@@ -7189,9 +6746,16 @@ optgroup {
7189
6746
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
7190
6747
  }
7191
6748
  .dso-shopping-cart .dso-status {
6749
+ --_dso-icon-button-secondary-active-color: #fff;
6750
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
6751
+ --_dso-icon-button-secondary-toggled-color: #fff;
6752
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
6753
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
7192
6754
  --_dso-icon-button-tertiary-color: #191919;
7193
6755
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
7194
- --_dso-icon-button-tertiary-active-color: #173521;
6756
+ --_dso-icon-button-tertiary-active-color: #1f472c;
6757
+ --_dso-icon-button-tertiary-toggled-color: #275937;
6758
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
7195
6759
  --_dso-icon-button-tertiary-disabled-color: #999;
7196
6760
  --_dso-button-tertiary-color: #191919;
7197
6761
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -7251,9 +6815,16 @@ optgroup {
7251
6815
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
7252
6816
  }
7253
6817
  .dso-shopping-cart .dso-contents {
6818
+ --_dso-icon-button-secondary-active-color: #fff;
6819
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
6820
+ --_dso-icon-button-secondary-toggled-color: #fff;
6821
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
6822
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
7254
6823
  --_dso-icon-button-tertiary-color: #191919;
7255
6824
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
7256
- --_dso-icon-button-tertiary-active-color: #173521;
6825
+ --_dso-icon-button-tertiary-active-color: #1f472c;
6826
+ --_dso-icon-button-tertiary-toggled-color: #275937;
6827
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
7257
6828
  --_dso-icon-button-tertiary-disabled-color: #999;
7258
6829
  --_dso-button-tertiary-color: #191919;
7259
6830
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -7306,9 +6877,16 @@ optgroup {
7306
6877
  }
7307
6878
  .dso-shopping-cart ul,
7308
6879
  .dso-shopping-cart ol {
6880
+ --_dso-icon-button-secondary-active-color: #fff;
6881
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
6882
+ --_dso-icon-button-secondary-toggled-color: #fff;
6883
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
6884
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
7309
6885
  --_dso-icon-button-tertiary-color: #191919;
7310
6886
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
7311
- --_dso-icon-button-tertiary-active-color: #173521;
6887
+ --_dso-icon-button-tertiary-active-color: #1f472c;
6888
+ --_dso-icon-button-tertiary-toggled-color: #275937;
6889
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
7312
6890
  --_dso-icon-button-tertiary-disabled-color: #999;
7313
6891
  --_dso-button-tertiary-color: #191919;
7314
6892
  --_dso-button-tertiary-hover-color: #4c4c4c;