dso-toolkit 80.0.0 → 81.1.0

package/dist/dso.css

@@ -1,5 +1,5 @@
 :root {
-  --dso-toolkit-version: "80.0.0";
+  --dso-toolkit-version: "81.1.0";
 }
 
 @font-face {
@@ -1533,8 +1533,7 @@ dso-alert a:active {
   inset-inline-end: 16px;
   inset-block-start: 0;
 }
-.dso-banner .dso-banner-inner button dso-icon,
-.dso-banner .dso-banner-inner button svg.di {
+.dso-banner .dso-banner-inner button dso-icon {
   color: #000;
 }
 .dso-banner .dso-banner-inner > .dso-rich-content {
@@ -1786,8 +1785,7 @@ dso-banner .dso-banner-inner button {
   inset-inline-end: 16px;
   inset-block-start: 0;
 }
-dso-banner .dso-banner-inner button dso-icon,
-dso-banner .dso-banner-inner button svg.di {
+dso-banner .dso-banner-inner button dso-icon {
   color: #000;
 }
 dso-banner .dso-banner-inner > .dso-rich-content {
@@ -2171,15 +2169,12 @@ button.dso-primary.dso-small,
 label.dso-primary.dso-small {
   line-height: 1rem;
 }
-a.dso-primary.dso-small dso-icon,
-a.dso-primary.dso-small svg.di, a.dso-primary.dso-small.extern::after, a.dso-primary.dso-small.download::after, a.dso-primary.dso-small.dso-spinner::before,
+a.dso-primary.dso-small dso-icon, a.dso-primary.dso-small.extern::after, a.dso-primary.dso-small.download::after, a.dso-primary.dso-small.dso-spinner::before,
 button.dso-primary.dso-small dso-icon,
-button.dso-primary.dso-small svg.di,
 button.dso-primary.dso-small.extern::after,
 button.dso-primary.dso-small.download::after,
 button.dso-primary.dso-small.dso-spinner::before,
 label.dso-primary.dso-small dso-icon,
-label.dso-primary.dso-small svg.di,
 label.dso-primary.dso-small.extern::after,
 label.dso-primary.dso-small.download::after,
 label.dso-primary.dso-small.dso-spinner::before {
@@ -2203,15 +2198,12 @@ button.dso-primary.dso-extra-small,
 label.dso-primary.dso-extra-small {
   line-height: 1rem;
 }
-a.dso-primary.dso-extra-small dso-icon,
-a.dso-primary.dso-extra-small svg.di, a.dso-primary.dso-extra-small.extern::after, a.dso-primary.dso-extra-small.download::after, a.dso-primary.dso-extra-small.dso-spinner::before,
+a.dso-primary.dso-extra-small dso-icon, a.dso-primary.dso-extra-small.extern::after, a.dso-primary.dso-extra-small.download::after, a.dso-primary.dso-extra-small.dso-spinner::before,
 button.dso-primary.dso-extra-small dso-icon,
-button.dso-primary.dso-extra-small svg.di,
 button.dso-primary.dso-extra-small.extern::after,
 button.dso-primary.dso-extra-small.download::after,
 button.dso-primary.dso-extra-small.dso-spinner::before,
 label.dso-primary.dso-extra-small dso-icon,
-label.dso-primary.dso-extra-small svg.di,
 label.dso-primary.dso-extra-small.extern::after,
 label.dso-primary.dso-extra-small.download::after,
 label.dso-primary.dso-extra-small.dso-spinner::before {
@@ -2236,28 +2228,19 @@ label.dso-primary.dso-extra-small {
   padding-block: 9px;
 }
 a.dso-primary dso-icon:has(+ span:not(.sr-only)),
-a.dso-primary svg.di:has(+ span:not(.sr-only)),
 button.dso-primary dso-icon:has(+ span:not(.sr-only)),
-button.dso-primary svg.di:has(+ span:not(.sr-only)),
-label.dso-primary dso-icon:has(+ span:not(.sr-only)),
-label.dso-primary svg.di:has(+ span:not(.sr-only)) {
+label.dso-primary dso-icon:has(+ span:not(.sr-only)) {
   margin-inline-start: -8px;
 }
 a.dso-primary span:not(.sr-only) + dso-icon,
-a.dso-primary span:not(.sr-only) + svg.di,
 button.dso-primary span:not(.sr-only) + dso-icon,
-button.dso-primary span:not(.sr-only) + svg.di,
-label.dso-primary span:not(.sr-only) + dso-icon,
-label.dso-primary span:not(.sr-only) + svg.di {
+label.dso-primary span:not(.sr-only) + dso-icon {
   margin-inline-start: 8px;
   margin-inline-end: -8px;
 }
 a.dso-primary dso-icon + span:not(.sr-only),
-a.dso-primary svg.di + span:not(.sr-only),
 button.dso-primary dso-icon + span:not(.sr-only),
-button.dso-primary svg.di + span:not(.sr-only),
-label.dso-primary dso-icon + span:not(.sr-only),
-label.dso-primary svg.di + span:not(.sr-only) {
+label.dso-primary dso-icon + span:not(.sr-only) {
   margin-inline-start: 8px;
 }
 a.dso-primary.dso-spinner-left[disabled], a.dso-primary.dso-spinner-right[disabled],
@@ -2391,15 +2374,12 @@ button.dso-secondary.dso-small,
 label.dso-secondary.dso-small {
   line-height: 1rem;
 }
-a.dso-secondary.dso-small dso-icon,
-a.dso-secondary.dso-small svg.di, a.dso-secondary.dso-small.extern::after, a.dso-secondary.dso-small.download::after, a.dso-secondary.dso-small.dso-spinner::before,
+a.dso-secondary.dso-small dso-icon, a.dso-secondary.dso-small.extern::after, a.dso-secondary.dso-small.download::after, a.dso-secondary.dso-small.dso-spinner::before,
 button.dso-secondary.dso-small dso-icon,
-button.dso-secondary.dso-small svg.di,
 button.dso-secondary.dso-small.extern::after,
 button.dso-secondary.dso-small.download::after,
 button.dso-secondary.dso-small.dso-spinner::before,
 label.dso-secondary.dso-small dso-icon,
-label.dso-secondary.dso-small svg.di,
 label.dso-secondary.dso-small.extern::after,
 label.dso-secondary.dso-small.download::after,
 label.dso-secondary.dso-small.dso-spinner::before {
@@ -2423,15 +2403,12 @@ button.dso-secondary.dso-extra-small,
 label.dso-secondary.dso-extra-small {
   line-height: 1rem;
 }
-a.dso-secondary.dso-extra-small dso-icon,
-a.dso-secondary.dso-extra-small svg.di, a.dso-secondary.dso-extra-small.extern::after, a.dso-secondary.dso-extra-small.download::after, a.dso-secondary.dso-extra-small.dso-spinner::before,
+a.dso-secondary.dso-extra-small dso-icon, a.dso-secondary.dso-extra-small.extern::after, a.dso-secondary.dso-extra-small.download::after, a.dso-secondary.dso-extra-small.dso-spinner::before,
 button.dso-secondary.dso-extra-small dso-icon,
-button.dso-secondary.dso-extra-small svg.di,
 button.dso-secondary.dso-extra-small.extern::after,
 button.dso-secondary.dso-extra-small.download::after,
 button.dso-secondary.dso-extra-small.dso-spinner::before,
 label.dso-secondary.dso-extra-small dso-icon,
-label.dso-secondary.dso-extra-small svg.di,
 label.dso-secondary.dso-extra-small.extern::after,
 label.dso-secondary.dso-extra-small.download::after,
 label.dso-secondary.dso-extra-small.dso-spinner::before {
@@ -2456,28 +2433,19 @@ label.dso-secondary.dso-extra-small {
   padding-block: 9px;
 }
 a.dso-secondary dso-icon:has(+ span:not(.sr-only)),
-a.dso-secondary svg.di:has(+ span:not(.sr-only)),
 button.dso-secondary dso-icon:has(+ span:not(.sr-only)),
-button.dso-secondary svg.di:has(+ span:not(.sr-only)),
-label.dso-secondary dso-icon:has(+ span:not(.sr-only)),
-label.dso-secondary svg.di:has(+ span:not(.sr-only)) {
+label.dso-secondary dso-icon:has(+ span:not(.sr-only)) {
   margin-inline-start: -8px;
 }
 a.dso-secondary span:not(.sr-only) + dso-icon,
-a.dso-secondary span:not(.sr-only) + svg.di,
 button.dso-secondary span:not(.sr-only) + dso-icon,
-button.dso-secondary span:not(.sr-only) + svg.di,
-label.dso-secondary span:not(.sr-only) + dso-icon,
-label.dso-secondary span:not(.sr-only) + svg.di {
+label.dso-secondary span:not(.sr-only) + dso-icon {
   margin-inline-start: 8px;
   margin-inline-end: -8px;
 }
 a.dso-secondary dso-icon + span:not(.sr-only),
-a.dso-secondary svg.di + span:not(.sr-only),
 button.dso-secondary dso-icon + span:not(.sr-only),
-button.dso-secondary svg.di + span:not(.sr-only),
-label.dso-secondary dso-icon + span:not(.sr-only),
-label.dso-secondary svg.di + span:not(.sr-only) {
+label.dso-secondary dso-icon + span:not(.sr-only) {
   margin-inline-start: 8px;
 }
 a.dso-secondary.dso-spinner-left[disabled], a.dso-secondary.dso-spinner-right[disabled],
@@ -2695,67 +2663,32 @@ label.dso-tertiary.dso-spinner-right::after {
   margin-inline-start: 8px;
 }
 a.dso-tertiary dso-icon + span:not(.sr-only),
-a.dso-tertiary svg.di + span:not(.sr-only),
 a.dso-tertiary span:not(.sr-only) + dso-icon,
-a.dso-tertiary span:not(.sr-only) + svg.di,
 button.dso-tertiary dso-icon + span:not(.sr-only),
-button.dso-tertiary svg.di + span:not(.sr-only),
 button.dso-tertiary span:not(.sr-only) + dso-icon,
-button.dso-tertiary span:not(.sr-only) + svg.di,
 label.dso-tertiary dso-icon + span:not(.sr-only),
-label.dso-tertiary svg.di + span:not(.sr-only),
-label.dso-tertiary span:not(.sr-only) + dso-icon,
-label.dso-tertiary span:not(.sr-only) + svg.di {
+label.dso-tertiary span:not(.sr-only) + dso-icon {
   margin-inline-start: 8px;
 }
-a.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),
-a.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),
-a.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,
-a.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up,
-button.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),
-button.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),
-button.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,
-button.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up,
-label.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),
-label.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),
-label.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,
-label.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {
-  margin-inline-start: 4px;
-}
 a.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
 a.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
-a.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),
-a.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),
-a.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,
-a.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,
 a.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
 a.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],
 button.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
 button.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
-button.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),
-button.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),
-button.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,
-button.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,
 button.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
 button.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],
 label.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
 label.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
-label.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),
-label.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),
-label.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,
-label.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,
 label.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
 label.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {
   margin-inline-start: 0;
 }
 a.dso-tertiary dso-icon,
-a.dso-tertiary svg.di,
 a.dso-tertiary span,
 button.dso-tertiary dso-icon,
-button.dso-tertiary svg.di,
 button.dso-tertiary span,
 label.dso-tertiary dso-icon,
-label.dso-tertiary svg.di,
 label.dso-tertiary span {
   vertical-align: middle;
 }
@@ -2880,15 +2813,12 @@ button.dso-map.dso-small,
 label.dso-map.dso-small {
   line-height: 1rem;
 }
-a.dso-map.dso-small dso-icon,
-a.dso-map.dso-small svg.di, a.dso-map.dso-small.extern::after, a.dso-map.dso-small.download::after, a.dso-map.dso-small.dso-spinner::before,
+a.dso-map.dso-small dso-icon, a.dso-map.dso-small.extern::after, a.dso-map.dso-small.download::after, a.dso-map.dso-small.dso-spinner::before,
 button.dso-map.dso-small dso-icon,
-button.dso-map.dso-small svg.di,
 button.dso-map.dso-small.extern::after,
 button.dso-map.dso-small.download::after,
 button.dso-map.dso-small.dso-spinner::before,
 label.dso-map.dso-small dso-icon,
-label.dso-map.dso-small svg.di,
 label.dso-map.dso-small.extern::after,
 label.dso-map.dso-small.download::after,
 label.dso-map.dso-small.dso-spinner::before {
@@ -2912,15 +2842,12 @@ button.dso-map.dso-extra-small,
 label.dso-map.dso-extra-small {
   line-height: 1rem;
 }
-a.dso-map.dso-extra-small dso-icon,
-a.dso-map.dso-extra-small svg.di, a.dso-map.dso-extra-small.extern::after, a.dso-map.dso-extra-small.download::after, a.dso-map.dso-extra-small.dso-spinner::before,
+a.dso-map.dso-extra-small dso-icon, a.dso-map.dso-extra-small.extern::after, a.dso-map.dso-extra-small.download::after, a.dso-map.dso-extra-small.dso-spinner::before,
 button.dso-map.dso-extra-small dso-icon,
-button.dso-map.dso-extra-small svg.di,
 button.dso-map.dso-extra-small.extern::after,
 button.dso-map.dso-extra-small.download::after,
 button.dso-map.dso-extra-small.dso-spinner::before,
 label.dso-map.dso-extra-small dso-icon,
-label.dso-map.dso-extra-small svg.di,
 label.dso-map.dso-extra-small.extern::after,
 label.dso-map.dso-extra-small.download::after,
 label.dso-map.dso-extra-small.dso-spinner::before {
@@ -2945,28 +2872,19 @@ label.dso-map.dso-extra-small {
   padding-block: 9px;
 }
 a.dso-map dso-icon:has(+ span:not(.sr-only)),
-a.dso-map svg.di:has(+ span:not(.sr-only)),
 button.dso-map dso-icon:has(+ span:not(.sr-only)),
-button.dso-map svg.di:has(+ span:not(.sr-only)),
-label.dso-map dso-icon:has(+ span:not(.sr-only)),
-label.dso-map svg.di:has(+ span:not(.sr-only)) {
+label.dso-map dso-icon:has(+ span:not(.sr-only)) {
   margin-inline-start: -8px;
 }
 a.dso-map span:not(.sr-only) + dso-icon,
-a.dso-map span:not(.sr-only) + svg.di,
 button.dso-map span:not(.sr-only) + dso-icon,
-button.dso-map span:not(.sr-only) + svg.di,
-label.dso-map span:not(.sr-only) + dso-icon,
-label.dso-map span:not(.sr-only) + svg.di {
+label.dso-map span:not(.sr-only) + dso-icon {
   margin-inline-start: 8px;
   margin-inline-end: -8px;
 }
 a.dso-map dso-icon + span:not(.sr-only),
-a.dso-map svg.di + span:not(.sr-only),
 button.dso-map dso-icon + span:not(.sr-only),
-button.dso-map svg.di + span:not(.sr-only),
-label.dso-map dso-icon + span:not(.sr-only),
-label.dso-map svg.di + span:not(.sr-only) {
+label.dso-map dso-icon + span:not(.sr-only) {
   margin-inline-start: 8px;
 }
 a.dso-map.dso-spinner-left[disabled], a.dso-map.dso-spinner-right[disabled],
@@ -3056,9 +2974,9 @@ label.dso-map:focus,
 label.dso-map:focus-visible {
   outline-offset: -1px;
 }
-a.dso-map:has(span.sr-only):has(dso-icon, svg.di),
-button.dso-map:has(span.sr-only):has(dso-icon, svg.di),
-label.dso-map:has(span.sr-only):has(dso-icon, svg.di) {
+a.dso-map:has(span.sr-only):has(dso-icon),
+button.dso-map:has(span.sr-only):has(dso-icon),
+label.dso-map:has(span.sr-only):has(dso-icon) {
   padding: 8px;
   min-inline-size: auto;
   block-size: 40px;
@@ -3196,13 +3114,9 @@ a.dso-tertiary, a.dso-tertiary:visited {
   margin-inline-end: 4px;
 }
 .dso-card .dso-card-heading h2:first-child span + dso-icon,
-.dso-card .dso-card-heading h2:first-child span + svg.di,
 .dso-card .dso-card-heading h3:first-child span + dso-icon,
-.dso-card .dso-card-heading h3:first-child span + svg.di,
 .dso-card .dso-card-heading h4:first-child span + dso-icon,
-.dso-card .dso-card-heading h4:first-child span + svg.di,
-.dso-card .dso-card-heading h5:first-child span + dso-icon,
-.dso-card .dso-card-heading h5:first-child span + svg.di {
+.dso-card .dso-card-heading h5:first-child span + dso-icon {
   flex-shrink: 0;
   position: relative;
 }
@@ -3691,7 +3605,9 @@ del a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [hr
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
 del {
+  --_dso-ozon-content-toggletip-color: colors.$zwart;
   text-decoration: line-through;
+  --_dso-ozon-content-toggletip-text-decoration: underline line-through;
 }
 @media screen and (min--moz-device-pixel-ratio: 0) {
   del {
@@ -3860,9 +3776,6 @@ dso-document-component[not-applicable] dso-document-component[not-applicable] {
   border: 0;
   padding: 0;
 }
-.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 {
-  display: none;
-}
 .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 {
   cursor: default;
 }
@@ -4112,67 +4025,32 @@ dso-document-component[not-applicable] dso-document-component[not-applicable] {
   margin-inline-start: 8px;
 }
 .dso-document-header .dso-document-header-map-action dso-icon + span:not(.sr-only),
-.dso-document-header .dso-document-header-map-action svg.di + span:not(.sr-only),
 .dso-document-header .dso-document-header-map-action span:not(.sr-only) + dso-icon,
-.dso-document-header .dso-document-header-map-action span:not(.sr-only) + svg.di,
 .dso-document-header .dso-document-header-toggle-features dso-icon + span:not(.sr-only),
-.dso-document-header .dso-document-header-toggle-features svg.di + span:not(.sr-only),
 .dso-document-header .dso-document-header-toggle-features span:not(.sr-only) + dso-icon,
-.dso-document-header .dso-document-header-toggle-features span:not(.sr-only) + svg.di,
 .dso-document-header .dso-document-header-toggle-status dso-icon + span:not(.sr-only),
-.dso-document-header .dso-document-header-toggle-status svg.di + span:not(.sr-only),
-.dso-document-header .dso-document-header-toggle-status span:not(.sr-only) + dso-icon,
-.dso-document-header .dso-document-header-toggle-status span:not(.sr-only) + svg.di {
+.dso-document-header .dso-document-header-toggle-status span:not(.sr-only) + dso-icon {
   margin-inline-start: 8px;
 }
-.dso-document-header .dso-document-header-map-action svg.di.di-chevron-down + span:not(.sr-only),
-.dso-document-header .dso-document-header-map-action svg.di.di-chevron-up + span:not(.sr-only),
-.dso-document-header .dso-document-header-map-action span:not(.sr-only) + svg.di.di-chevron-down,
-.dso-document-header .dso-document-header-map-action span:not(.sr-only) + svg.di.di-chevron-up,
-.dso-document-header .dso-document-header-toggle-features svg.di.di-chevron-down + span:not(.sr-only),
-.dso-document-header .dso-document-header-toggle-features svg.di.di-chevron-up + span:not(.sr-only),
-.dso-document-header .dso-document-header-toggle-features span:not(.sr-only) + svg.di.di-chevron-down,
-.dso-document-header .dso-document-header-toggle-features span:not(.sr-only) + svg.di.di-chevron-up,
-.dso-document-header .dso-document-header-toggle-status svg.di.di-chevron-down + span:not(.sr-only),
-.dso-document-header .dso-document-header-toggle-status svg.di.di-chevron-up + span:not(.sr-only),
-.dso-document-header .dso-document-header-toggle-status span:not(.sr-only) + svg.di.di-chevron-down,
-.dso-document-header .dso-document-header-toggle-status span:not(.sr-only) + svg.di.di-chevron-up {
-  margin-inline-start: 4px;
-}
 .dso-document-header .dso-document-header-map-action dso-icon[icon=chevron-left] + span:not(.sr-only),
 .dso-document-header .dso-document-header-map-action dso-icon[icon=chevron-right] + span:not(.sr-only),
-.dso-document-header .dso-document-header-map-action svg.di.di-angle-down + span:not(.sr-only),
-.dso-document-header .dso-document-header-map-action svg.di.di-angle-up + span:not(.sr-only),
-.dso-document-header .dso-document-header-map-action span:not(.sr-only) + svg.di.di-angle-down,
-.dso-document-header .dso-document-header-map-action span:not(.sr-only) + svg.di.di-angle-up,
 .dso-document-header .dso-document-header-map-action span:not(.sr-only) + dso-icon[icon=chevron-left],
 .dso-document-header .dso-document-header-map-action span:not(.sr-only) + dso-icon[icon=chevron-right],
 .dso-document-header .dso-document-header-toggle-features dso-icon[icon=chevron-left] + span:not(.sr-only),
 .dso-document-header .dso-document-header-toggle-features dso-icon[icon=chevron-right] + span:not(.sr-only),
-.dso-document-header .dso-document-header-toggle-features svg.di.di-angle-down + span:not(.sr-only),
-.dso-document-header .dso-document-header-toggle-features svg.di.di-angle-up + span:not(.sr-only),
-.dso-document-header .dso-document-header-toggle-features span:not(.sr-only) + svg.di.di-angle-down,
-.dso-document-header .dso-document-header-toggle-features span:not(.sr-only) + svg.di.di-angle-up,
 .dso-document-header .dso-document-header-toggle-features span:not(.sr-only) + dso-icon[icon=chevron-left],
 .dso-document-header .dso-document-header-toggle-features span:not(.sr-only) + dso-icon[icon=chevron-right],
 .dso-document-header .dso-document-header-toggle-status dso-icon[icon=chevron-left] + span:not(.sr-only),
 .dso-document-header .dso-document-header-toggle-status dso-icon[icon=chevron-right] + span:not(.sr-only),
-.dso-document-header .dso-document-header-toggle-status svg.di.di-angle-down + span:not(.sr-only),
-.dso-document-header .dso-document-header-toggle-status svg.di.di-angle-up + span:not(.sr-only),
-.dso-document-header .dso-document-header-toggle-status span:not(.sr-only) + svg.di.di-angle-down,
-.dso-document-header .dso-document-header-toggle-status span:not(.sr-only) + svg.di.di-angle-up,
 .dso-document-header .dso-document-header-toggle-status span:not(.sr-only) + dso-icon[icon=chevron-left],
 .dso-document-header .dso-document-header-toggle-status span:not(.sr-only) + dso-icon[icon=chevron-right] {
   margin-inline-start: 0;
 }
 .dso-document-header .dso-document-header-map-action dso-icon,
-.dso-document-header .dso-document-header-map-action svg.di,
 .dso-document-header .dso-document-header-map-action span,
 .dso-document-header .dso-document-header-toggle-features dso-icon,
-.dso-document-header .dso-document-header-toggle-features svg.di,
 .dso-document-header .dso-document-header-toggle-features span,
 .dso-document-header .dso-document-header-toggle-status dso-icon,
-.dso-document-header .dso-document-header-toggle-status svg.di,
 .dso-document-header .dso-document-header-toggle-status span {
   vertical-align: middle;
 }
@@ -5130,8 +5008,7 @@ form .dso-form-group-collection > legend h6, .dso-section-body .dso-form-group-c
   margin-block: 4px;
   margin-inline: 0;
 }
-.form-group.dso-files .dso-filelist li > dso-icon,
-.form-group.dso-files .dso-filelist li > svg.di {
+.form-group.dso-files .dso-filelist li > dso-icon {
   flex: 0 0 24px;
   block-size: 24px;
   margin-block: 4px;
@@ -5150,31 +5027,27 @@ form .dso-form-group-collection > legend h6, .dso-section-body .dso-form-group-c
 .form-group.dso-files .dso-filelist:has(.dso-download) .dso-upload-loading + .dso-download {
   margin-inline-start: 40px;
 }
-.form-group.dso-files .dso-filelist:has(.dso-download) dso-icon + .dso-remove,
-.form-group.dso-files .dso-filelist:has(.dso-download) svg.di + .dso-remove {
+.form-group.dso-files .dso-filelist:has(.dso-download) dso-icon + .dso-remove {
   margin-inline-start: 40px;
 }
 @media screen and (max-width: 991px) {
   .form-group.dso-files .dso-filelist:has(.dso-download) li:has(.dso-download) .dso-selectable + .dso-download,
   .form-group.dso-files .dso-filelist:has(.dso-download) li:has(.dso-download) dso-selectable + .dso-download,
   .form-group.dso-files .dso-filelist:has(.dso-download) li:has(.dso-download) .dso-upload-loading + .dso-download,
-  .form-group.dso-files .dso-filelist:has(.dso-download) li:has(.dso-download) dso-icon + .dso-download,
-  .form-group.dso-files .dso-filelist:has(.dso-download) li:has(.dso-download) svg.di + .dso-download {
+  .form-group.dso-files .dso-filelist:has(.dso-download) li:has(.dso-download) dso-icon + .dso-download {
     margin-inline-start: auto;
   }
   .form-group.dso-files .dso-filelist:has(.dso-download) li:not(:has(.dso-download)) .dso-selectable + .dso-remove,
   .form-group.dso-files .dso-filelist:has(.dso-download) li:not(:has(.dso-download)) dso-selectable + .dso-remove,
   .form-group.dso-files .dso-filelist:has(.dso-download) li:not(:has(.dso-download)) .dso-upload-loading + .dso-remove,
-  .form-group.dso-files .dso-filelist:has(.dso-download) li:not(:has(.dso-download)) dso-icon + .dso-remove,
-  .form-group.dso-files .dso-filelist:has(.dso-download) li:not(:has(.dso-download)) svg.di + .dso-remove {
+  .form-group.dso-files .dso-filelist:has(.dso-download) li:not(:has(.dso-download)) dso-icon + .dso-remove {
     margin-inline-start: auto;
   }
 }
 @media screen and (max-width: 991px) {
   .form-group.dso-files .dso-filelist:not(:has(.dso-download)) .dso-selectable + .dso-remove,
   .form-group.dso-files .dso-filelist:not(:has(.dso-download)) dso-selectable + .dso-remove,
-  .form-group.dso-files .dso-filelist:not(:has(.dso-download)) dso-icon + .dso-remove,
-  .form-group.dso-files .dso-filelist:not(:has(.dso-download)) svg.di + .dso-remove {
+  .form-group.dso-files .dso-filelist:not(:has(.dso-download)) dso-icon + .dso-remove {
     margin-inline-start: auto;
   }
 }
@@ -5225,7 +5098,7 @@ form .dso-form-group-collection > legend h6, .dso-section-body .dso-form-group-c
 
 .form-group.dso-form-group-search-bar .dso-search-bar {
   margin-block-end: 0;
-  inline-size: 50%;
+  inline-size: 100%;
 }
 
 .form-horizontal .form-group.dso-form-group-search-bar .dso-search-bar {
@@ -5382,8 +5255,7 @@ form .dso-form-group-collection > legend h6, .dso-section-body .dso-form-group-c
   inline-size: 48px;
   z-index: 101;
 }
-.form-group.has-feedback .form-control-feedback dso-icon,
-.form-group.has-feedback .form-control-feedback svg.di {
+.form-group.has-feedback .form-control-feedback dso-icon {
   margin-block-start: 7px;
 }
 .form-group.dso-invalid .form-control {
@@ -6616,8 +6488,7 @@ h6,
   margin-block-end: 0 !important;
 }
 .dso-highlight-box .dso-tertiary:not([disabled]):hover,
-.dso-highlight-box .dso-tertiary:not([disabled]):hover dso-icon,
-.dso-highlight-box .dso-tertiary:not([disabled]):hover svg.di {
+.dso-highlight-box .dso-tertiary:not([disabled]):hover dso-icon {
   text-decoration: underline;
 }
 .dso-highlight-box:not(.dso-border):not(.dso-white) .dso-button-row .dso-tertiary.extern::after {
@@ -6650,7 +6521,6 @@ h6,
 .dso-highlight-box.dso-yellow .dso-tertiary:not([disabled]), .dso-highlight-box:not(.dso-border):not(.dso-white) .dso-tertiary:not([disabled]) {
   color: #000;
 }
-.dso-highlight-box .dso-step-counter > svg.di,
 .dso-highlight-box .dso-step-counter > dso-icon {
   margin-block-start: 0.25rem;
 }
@@ -6826,8 +6696,7 @@ dso-highlight-box > *:last-child {
   margin-block-end: 0 !important;
 }
 dso-highlight-box .dso-tertiary:not([disabled]):hover,
-dso-highlight-box .dso-tertiary:not([disabled]):hover dso-icon,
-dso-highlight-box .dso-tertiary:not([disabled]):hover svg.di {
+dso-highlight-box .dso-tertiary:not([disabled]):hover dso-icon {
   text-decoration: underline;
 }
 dso-highlight-box:not([border]):not([white]) .dso-button-row .dso-tertiary.extern::after {
@@ -6836,7 +6705,6 @@ dso-highlight-box:not([border]):not([white]) .dso-button-row .dso-tertiary.exter
 dso-highlight-box:not([border]):not([white]) .dso-button-row .dso-tertiary.download::after {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
-dso-highlight-box svg.di[slot=icon],
 dso-highlight-box dso-icon[slot=icon] {
   margin-block-start: 0.25rem;
 }
@@ -6885,12 +6753,6 @@ hr {
   margin-block-start: 16px;
 }
 
-svg.di {
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-}
-
 img {
   border: 0;
   vertical-align: middle;
@@ -6975,10 +6837,8 @@ img {
   color: #000;
 }
 .dso-info:not(.dso-accordion-section) .dso-rich-content .dso-tertiary:not([disabled]):hover,
-.dso-info:not(.dso-accordion-section) .dso-rich-content .dso-tertiary:not([disabled]):hover dso-icon,
-.dso-info:not(.dso-accordion-section) .dso-rich-content .dso-tertiary:not([disabled]):hover svg.di, .dso-info:not(.dso-accordion-section) .dso-rich-content .dso-tertiary:not([disabled]):focus,
-.dso-info:not(.dso-accordion-section) .dso-rich-content .dso-tertiary:not([disabled]):focus dso-icon,
-.dso-info:not(.dso-accordion-section) .dso-rich-content .dso-tertiary:not([disabled]):focus svg.di {
+.dso-info:not(.dso-accordion-section) .dso-rich-content .dso-tertiary:not([disabled]):hover dso-icon, .dso-info:not(.dso-accordion-section) .dso-rich-content .dso-tertiary:not([disabled]):focus,
+.dso-info:not(.dso-accordion-section) .dso-rich-content .dso-tertiary:not([disabled]):focus dso-icon {
   color: #666;
   text-decoration: underline;
 }
@@ -7048,10 +6908,8 @@ dso-info .dso-rich-content .dso-tertiary:not([disabled]) {
   color: #000;
 }
 dso-info .dso-rich-content .dso-tertiary:not([disabled]):hover,
-dso-info .dso-rich-content .dso-tertiary:not([disabled]):hover dso-icon,
-dso-info .dso-rich-content .dso-tertiary:not([disabled]):hover svg.di, dso-info .dso-rich-content .dso-tertiary:not([disabled]):focus,
-dso-info .dso-rich-content .dso-tertiary:not([disabled]):focus dso-icon,
-dso-info .dso-rich-content .dso-tertiary:not([disabled]):focus svg.di {
+dso-info .dso-rich-content .dso-tertiary:not([disabled]):hover dso-icon, dso-info .dso-rich-content .dso-tertiary:not([disabled]):focus,
+dso-info .dso-rich-content .dso-tertiary:not([disabled]):focus dso-icon {
   color: #666;
   text-decoration: underline;
 }
@@ -7201,6 +7059,7 @@ ins a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [hr
 }
 ins {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
+  --_dso-ozon-content-toggletip-color: colors.$zwart;
 }
 
 .dso-justify-form-groups {
@@ -7533,6 +7392,7 @@ ins {
 }
 .dso-label.dso-label-toegevoegd {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
+  --_dso-ozon-content-toggletip-color: colors.$zwart;
 }
 .dso-label.dso-label-verwijderd {
   --_dso-alert-success-border-color: #39870c;
@@ -7562,7 +7422,9 @@ ins {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
 .dso-label.dso-label-verwijderd {
+  --_dso-ozon-content-toggletip-color: colors.$zwart;
   text-decoration: line-through;
+  --_dso-ozon-content-toggletip-text-decoration: underline line-through;
 }
 @media screen and (min--moz-device-pixel-ratio: 0) {
   .dso-label.dso-label-verwijderd {
@@ -7606,8 +7468,7 @@ ins {
 .dso-label button:hover {
   cursor: pointer;
 }
-.dso-label button > dso-icon,
-.dso-label button > svg.di {
+.dso-label button > dso-icon {
   display: block;
 }
 
@@ -7659,11 +7520,11 @@ a:hover, a:focus-visible {
 a:active {
   text-decoration: none;
 }
-a :is(dso-icon, svg.di) + span,
-a span + :is(dso-icon, svg.di) {
+a dso-icon + span,
+a span + dso-icon {
   margin-inline-start: 8px;
 }
-a .sr-only + :is(dso-icon, svg.di) {
+a .sr-only + dso-icon {
   margin-inline-start: 0;
 }
 a:visited {
@@ -8316,8 +8177,7 @@ nav .dso-link-list a:visited {
   padding-block: 5px;
   padding-inline: 0;
 }
-.dso-navbar .dso-navbar-toggle dso-icon,
-.dso-navbar .dso-navbar-toggle svg.di {
+.dso-navbar .dso-navbar-toggle dso-icon {
   margin-inline-start: 8px;
   margin-inline-end: 8px;
 }
@@ -8443,7 +8303,6 @@ nav .dso-link-list a:visited {
   font-weight: 600;
   color: #39870c;
 }
-.dso-navbar + .dso-navbar-extension .dso-navbar-extension-expand-button svg.di,
 .dso-navbar + .dso-navbar-extension .dso-navbar-extension-expand-button dso-icon {
   margin-inline-end: 8px;
 }
@@ -8981,10 +8840,8 @@ dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]) {
   color: #000;
 }
 dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):hover,
-dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):hover dso-icon,
-dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):hover svg.di, dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):focus,
-dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):focus dso-icon,
-dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):focus svg.di {
+dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):hover dso-icon, dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):focus,
+dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):focus dso-icon {
   color: #666;
   text-decoration: underline;
 }
@@ -9027,16 +8884,14 @@ dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):focus
   position: relative;
   text-align: start;
 }
-.dso-shopping-cart .dso-status dso-icon,
-.dso-shopping-cart .dso-status svg.di {
+.dso-shopping-cart .dso-status dso-icon {
   transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   inset-inline-start: 16px;
   position: absolute;
   margin-inline-end: 8px;
   transform: rotate(0);
 }
-.dso-shopping-cart .dso-status[aria-expanded=true] dso-icon,
-.dso-shopping-cart .dso-status[aria-expanded=true] svg.di {
+.dso-shopping-cart .dso-status[aria-expanded=true] dso-icon {
   transform: rotate(90deg);
 }
 .dso-shopping-cart span.dso-status {
@@ -9149,8 +9004,7 @@ dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):focus
   padding-block-start: 16px;
   position: relative;
 }
-.dso-shopping-cart li > dso-icon,
-.dso-shopping-cart li > svg.di {
+.dso-shopping-cart li > dso-icon {
   float: inline-start;
   block-size: 24px;
   margin-inline-end: 8px;
@@ -9396,9 +9250,9 @@ table.table,
   max-inline-size: 100%;
   inline-size: 100%;
 }
-table.table .dso-tertiary,
+table.table .dso-tertiary:not(dso-ozon-content-toggletip *),
 table.table dso-icon-button,
-.dso-rich-content table .dso-tertiary,
+.dso-rich-content table .dso-tertiary:not(dso-ozon-content-toggletip *),
 .dso-rich-content table dso-icon-button {
   position: relative;
   inset-block-start: -2px;
@@ -9602,28 +9456,16 @@ table.table > thead > tr > th .dso-primary.dso-sort, table.table > thead > tr >
   color: #191919;
   font-weight: 600;
 }
-table.table > thead > tr > th .dso-primary.dso-sort dso-icon,
-table.table > thead > tr > th .dso-primary.dso-sort svg.di, table.table > thead > tr > th .dso-secondary.dso-sort dso-icon,
-table.table > thead > tr > th .dso-secondary.dso-sort svg.di, table.table > thead > tr > th .dso-tertiary.dso-sort dso-icon,
-table.table > thead > tr > th .dso-tertiary.dso-sort svg.di,
+table.table > thead > tr > th .dso-primary.dso-sort dso-icon, table.table > thead > tr > th .dso-secondary.dso-sort dso-icon, table.table > thead > tr > th .dso-tertiary.dso-sort dso-icon,
 .dso-rich-content table > thead > tr > th .dso-primary.dso-sort dso-icon,
-.dso-rich-content table > thead > tr > th .dso-primary.dso-sort svg.di,
 .dso-rich-content table > thead > tr > th .dso-secondary.dso-sort dso-icon,
-.dso-rich-content table > thead > tr > th .dso-secondary.dso-sort svg.di,
-.dso-rich-content table > thead > tr > th .dso-tertiary.dso-sort dso-icon,
-.dso-rich-content table > thead > tr > th .dso-tertiary.dso-sort svg.di {
+.dso-rich-content table > thead > tr > th .dso-tertiary.dso-sort dso-icon {
   color: #666;
 }
-table.table > thead > tr > th .dso-primary.dso-sort dso-icon.dso-sort-active,
-table.table > thead > tr > th .dso-primary.dso-sort svg.di.dso-sort-active, table.table > thead > tr > th .dso-secondary.dso-sort dso-icon.dso-sort-active,
-table.table > thead > tr > th .dso-secondary.dso-sort svg.di.dso-sort-active, table.table > thead > tr > th .dso-tertiary.dso-sort dso-icon.dso-sort-active,
-table.table > thead > tr > th .dso-tertiary.dso-sort svg.di.dso-sort-active,
+table.table > thead > tr > th .dso-primary.dso-sort dso-icon.dso-sort-active, table.table > thead > tr > th .dso-secondary.dso-sort dso-icon.dso-sort-active, table.table > thead > tr > th .dso-tertiary.dso-sort dso-icon.dso-sort-active,
 .dso-rich-content table > thead > tr > th .dso-primary.dso-sort dso-icon.dso-sort-active,
-.dso-rich-content table > thead > tr > th .dso-primary.dso-sort svg.di.dso-sort-active,
 .dso-rich-content table > thead > tr > th .dso-secondary.dso-sort dso-icon.dso-sort-active,
-.dso-rich-content table > thead > tr > th .dso-secondary.dso-sort svg.di.dso-sort-active,
-.dso-rich-content table > thead > tr > th .dso-tertiary.dso-sort dso-icon.dso-sort-active,
-.dso-rich-content table > thead > tr > th .dso-tertiary.dso-sort svg.di.dso-sort-active {
+.dso-rich-content table > thead > tr > th .dso-tertiary.dso-sort dso-icon.dso-sort-active {
   color: #191919;
 }
 
@@ -9989,29 +9831,16 @@ dso-viewer-grid .dso-toggle-main-button.dso-spinner-right::after {
   margin-inline-start: 8px;
 }
 dso-viewer-grid .dso-toggle-main-button dso-icon + span:not(.sr-only),
-dso-viewer-grid .dso-toggle-main-button svg.di + span:not(.sr-only),
-dso-viewer-grid .dso-toggle-main-button span:not(.sr-only) + dso-icon,
-dso-viewer-grid .dso-toggle-main-button span:not(.sr-only) + svg.di {
+dso-viewer-grid .dso-toggle-main-button span:not(.sr-only) + dso-icon {
   margin-inline-start: 8px;
 }
-dso-viewer-grid .dso-toggle-main-button svg.di.di-chevron-down + span:not(.sr-only),
-dso-viewer-grid .dso-toggle-main-button svg.di.di-chevron-up + span:not(.sr-only),
-dso-viewer-grid .dso-toggle-main-button span:not(.sr-only) + svg.di.di-chevron-down,
-dso-viewer-grid .dso-toggle-main-button span:not(.sr-only) + svg.di.di-chevron-up {
-  margin-inline-start: 4px;
-}
 dso-viewer-grid .dso-toggle-main-button dso-icon[icon=chevron-left] + span:not(.sr-only),
 dso-viewer-grid .dso-toggle-main-button dso-icon[icon=chevron-right] + span:not(.sr-only),
-dso-viewer-grid .dso-toggle-main-button svg.di.di-angle-down + span:not(.sr-only),
-dso-viewer-grid .dso-toggle-main-button svg.di.di-angle-up + span:not(.sr-only),
-dso-viewer-grid .dso-toggle-main-button span:not(.sr-only) + svg.di.di-angle-down,
-dso-viewer-grid .dso-toggle-main-button span:not(.sr-only) + svg.di.di-angle-up,
 dso-viewer-grid .dso-toggle-main-button span:not(.sr-only) + dso-icon[icon=chevron-left],
 dso-viewer-grid .dso-toggle-main-button span:not(.sr-only) + dso-icon[icon=chevron-right] {
   margin-inline-start: 0;
 }
 dso-viewer-grid .dso-toggle-main-button dso-icon,
-dso-viewer-grid .dso-toggle-main-button svg.di,
 dso-viewer-grid .dso-toggle-main-button span {
   vertical-align: middle;
 }