@dso-toolkit/core 103.0.0 → 104.0.0

package/dist/collection/components/ozon-content/ozon-content.css

@@ -69,9 +69,11 @@ label.dso-primary {
   padding-block: 11px;
   padding-inline: 15px;
 }
-a.dso-primary:hover,
+a.dso-primary:hover, a.dso-primary:focus-visible,
 button.dso-primary:hover,
-label.dso-primary:hover {
+button.dso-primary:focus-visible,
+label.dso-primary:hover,
+label.dso-primary:focus-visible {
   background-color: var(--_dso-button-primary-hover-background-color, #275937);
   border-color: var(--_dso-button-primary-hover-border-color, #275937);
   color: var(--_dso-button-primary-hover-color, #fff);
@@ -85,11 +87,13 @@ label.dso-primary:active {
   color: var(--_dso-button-primary-active-color, #fff);
   float: var(--_dso-button-float-primary, none);
 }
-a.dso-primary[disabled], a.dso-primary[disabled]:hover,
+a.dso-primary[disabled], a.dso-primary[disabled]:hover, a.dso-primary[disabled]:focus-visible,
 button.dso-primary[disabled],
 button.dso-primary[disabled]:hover,
+button.dso-primary[disabled]:focus-visible,
 label.dso-primary[disabled],
-label.dso-primary[disabled]:hover {
+label.dso-primary[disabled]:hover,
+label.dso-primary[disabled]:focus-visible {
   background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d);
   border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-primary-disabled-color, #fff);
@@ -279,9 +283,11 @@ label.dso-secondary {
   padding-block: 11px;
   padding-inline: 15px;
 }
-a.dso-secondary:hover,
+a.dso-secondary:hover, a.dso-secondary:focus-visible,
 button.dso-secondary:hover,
-label.dso-secondary:hover {
+button.dso-secondary:focus-visible,
+label.dso-secondary:hover,
+label.dso-secondary:focus-visible {
   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
   border-color: var(--_dso-button-secondary-hover-border-color, #275937);
   color: var(--_dso-button-secondary-hover-color, #275937);
@@ -295,11 +301,13 @@ label.dso-secondary:active {
   color: var(--_dso-button-secondary-active-color, #fff);
   float: var(--_dso-button-float-secondary, none);
 }
-a.dso-secondary[disabled], a.dso-secondary[disabled]:hover,
+a.dso-secondary[disabled], a.dso-secondary[disabled]:hover, a.dso-secondary[disabled]:focus-visible,
 button.dso-secondary[disabled],
 button.dso-secondary[disabled]:hover,
+button.dso-secondary[disabled]:focus-visible,
 label.dso-secondary[disabled],
-label.dso-secondary[disabled]:hover {
+label.dso-secondary[disabled]:hover,
+label.dso-secondary[disabled]:focus-visible {
   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-secondary-disabled-color, #afcf9d);
@@ -405,9 +413,11 @@ label.dso-secondary.dso-spinner-left::before {
   inline-size: 24px;
   margin-inline-end: 8px;
 }
-a.dso-secondary.dso-spinner-left:not([disabled]):hover::before,
+a.dso-secondary.dso-spinner-left:not([disabled]):hover::before, a.dso-secondary.dso-spinner-left:not([disabled]):focus-visible::before,
 button.dso-secondary.dso-spinner-left:not([disabled]):hover::before,
-label.dso-secondary.dso-spinner-left:not([disabled]):hover::before {
+button.dso-secondary.dso-spinner-left:not([disabled]):focus-visible::before,
+label.dso-secondary.dso-spinner-left:not([disabled]):hover::before,
+label.dso-secondary.dso-spinner-left:not([disabled]):focus-visible::before {
   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;
   content: "";
@@ -417,9 +427,11 @@ label.dso-secondary.dso-spinner-left:not([disabled]):hover::before {
   inline-size: 24px;
   margin-inline-end: 8px;
 }
-a.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,
+a.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before, a.dso-secondary.dso-spinner-left:not([disabled]).dso-small:focus-visible::before,
 button.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,
-label.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {
+button.dso-secondary.dso-spinner-left:not([disabled]).dso-small:focus-visible::before,
+label.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,
+label.dso-secondary.dso-spinner-left:not([disabled]).dso-small:focus-visible::before {
   block-size: 16px;
   inline-size: 16px;
 }
@@ -435,9 +447,11 @@ label.dso-secondary.dso-spinner-right::after {
   inline-size: 24px;
   margin-inline-start: 8px;
 }
-a.dso-secondary.dso-spinner-right:not([disabled]):hover::after,
+a.dso-secondary.dso-spinner-right:not([disabled]):hover::after, a.dso-secondary.dso-spinner-right:not([disabled]):focus-visible::after,
 button.dso-secondary.dso-spinner-right:not([disabled]):hover::after,
-label.dso-secondary.dso-spinner-right:not([disabled]):hover::after {
+button.dso-secondary.dso-spinner-right:not([disabled]):focus-visible::after,
+label.dso-secondary.dso-spinner-right:not([disabled]):hover::after,
+label.dso-secondary.dso-spinner-right:not([disabled]):focus-visible::after {
   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;
   content: "";
@@ -447,9 +461,11 @@ label.dso-secondary.dso-spinner-right:not([disabled]):hover::after {
   inline-size: 24px;
   margin-inline-start: 8px;
 }
-a.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,
+a.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after, a.dso-secondary.dso-spinner-right:not([disabled]).dso-small:focus-visible::after,
 button.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,
-label.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {
+button.dso-secondary.dso-spinner-right:not([disabled]).dso-small:focus-visible::after,
+label.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,
+label.dso-secondary.dso-spinner-right:not([disabled]).dso-small:focus-visible::after {
   block-size: 16px;
   inline-size: 16px;
 }
@@ -464,9 +480,11 @@ label.dso-secondary.download::after {
   inline-size: 24px;
   vertical-align: top;
 }
-a.dso-secondary.download:hover::after,
+a.dso-secondary.download:hover::after, a.dso-secondary.download:focus-visible::after,
 button.dso-secondary.download:hover::after,
-label.dso-secondary.download:hover::after {
+button.dso-secondary.download:focus-visible::after,
+label.dso-secondary.download:hover::after,
+label.dso-secondary.download:focus-visible::after {
   background-image: var(--_dso-di-download-bosgroen);
 }
 a.dso-secondary.download:active::after,
@@ -490,9 +508,11 @@ label.dso-secondary.extern::after {
   inline-size: 24px;
   vertical-align: top;
 }
-a.dso-secondary.extern:hover::after,
+a.dso-secondary.extern:hover::after, a.dso-secondary.extern:focus-visible::after,
 button.dso-secondary.extern:hover::after,
-label.dso-secondary.extern:hover::after {
+button.dso-secondary.extern:focus-visible::after,
+label.dso-secondary.extern:hover::after,
+label.dso-secondary.extern:focus-visible::after {
   background-image: var(--_dso-di-external-link-bosgroen);
 }
 a.dso-secondary.extern:active::after,
@@ -589,9 +609,11 @@ label.dso-tertiary {
   padding-block: 11px;
   padding-inline: 15px;
 }
-a.dso-tertiary:hover,
+a.dso-tertiary:hover, a.dso-tertiary:focus-visible,
 button.dso-tertiary:hover,
-label.dso-tertiary:hover {
+button.dso-tertiary:focus-visible,
+label.dso-tertiary:hover,
+label.dso-tertiary:focus-visible {
   background-color: var(--_dso-button-tertiary-hover-background-color, );
   border-color: var(--_dso-button-tertiary-hover-border-color, );
   color: var(--_dso-button-tertiary-hover-color, #275937);
@@ -605,11 +627,13 @@ label.dso-tertiary:active {
   color: var(--_dso-button-tertiary-active-color, #173521);
   float: var(--_dso-button-float-tertiary, none);
 }
-a.dso-tertiary[disabled], a.dso-tertiary[disabled]:hover,
+a.dso-tertiary[disabled], a.dso-tertiary[disabled]:hover, a.dso-tertiary[disabled]:focus-visible,
 button.dso-tertiary[disabled],
 button.dso-tertiary[disabled]:hover,
+button.dso-tertiary[disabled]:focus-visible,
 label.dso-tertiary[disabled],
-label.dso-tertiary[disabled]:hover {
+label.dso-tertiary[disabled]:hover,
+label.dso-tertiary[disabled]:focus-visible {
   background-color: var(--_dso-button-tertiary-disabled-background-color, );
   border-color: var(--_dso-button-tertiary-disabled-border-color, );
   color: var(--_dso-button-tertiary-disabled-color, #afcf9d);
@@ -694,9 +718,11 @@ label.dso-tertiary[disabled].dso-spinner-left,
 label.dso-tertiary[disabled].dso-spinner-right {
   color: #39870c;
 }
-a.dso-tertiary:not([disabled]):hover,
+a.dso-tertiary:not([disabled]):hover, a.dso-tertiary:not([disabled]):active,
 button.dso-tertiary:not([disabled]):hover,
-label.dso-tertiary:not([disabled]):hover {
+button.dso-tertiary:not([disabled]):active,
+label.dso-tertiary:not([disabled]):hover,
+label.dso-tertiary:not([disabled]):active {
   text-decoration: underline;
   text-underline-position: under;
 }
@@ -780,13 +806,18 @@ button.dso-tertiary.download[disabled]::after,
 label.dso-tertiary.download[disabled]::after {
   background-image: var(--_dso-di-download-grasgroen-40);
 }
-a.dso-tertiary.download:not([disabled]):hover::after, a.dso-tertiary.download:not([disabled]):active::after,
+a.dso-tertiary.download:not([disabled]):hover::after, a.dso-tertiary.download:not([disabled]):focus-visible::after,
 button.dso-tertiary.download:not([disabled]):hover::after,
-button.dso-tertiary.download:not([disabled]):active::after,
+button.dso-tertiary.download:not([disabled]):focus-visible::after,
 label.dso-tertiary.download:not([disabled]):hover::after,
-label.dso-tertiary.download:not([disabled]):active::after {
+label.dso-tertiary.download:not([disabled]):focus-visible::after {
   background-image: var(--_dso-button-tertiary-download-icon, var(--_dso-di-download-bosgroen));
 }
+a.dso-tertiary.download:not([disabled]):active::after,
+button.dso-tertiary.download:not([disabled]):active::after,
+label.dso-tertiary.download:not([disabled]):active::after {
+  background-image: var(--_dso-button-tertiary-download-icon, var(--_dso-di-download-bosgroen-140));
+}
 a.dso-tertiary.extern::after,
 button.dso-tertiary.extern::after,
 label.dso-tertiary.extern::after {
@@ -803,13 +834,18 @@ button.dso-tertiary.extern[disabled]::after,
 label.dso-tertiary.extern[disabled]::after {
   background-image: var(--_dso-di-external-link-grasgroen-40);
 }
-a.dso-tertiary.extern:not([disabled]):hover::after, a.dso-tertiary.extern:not([disabled]):active::after,
+a.dso-tertiary.extern:not([disabled]):hover::after, a.dso-tertiary.extern:not([disabled]):focus-visible::after,
 button.dso-tertiary.extern:not([disabled]):hover::after,
-button.dso-tertiary.extern:not([disabled]):active::after,
+button.dso-tertiary.extern:not([disabled]):focus-visible::after,
 label.dso-tertiary.extern:not([disabled]):hover::after,
-label.dso-tertiary.extern:not([disabled]):active::after {
+label.dso-tertiary.extern:not([disabled]):focus-visible::after {
   background-image: var(--_dso-button-tertiary-external-link-icon, var(--_dso-di-external-link-bosgroen));
 }
+a.dso-tertiary.extern:not([disabled]):active::after,
+button.dso-tertiary.extern:not([disabled]):active::after,
+label.dso-tertiary.extern:not([disabled]):active::after {
+  background-image: var(--_dso-button-tertiary-external-link-icon, var(--_dso-di-external-link-bosgroen-140));
+}
 a.dso-map,
 button.dso-map,
 label.dso-map {
@@ -836,6 +872,14 @@ button.dso-map:active,
 label.dso-map:active {
   outline: 0;
 }
+a.dso-map.extern::after, a.dso-map.download::after,
+button.dso-map.extern::after,
+button.dso-map.download::after,
+label.dso-map.extern::after,
+label.dso-map.download::after {
+  content: "";
+  display: inline-block;
+}
 a.dso-map,
 button.dso-map,
 label.dso-map {
@@ -852,9 +896,11 @@ label.dso-map {
   padding-block: 11px;
   padding-inline: 15px;
 }
-a.dso-map:hover,
+a.dso-map:hover, a.dso-map:focus-visible,
 button.dso-map:hover,
-label.dso-map:hover {
+button.dso-map:focus-visible,
+label.dso-map:hover,
+label.dso-map:focus-visible {
   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
   border-color: var(--_dso-button-secondary-hover-border-color, #275937);
   color: var(--_dso-button-secondary-hover-color, #275937);
@@ -868,11 +914,13 @@ label.dso-map:active {
   color: var(--_dso-button-secondary-active-color, #fff);
   float: var(--_dso-button-float-secondary, none);
 }
-a.dso-map[disabled], a.dso-map[disabled]:hover,
+a.dso-map[disabled], a.dso-map[disabled]:hover, a.dso-map[disabled]:focus-visible,
 button.dso-map[disabled],
 button.dso-map[disabled]:hover,
+button.dso-map[disabled]:focus-visible,
 label.dso-map[disabled],
-label.dso-map[disabled]:hover {
+label.dso-map[disabled]:hover,
+label.dso-map[disabled]:focus-visible {
   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-secondary-disabled-color, #afcf9d);
@@ -978,9 +1026,11 @@ label.dso-map.dso-spinner-left::before {
   inline-size: 24px;
   margin-inline-end: 8px;
 }
-a.dso-map.dso-spinner-left:not([disabled]):hover::before,
+a.dso-map.dso-spinner-left:not([disabled]):hover::before, a.dso-map.dso-spinner-left:not([disabled]):focus-visible::before,
 button.dso-map.dso-spinner-left:not([disabled]):hover::before,
-label.dso-map.dso-spinner-left:not([disabled]):hover::before {
+button.dso-map.dso-spinner-left:not([disabled]):focus-visible::before,
+label.dso-map.dso-spinner-left:not([disabled]):hover::before,
+label.dso-map.dso-spinner-left:not([disabled]):focus-visible::before {
   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;
   content: "";
@@ -990,9 +1040,11 @@ label.dso-map.dso-spinner-left:not([disabled]):hover::before {
   inline-size: 24px;
   margin-inline-end: 8px;
 }
-a.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before,
+a.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before, a.dso-map.dso-spinner-left:not([disabled]).dso-small:focus-visible::before,
 button.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before,
-label.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before {
+button.dso-map.dso-spinner-left:not([disabled]).dso-small:focus-visible::before,
+label.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before,
+label.dso-map.dso-spinner-left:not([disabled]).dso-small:focus-visible::before {
   block-size: 16px;
   inline-size: 16px;
 }
@@ -1008,9 +1060,11 @@ label.dso-map.dso-spinner-right::after {
   inline-size: 24px;
   margin-inline-start: 8px;
 }
-a.dso-map.dso-spinner-right:not([disabled]):hover::after,
+a.dso-map.dso-spinner-right:not([disabled]):hover::after, a.dso-map.dso-spinner-right:not([disabled]):focus-visible::after,
 button.dso-map.dso-spinner-right:not([disabled]):hover::after,
-label.dso-map.dso-spinner-right:not([disabled]):hover::after {
+button.dso-map.dso-spinner-right:not([disabled]):focus-visible::after,
+label.dso-map.dso-spinner-right:not([disabled]):hover::after,
+label.dso-map.dso-spinner-right:not([disabled]):focus-visible::after {
   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;
   content: "";
@@ -1020,9 +1074,11 @@ label.dso-map.dso-spinner-right:not([disabled]):hover::after {
   inline-size: 24px;
   margin-inline-start: 8px;
 }
-a.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after,
+a.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after, a.dso-map.dso-spinner-right:not([disabled]).dso-small:focus-visible::after,
 button.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after,
-label.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after {
+button.dso-map.dso-spinner-right:not([disabled]).dso-small:focus-visible::after,
+label.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after,
+label.dso-map.dso-spinner-right:not([disabled]).dso-small:focus-visible::after {
   block-size: 16px;
   inline-size: 16px;
 }
@@ -1037,13 +1093,6 @@ label.dso-map {
   padding-inline: 16px;
   white-space: nowrap;
 }
-a.dso-map:focus, a.dso-map:focus-visible,
-button.dso-map:focus,
-button.dso-map:focus-visible,
-label.dso-map:focus,
-label.dso-map:focus-visible {
-  outline-offset: -1px;
-}
 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) {
@@ -1052,24 +1101,84 @@ label.dso-map:has(span.sr-only):has(dso-icon) {
   block-size: 40px;
   inline-size: 40px;
 }
+a.dso-map.download::after,
+button.dso-map.download::after,
+label.dso-map.download::after {
+  background-image: var(--_dso-di-download-grasgroen);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  block-size: 24px;
+  inline-size: 24px;
+  vertical-align: top;
+}
+a.dso-map.download:hover::after, a.dso-map.download:focus-visible::after,
+button.dso-map.download:hover::after,
+button.dso-map.download:focus-visible::after,
+label.dso-map.download:hover::after,
+label.dso-map.download:focus-visible::after {
+  background-image: var(--_dso-di-download-bosgroen);
+}
+a.dso-map.download:active::after,
+button.dso-map.download:active::after,
+label.dso-map.download:active::after {
+  background-image: var(--_dso-di-download-wit);
+}
+a.dso-map.download[disabled]::after,
+button.dso-map.download[disabled]::after,
+label.dso-map.download[disabled]::after {
+  background-image: var(--_dso-di-download-grasgroen-40);
+}
+a.dso-map.extern::after,
+button.dso-map.extern::after,
+label.dso-map.extern::after {
+  background-image: var(--_dso-di-external-link-grasgroen);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  block-size: 24px;
+  inline-size: 24px;
+  vertical-align: top;
+}
+a.dso-map.extern:hover::after, a.dso-map.extern:focus-visible::after,
+button.dso-map.extern:hover::after,
+button.dso-map.extern:focus-visible::after,
+label.dso-map.extern:hover::after,
+label.dso-map.extern:focus-visible::after {
+  background-image: var(--_dso-di-external-link-bosgroen);
+}
+a.dso-map.extern:active::after,
+button.dso-map.extern:active::after,
+label.dso-map.extern:active::after {
+  background-image: var(--_dso-di-external-link-wit);
+}
+a.dso-map.extern[disabled]::after,
+button.dso-map.extern[disabled]::after,
+label.dso-map.extern[disabled]::after {
+  background-image: var(--_dso-di-external-link-grasgroen-40);
+}
 
 a.dso-primary, a.dso-primary:hover, a.dso-primary:visited, a.dso-primary:focus-visible {
   color: #fff;
   text-decoration: none;
 }
-a.dso-secondary {
+a.dso-secondary, a.dso-map {
   text-decoration: none;
 }
-a.dso-secondary, a.dso-secondary:visited:not(:hover):not(:active), a.dso-secondary:focus-visible:not(:hover):not(:active) {
+a.dso-secondary, a.dso-secondary:visited:not(:hover):not(:active):not(:focus-visible), a.dso-map, a.dso-map:visited:not(:hover):not(:active):not(:focus-visible) {
   color: #39870c;
 }
-a.dso-secondary:hover, a.dso-secondary:focus-visible {
+a.dso-secondary:hover, a.dso-secondary:focus-visible, a.dso-map:hover, a.dso-map:focus-visible {
+  color: #275937;
   text-decoration: none;
 }
+a.dso-secondary:active, a.dso-map:active {
+  color: #fff;
+}
 a.dso-tertiary {
   text-decoration: none;
 }
-a.dso-tertiary, a.dso-tertiary:visited {
+a.dso-tertiary, a.dso-tertiary:visited:not(:hover):not(:focus-visible):not(:active) {
   color: var(--_dso-button-tertiary-color, #39870c);
 }
 
@@ -1745,7 +1854,7 @@ table.editaction-add {
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -1784,7 +1893,7 @@ table.editaction-remove {
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -1833,7 +1942,7 @@ ins.new-text {
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -1871,7 +1980,7 @@ ins.editaction-add {
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -1910,7 +2019,7 @@ del.removed-text {
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -1954,7 +2063,7 @@ del.editaction-remove {
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -2057,7 +2166,7 @@ del.editaction-remove p:last-child {
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -2099,7 +2208,7 @@ del.editaction-remove p:last-child {
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -2139,7 +2248,7 @@ td.editaction-remove {
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -2180,7 +2289,7 @@ td.editaction-add {
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -2216,7 +2325,7 @@ td.editaction-add {
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -2251,7 +2360,7 @@ td.editaction-add {
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -2308,7 +2417,7 @@ td.editaction-add {
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -2343,7 +2452,7 @@ td.editaction-add {
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;

package/dist/collection/components/panel/panel.css

@@ -42,7 +42,7 @@
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;

package/dist/collection/components/plekinfo-card/plekinfo-card-item/plekinfo-card-item.css

@@ -19,7 +19,7 @@ ins {
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -55,7 +55,7 @@ del {
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;

package/dist/collection/components/plekinfo-card/plekinfo-card.css

@@ -19,7 +19,7 @@ ins {
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -55,7 +55,7 @@ del {
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -88,6 +88,7 @@ del {
 }
 
 .dso-plekinfo-card-container {
+  display: block;
   inline-size: 100%;
   padding-block: 16px;
   padding-inline: 16px;

package/dist/collection/components/renvooi/renvooi.css

@@ -19,7 +19,7 @@ ins {
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -55,7 +55,7 @@ del {
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;