dso-toolkit 79.0.0-pre.4 → 79.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.
package/CHANGELOG.md CHANGED
@@ -5,32 +5,28 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) a
5
5
 
6
6
  ## Next
7
7
 
8
- ## 🧽 Release 79.0.0-pre.4 - 2025-09-18
8
+ ## 🧽 Release 79.0.0 - 2025-09-18
9
9
 
10
- ### Fixed
11
- * Header: Hamburger menu toegankelijkheid kapot voor Loket ([#3287](https://github.com/dso-toolkit/dso-toolkit/issues/3287))
10
+ ### Changed
11
+ * **BREAKING** Breadcrumbs: Breadcrumb met "s" ([#3210](https://github.com/dso-toolkit/dso-toolkit/issues/3210))
12
+ * Document Header: Varianten voor besluitversies ([#3193](https://github.com/dso-toolkit/dso-toolkit/issues/3193))
13
+ * Ozon Content: Lege bron zorgt voor lege bronvermelding bij Figuur ([#3253](https://github.com/dso-toolkit/dso-toolkit/issues/3253))
14
+ * Label: Border kleur van variant filter aanpassen ([#3290](https://github.com/dso-toolkit/dso-toolkit/issues/3290))
15
+ * Label: Renvooi varianten toevoegen (toegevoegd en verwijderd) ([#3272](https://github.com/dso-toolkit/dso-toolkit/issues/3272))
12
16
 
13
- ## 🧽 Release 79.0.0-pre.3 - 2025-09-16
17
+ ### Deprecated
18
+ * Label: Deprecate HTML/CSS implementatie ([#3317](https://github.com/dso-toolkit/dso-toolkit/issues/3317))
14
19
 
15
20
  ### Fixed
21
+ * Alert: binnen Gereserveerd en Vervallen Document Component mist blauwe achtergrond ([#3257](https://github.com/dso-toolkit/dso-toolkit/issues/3257))
22
+ * CSS Warning: "@charset" must be the first rule in the file [invalid-@charset] ([#3275](https://github.com/dso-toolkit/dso-toolkit/issues/3275))
23
+ * Header: Hamburger menu toegankelijkheid kapot voor Loket ([#3287](https://github.com/dso-toolkit/dso-toolkit/issues/3287))
24
+ * **BREAKING** Header: Verkeerde hoogte bij compacte weergave ([#3268](https://github.com/dso-toolkit/dso-toolkit/issues/3268))
16
25
  * Header: Dropdown Menu met overflow menu items verschijnt niet ([#3351](https://github.com/dso-toolkit/dso-toolkit/issues/3351))
17
26
 
18
- ## 🧽 Release 79.0.0-pre.2 - 2025-09-15
19
-
20
27
  ### Task
21
28
  * Header: e2e-test herschrijven en uitbreiden t.b.v visueel regressie testen ([#2693](https://github.com/dso-toolkit/dso-toolkit/issues/2693))
22
29
 
23
- ## 🧽 Release 79.0.0-pre.1 - 2025-09-01
24
-
25
- ### Fixed
26
- * Header: Hamburger menu toegankelijkheid kapot voor Loket ([#3287](https://github.com/dso-toolkit/dso-toolkit/issues/3287))
27
-
28
- ## 🧽 Release 79.0.0-pre.0 - 2025-08-21
29
-
30
- ### Fixed
31
- * Header: Hamburger menu toegankelijkheid kapot voor Loket ([#3287](https://github.com/dso-toolkit/dso-toolkit/issues/3287))
32
- * **BREAKING** Header: Verkeerde hoogte bij compacte weergave ([#3268](https://github.com/dso-toolkit/dso-toolkit/issues/3268))
33
-
34
30
  ## 🦕 Release 78.1.0 - 2025-08-19
35
31
 
36
32
  ### Added
package/dist/dso.css CHANGED
@@ -1,7 +1,7 @@
1
- /* DSO Toolkit version: "79.0.0-pre.4" */
2
- :root { --dso-toolkit-version: "79.0.0-pre.4" }
1
+ :root {
2
+ --dso-toolkit-version: "79.0.0";
3
+ }
3
4
 
4
- @charset "UTF-8";
5
5
  @font-face {
6
6
  font-family: "Asap";
7
7
  src: url("../assets/fonts/Asap/Asap-VariableFont_wdth,wght.ttf") format("truetype supports variations"), url("../assets/fonts/Asap/Asap-VariableFont_wdth,wght.ttf") format("truetype-variations");
@@ -74,20 +74,6 @@
74
74
  margin-block-start: 32px;
75
75
  }
76
76
 
77
- /* Genereert een `transition` met vaste easing en optionele duur en delay per property.
78
- **
79
- ** @param {ArgList} $transitions...
80
- ** - "property": gebruikt standaard duur (260ms) en delay (0ms)
81
- ** - ("property", duur): eigen duur, geen delay
82
- ** - ("property", duur, delay): eigen duur én delay
83
- **
84
- ** @example
85
- ** @include transition(opacity, ("transform", 300ms), ("color", 500ms, 200ms));
86
- **
87
- ** @output
88
- ** transition: [property] [duration] cubic-bezier(0.4, 0, 0.2, 1) [delay];
89
- **
90
- */
91
77
  .text-right {
92
78
  text-align: end;
93
79
  }
@@ -1881,25 +1867,25 @@ blockquote p:last-child {
1881
1867
  margin-block-end: 0;
1882
1868
  }
1883
1869
 
1884
- ol.breadcrumb::before, ol.breadcrumb::after {
1870
+ ol.dso-breadcrumbs::before, ol.dso-breadcrumbs::after {
1885
1871
  display: table;
1886
1872
  content: " ";
1887
1873
  }
1888
- ol.breadcrumb::after {
1874
+ ol.dso-breadcrumbs::after {
1889
1875
  clear: both;
1890
1876
  }
1891
- ol.breadcrumb {
1877
+ ol.dso-breadcrumbs {
1892
1878
  list-style: none;
1893
1879
  margin-block-end: 16px;
1894
1880
  margin-block-start: 16px;
1895
1881
  padding-block: 0;
1896
1882
  padding-inline: 8px;
1897
1883
  }
1898
- ol.breadcrumb > li {
1884
+ ol.dso-breadcrumbs > li {
1899
1885
  display: flex;
1900
1886
  float: inline-start;
1901
1887
  }
1902
- ol.breadcrumb > li + li::before {
1888
+ ol.dso-breadcrumbs > li + li::before {
1903
1889
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 21.1 55.7' %3E%3Cpath fill='%23666' d='M0 45.6c0-.1.1-.4.4-1.1L14.9 8.6c.2-.5.5-.8 1-1 .5-.2 1.1-.3 1.9-.3h.7c1.8 0 2.6.3 2.6.8 0 .2-.1.6-.4 1.1l-14.5 36c-.2.5-.5.8-1 1-.4.2-1.1.2-1.9.2h-.8c-1.7 0-2.5-.2-2.5-.8z'/%3E%3C/svg%3E");
1904
1890
  background-position: center;
1905
1891
  background-repeat: no-repeat;
@@ -1911,16 +1897,16 @@ ol.breadcrumb > li + li::before {
1911
1897
  inline-size: 7px;
1912
1898
  inset-block-start: 1px;
1913
1899
  }
1914
- ol.breadcrumb > li.active {
1900
+ ol.dso-breadcrumbs > li.active {
1915
1901
  color: #666;
1916
1902
  }
1917
- ol.breadcrumb > li > a {
1903
+ ol.dso-breadcrumbs > li > a {
1918
1904
  text-decoration: none;
1919
1905
  }
1920
- ol.breadcrumb > li > a:hover, ol.breadcrumb > li > a:focus-visible, ol.breadcrumb > li > a:active {
1906
+ ol.dso-breadcrumbs > li > a:hover, ol.dso-breadcrumbs > li > a:focus-visible, ol.dso-breadcrumbs > li > a:active {
1921
1907
  text-decoration: underline;
1922
1908
  }
1923
- ol.breadcrumb > li > a, ol.breadcrumb > li > a:visited {
1909
+ ol.dso-breadcrumbs > li > a, ol.dso-breadcrumbs > li > a:visited {
1924
1910
  color: #39870c;
1925
1911
  }
1926
1912
 
@@ -3572,33 +3558,96 @@ dso-document-component[not-applicable] dso-document-component[not-applicable] {
3572
3558
  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
3573
3559
  }
3574
3560
  .dso-document-header {
3575
- padding: 16px;
3576
- margin-inline-start: -16px;
3577
- margin-inline-end: -16px;
3561
+ padding-block: 8px 16px;
3562
+ padding-inline: 24px;
3563
+ margin-inline: -16px -16px;
3564
+ }
3565
+ .dso-document-header:has(.dso-document-header-status) {
3566
+ padding-block-start: 0;
3567
+ }
3568
+ .dso-document-header h1, .dso-document-header h2, .dso-document-header h3, .dso-document-header h4, .dso-document-header h5, .dso-document-header h6, .dso-document-header .h1, .dso-document-header .h2, .dso-document-header .h3, .dso-document-header .h4, .dso-document-header .h5, .dso-document-header .h6 {
3569
+ font-size: 1.5rem;
3570
+ line-height: 1.5;
3578
3571
  }
3579
3572
  .dso-document-header h1 button, .dso-document-header h2 button, .dso-document-header h3 button, .dso-document-header h4 button, .dso-document-header h5 button, .dso-document-header h6 button, .dso-document-header .h1 button, .dso-document-header .h2 button, .dso-document-header .h3 button, .dso-document-header .h4 button, .dso-document-header .h5 button, .dso-document-header .h6 button {
3573
+ text-align: start;
3580
3574
  border: 0;
3581
3575
  padding: 0;
3582
3576
  }
3583
3577
  .dso-document-header h1 button svg.di, .dso-document-header h2 button svg.di, .dso-document-header h3 button svg.di, .dso-document-header h4 button svg.di, .dso-document-header h5 button svg.di, .dso-document-header h6 button svg.di, .dso-document-header .h1 button svg.di, .dso-document-header .h2 button svg.di, .dso-document-header .h3 button svg.di, .dso-document-header .h4 button svg.di, .dso-document-header .h5 button svg.di, .dso-document-header .h6 button svg.di {
3584
3578
  display: none;
3585
3579
  }
3580
+ .dso-document-header:not(.dso-document-header-sticky) h1 button, .dso-document-header:not(.dso-document-header-sticky) h2 button, .dso-document-header:not(.dso-document-header-sticky) h3 button, .dso-document-header:not(.dso-document-header-sticky) h4 button, .dso-document-header:not(.dso-document-header-sticky) h5 button, .dso-document-header:not(.dso-document-header-sticky) h6 button, .dso-document-header:not(.dso-document-header-sticky) .h1 button, .dso-document-header:not(.dso-document-header-sticky) .h2 button, .dso-document-header:not(.dso-document-header-sticky) .h3 button, .dso-document-header:not(.dso-document-header-sticky) .h4 button, .dso-document-header:not(.dso-document-header-sticky) .h5 button, .dso-document-header:not(.dso-document-header-sticky) .h6 button {
3581
+ cursor: default;
3582
+ }
3583
+ .dso-document-header.dso-variant-ontwerp .dso-document-header-status {
3584
+ --link-color: currentColor;
3585
+ --link-hover-color: currentColor;
3586
+ --link-visited-color: currentColor;
3587
+ background-color: #dcd400;
3588
+ border-color: #dcd400;
3589
+ color: #191919;
3590
+ }
3591
+ .dso-document-header.dso-variant-ontwerp .dso-document-header-status a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
3592
+ background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
3593
+ }
3594
+ .dso-document-header.dso-variant-ontwerp .dso-document-header-status a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
3595
+ background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
3596
+ }
3597
+ .dso-document-header.dso-variant-ontwerp .dso-document-header-status a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
3598
+ background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
3599
+ }
3600
+ .dso-document-header.dso-variant-ontwerp .dso-document-header-status a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
3601
+ background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
3602
+ }
3603
+ .dso-document-header.dso-variant-ontwerp .dso-document-header-status dso-icon[icon=pencil] {
3604
+ padding: 5px;
3605
+ }
3606
+ .dso-document-header.dso-variant-besluitversie .dso-document-header-status {
3607
+ --link-color: currentColor;
3608
+ --link-hover-color: currentColor;
3609
+ --link-visited-color: currentColor;
3610
+ background-color: #275937;
3611
+ border-color: #275937;
3612
+ color: #fff;
3613
+ }
3614
+ .dso-document-header.dso-variant-besluitversie .dso-document-header-status a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
3615
+ background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
3616
+ }
3617
+ .dso-document-header.dso-variant-besluitversie .dso-document-header-status a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
3618
+ background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
3619
+ }
3620
+ .dso-document-header.dso-variant-besluitversie .dso-document-header-status a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
3621
+ background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
3622
+ }
3623
+ .dso-document-header.dso-variant-besluitversie .dso-document-header-status a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
3624
+ background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
3625
+ }
3626
+ .dso-document-header.dso-variant-besluitversie .dso-document-header-status dso-icon[icon=hammer] {
3627
+ padding-block: 3px;
3628
+ padding-inline: 2px;
3629
+ }
3586
3630
  .dso-document-header.dso-document-header-sticky {
3587
- inset-inline-start: 0;
3588
- padding: 0;
3589
3631
  position: sticky;
3632
+ inset-inline-start: 0;
3590
3633
  inset-block-start: 0;
3634
+ padding-block: 0 calc(8px * 0.5);
3635
+ border-block-start: 4px solid #f2f2f2;
3636
+ }
3637
+ .dso-document-header.dso-document-header-sticky.dso-variant-ontwerp {
3638
+ border-block-start: 4px solid #dcd400;
3639
+ }
3640
+ .dso-document-header.dso-document-header-sticky.dso-variant-besluitversie {
3641
+ border-block-start: 4px solid #275937;
3591
3642
  }
3592
3643
  .dso-document-header.dso-document-header-sticky h1, .dso-document-header.dso-document-header-sticky h2, .dso-document-header.dso-document-header-sticky h3, .dso-document-header.dso-document-header-sticky h4, .dso-document-header.dso-document-header-sticky h5, .dso-document-header.dso-document-header-sticky h6, .dso-document-header.dso-document-header-sticky .h1, .dso-document-header.dso-document-header-sticky .h2, .dso-document-header.dso-document-header-sticky .h3, .dso-document-header.dso-document-header-sticky .h4, .dso-document-header.dso-document-header-sticky .h5, .dso-document-header.dso-document-header-sticky .h6 {
3593
- font-size: 1.25rem;
3594
3644
  margin-block-end: 0;
3595
3645
  }
3596
3646
  .dso-document-header.dso-document-header-sticky h1 button, .dso-document-header.dso-document-header-sticky h2 button, .dso-document-header.dso-document-header-sticky h3 button, .dso-document-header.dso-document-header-sticky h4 button, .dso-document-header.dso-document-header-sticky h5 button, .dso-document-header.dso-document-header-sticky h6 button, .dso-document-header.dso-document-header-sticky .h1 button, .dso-document-header.dso-document-header-sticky .h2 button, .dso-document-header.dso-document-header-sticky .h3 button, .dso-document-header.dso-document-header-sticky .h4 button, .dso-document-header.dso-document-header-sticky .h5 button, .dso-document-header.dso-document-header-sticky .h6 button {
3597
3647
  align-items: center;
3648
+ justify-content: space-between;
3598
3649
  background-color: transparent;
3599
3650
  display: flex;
3600
- padding-block: 7px 8px;
3601
- padding-inline: 16px;
3602
3651
  text-align: start;
3603
3652
  inline-size: 100%;
3604
3653
  }
@@ -3621,20 +3670,22 @@ dso-document-component[not-applicable] dso-document-component[not-applicable] {
3621
3670
  text-overflow: ellipsis;
3622
3671
  white-space: nowrap;
3623
3672
  }
3624
- .dso-document-header.dso-document-header-sticky .dso-document-header-container {
3673
+ .dso-document-header.dso-document-header-sticky .dso-document-header-container,
3674
+ .dso-document-header.dso-document-header-sticky .dso-document-header-status {
3625
3675
  display: none;
3626
3676
  }
3627
- .dso-document-header > :first-child {
3628
- margin-block-start: 0;
3629
- }
3630
- .dso-document-header h1 {
3631
- margin-block-end: 8px;
3677
+ .dso-document-header h1,
3678
+ .dso-document-header h3 {
3679
+ margin-block: 0 8px;
3632
3680
  }
3633
3681
  .dso-document-header .dso-document-header-status {
3634
- align-items: center;
3635
3682
  display: flex;
3636
- flex-wrap: wrap;
3637
- gap: 8px 16px;
3683
+ align-items: center;
3684
+ gap: 8px;
3685
+ padding-block: 0.5rem;
3686
+ padding-inline: 24px;
3687
+ margin-block-end: 8px;
3688
+ margin-inline: -24px -24px;
3638
3689
  }
3639
3690
  .dso-document-header .dso-document-header-status > dso-label,
3640
3691
  .dso-document-header .dso-document-header-status > .dso-label {
@@ -3839,58 +3890,16 @@ dso-document-component[not-applicable] dso-document-component[not-applicable] {
3839
3890
  inset-block-start: 0;
3840
3891
  inset-inline-end: 0;
3841
3892
  }
3842
-
3843
- dso-responsive-element.dso-document-header dl.dso-document-header-features {
3844
- margin-block-start: 16px;
3845
- }
3846
- dso-responsive-element.dso-document-header[small] .dso-document-header-features-wrapper {
3893
+ .dso-document-header .dso-document-header-features-wrapper {
3847
3894
  margin-block-end: 8px;
3848
3895
  }
3849
- dso-responsive-element.dso-document-header[small] .dso-document-header-container::before, dso-responsive-element.dso-document-header[small] .dso-document-header-container::after {
3850
- display: table;
3851
- content: " ";
3852
- }
3853
- dso-responsive-element.dso-document-header[small] .dso-document-header-container::after {
3854
- clear: both;
3855
- }
3856
- dso-responsive-element.dso-document-header[small] .dso-document-header-type,
3857
- dso-responsive-element.dso-document-header[small] .dso-document-header-owner {
3858
- display: block;
3859
- }
3860
- dso-responsive-element.dso-document-header[small] .dso-document-header-type {
3861
- margin-inline-end: 32px;
3862
- }
3863
- dso-responsive-element.dso-document-header[small] .dso-document-header-status {
3864
- margin-block: 0 8px;
3865
- margin-inline: 1;
3866
- }
3867
- dso-responsive-element.dso-document-header[small] dl.dso-document-header-features dt {
3868
- clear: initial;
3869
- float: none;
3870
- inline-size: auto;
3871
- word-wrap: initial;
3872
- }
3873
- dso-responsive-element.dso-document-header[small] dl.dso-document-header-features dd {
3874
- margin-inline-start: 0;
3875
- margin-block-start: 0;
3876
- padding-inline-start: 0;
3877
- }
3878
- dso-responsive-element.dso-document-header:not([small]) .dso-document-header-status {
3879
- margin-block: 8px 0;
3880
- margin-inline: 0;
3881
- }
3882
- dso-responsive-element.dso-document-header:not([small]) .dso-document-header-type {
3883
- margin-inline-end: 8px;
3884
- }
3885
- dso-responsive-element.dso-document-header:not([small]) dl.dso-document-header-features dt {
3886
- inline-size: 20%;
3887
- }
3888
- dso-responsive-element.dso-document-header:not([small]) dl.dso-document-header-features dd {
3889
- margin-inline-start: 20%;
3896
+ .dso-document-header dl.dso-document-header-features {
3897
+ margin-block-start: 16px;
3890
3898
  }
3891
- dso-responsive-element.dso-document-header:not([small]) .dso-document-header-features {
3892
- margin-block-end: 0;
3899
+ .dso-document-header dl.dso-document-header-features:last-child {
3893
3900
  border-block-end: 1px solid #ccc;
3901
+ padding-block-end: 8px;
3902
+ margin-block-end: calc(8px * 0.5);
3894
3903
  }
3895
3904
 
3896
3905
  .dso-document-list {
@@ -6799,7 +6808,7 @@ ins a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [hr
6799
6808
  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
6800
6809
  }
6801
6810
  ins {
6802
- box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
6811
+ box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
6803
6812
  }
6804
6813
 
6805
6814
  .dso-justify-form-groups {
@@ -6954,7 +6963,58 @@ ins {
6954
6963
  color: #191919;
6955
6964
  }
6956
6965
  .dso-label.dso-label-filter {
6957
- border-inline-start: 5px solid #2b5780;
6966
+ border-inline-start: 5px solid #6ca4d9;
6967
+ }
6968
+ .dso-label.dso-label-toegevoegd {
6969
+ --link-color: currentColor;
6970
+ --link-hover-color: currentColor;
6971
+ --link-visited-color: currentColor;
6972
+ background-color: #e4f1d4;
6973
+ border-color: #e4f1d4;
6974
+ color: #191919;
6975
+ }
6976
+ .dso-label.dso-label-toegevoegd a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
6977
+ background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
6978
+ }
6979
+ .dso-label.dso-label-toegevoegd a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
6980
+ background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
6981
+ }
6982
+ .dso-label.dso-label-toegevoegd a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
6983
+ background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
6984
+ }
6985
+ .dso-label.dso-label-toegevoegd a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
6986
+ background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
6987
+ }
6988
+ .dso-label.dso-label-toegevoegd {
6989
+ box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
6990
+ }
6991
+ .dso-label.dso-label-verwijderd {
6992
+ --link-color: currentColor;
6993
+ --link-hover-color: currentColor;
6994
+ --link-visited-color: currentColor;
6995
+ background-color: #f5d8dc;
6996
+ border-color: #f5d8dc;
6997
+ color: #191919;
6998
+ }
6999
+ .dso-label.dso-label-verwijderd a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
7000
+ background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
7001
+ }
7002
+ .dso-label.dso-label-verwijderd a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
7003
+ background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
7004
+ }
7005
+ .dso-label.dso-label-verwijderd a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
7006
+ background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
7007
+ }
7008
+ .dso-label.dso-label-verwijderd a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
7009
+ background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
7010
+ }
7011
+ .dso-label.dso-label-verwijderd {
7012
+ text-decoration: line-through;
7013
+ }
7014
+ @media screen and (min--moz-device-pixel-ratio: 0) {
7015
+ .dso-label.dso-label-verwijderd {
7016
+ font-family: sans-serif;
7017
+ }
6958
7018
  }
6959
7019
  .dso-label.dso-compact {
6960
7020
  padding-block: 0;