@dnb/eufemia 10.21.0 → 10.22.0

package/es/style/dnb-ui-components.css

@@ -763,10 +763,10 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   display: grid;
 }
 @media screen and (max-width: 40em) {
-  .dnb-forms-field-block__grid {
+  .dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid {
     flex-wrap: wrap;
   }
-  .dnb-forms-field-block__grid > .dnb-form-label {
+  .dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid > .dnb-form-label {
     margin-bottom: 0.5rem;
     margin-top: 0.5rem;
   }
@@ -864,6 +864,12 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
 }
+.dnb-card + .dnb-forms-button-row:not([class*=space__top]) {
+  margin-top: var(--spacing-small);
+}
+.dnb-card + .dnb-forms-button-row:not([class*=space__top]) .dnb-button[class*=space__top] {
+  margin-top: 0;
+}
 @media screen and (min-width: 40em) {
   .dnb-card + .dnb-forms-button-row:not([class*=space__left]) {
     margin-left: var(--spacing-medium);
@@ -1850,6 +1856,8 @@ label + .dnb-autocomplete[class*=__form-status] .dnb-autocomplete__shell {
   padding: 0;
   display: flex;
   flex-direction: column;
+  /* stylelint-disable no-descending-specificity, no-duplicate-selectors */
+  /* stylelint-enable */
 }
 .dnb-breadcrumb__bar.dnb-section {
   display: flex;
@@ -1884,13 +1892,16 @@ label + .dnb-autocomplete[class*=__form-status] .dnb-autocomplete__shell {
 .dnb-breadcrumb__multiple.dnb-height-animation--parallax .dnb-breadcrumb__item {
   transform: translateX(0);
 }
+html[data-visual-test] .dnb-breadcrumb__multiple .dnb-breadcrumb__item {
+  transition: none;
+}
 @media screen and (max-width: 60em) {
-  .dnb-breadcrumb__bar .dnb-breadcrumb__multiple {
+  .dnb-breadcrumb--variant-responsive .dnb-breadcrumb__bar .dnb-breadcrumb__multiple {
     display: none;
   }
 }
 @media screen and (min-width: 60em) {
-  .dnb-breadcrumb--variant-multiple .dnb-breadcrumb__toggle {
+  .dnb-breadcrumb--variant-responsive .dnb-breadcrumb__toggle {
     display: none;
   }
 }
@@ -2177,8 +2188,17 @@ button.dnb-button::-moz-focus-inner {
 }
 @media screen and (max-width: 40em) {
   .dnb-card.dnb-section::before {
-    left: -100vw;
-    right: -100vw;
+    left: var(--left);
+    --outline: 99vw 0 0 0 var(--background-color),
+      198vw 0 0 0 var(--background-color),
+      297vw 0 0 0 var(--background-color),
+      396vw 0 0 0 var(--background-color),
+      0 var(--outline-width) 0 0 var(--outline-color),
+      99vw var(--outline-width) 0 0 var(--outline-color),
+      0 calc(var(--outline-width) * -1) 0 0 var(--outline-color),
+      99vw calc(var(--outline-width) * -1) 0 0 var(--outline-color),
+      198vw var(--outline-width) 0 0 var(--outline-color),
+      198vw calc(var(--outline-width) * -1) 0 0 var(--outline-color);
   }
 }
 @media screen and (max-width: 40em) {
@@ -3989,7 +4009,6 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
  */
 .dnb-form-label {
   display: inline-block;
-  width: auto;
   padding: 0;
   text-align: left;
   vertical-align: baseline;
@@ -3998,6 +4017,10 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
   font-size: var(--font-size-basis);
   color: inherit;
 }
+.dnb-form-label[for] {
+  width: -moz-fit-content;
+  width: fit-content;
+}
 .dnb-form-label--vertical {
   display: block;
   margin-right: 0;
@@ -5441,10 +5464,13 @@ html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
 }
 
 .dnb-progress-indicator--horizontal .dnb-progress-indicator__label {
-  margin: 0 1rem;
+  padding-left: 1rem;
+}
+.dnb-progress-indicator--horizontal.dnb-progress-indicator--small .dnb-progress-indicator__label {
+  padding-left: 0.5rem;
 }
 .dnb-progress-indicator--vertical .dnb-progress-indicator__label {
-  margin-top: 0.5rem;
+  padding-top: 0.5rem;
 }
 .dnb-progress-indicator__circular {
   position: relative;
@@ -7586,7 +7612,7 @@ html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-sw
   border-radius: 0 0 var(--table-outline-radius) var(--table-outline-radius);
 }
 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child,
-.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content:nth-last-child(2) {
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last {
   -webkit-clip-path: none;
           clip-path: none;
 }
@@ -7594,12 +7620,12 @@ html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-sw
 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__td,
 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__td::before,
 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__td::after,
-.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content:nth-last-child(2) .dnb-table__th,
-.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content:nth-last-child(2) .dnb-table__th::before,
-.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content:nth-last-child(2) .dnb-table__th::after,
-.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content:nth-last-child(2) .dnb-table__td,
-.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content:nth-last-child(2) .dnb-table__td::before,
-.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content:nth-last-child(2) .dnb-table__td::after {
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__th,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__th::before,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__th::after,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__td,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__td::before,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__td::after {
   border-radius: 0;
 }
 .dnb-table.dnb-skeleton > * {
@@ -7884,7 +7910,7 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
   border-top-right-radius: var(--table-outline-radius);
 }
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) {
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last {
   -webkit-clip-path: inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius));
           clip-path: inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius));
 }
@@ -7892,24 +7918,24 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child,
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child::before,
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child::after,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__th:first-child,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__th:first-child::before,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__th:first-child::after,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-child,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-child::before,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-child::after {
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child::before,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child::after,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child::before,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child::after {
   border-bottom-left-radius: var(--table-outline-radius);
 }
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child, .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child::before, .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child::after,
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child,
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child::before,
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child::after,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__th:last-child,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__th:last-child::before,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__th:last-child::after,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-child,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-child::before,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-child::after {
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child::before,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child::after,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child::before,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child::after {
   border-bottom-right-radius: var(--table-outline-radius);
 }
 .dnb-table__td--no-spacing,
@@ -8061,10 +8087,17 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 */
 .dnb-table {
   --table-accordion-background: var(--color-white);
+  --table-accordion-header-background: var(--color-white);
   --table-accordion-border-width: 0.0625rem;
   --table-accordion-border-color: var(--color-black-20);
   --table-accordion-border: var(--table-accordion-border-width) solid
     var(--table-accordion-border-color);
+  --table-accordion-icon-color: var(--color-sea-green);
+  --table-accordion-icon-color--active: var(--color-emerald-green);
+  --table-accordion-icon-color--disabled: var(--color-sea-green-30);
+  --table-accordion-outline-color: var(--color-emerald-green);
+  --table-accordion-outline-width: var(--focus-ring-width);
+  --table-accordion-outline-background--active: var(--color-pistachio);
 }
 .dnb-table__th.dnb-table__th__accordion-icon.dnb-table__th {
   padding: 0;
@@ -8094,7 +8127,7 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
   justify-content: center;
 }
 .dnb-table__tr--has-accordion-content .dnb-table__toggle-button .dnb-icon {
-  color: var(--color-sea-green);
+  color: var(--table-accordion-icon-color);
   transition: transform 500ms var(--easing-default);
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr--no-animation .dnb-table__toggle-button .dnb-icon, html[data-visual-test] .dnb-table__tr--has-accordion-content .dnb-table__toggle-button .dnb-icon {
@@ -8126,7 +8159,7 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
   z-index: 3;
   inset: 0;
   pointer-events: none;
-  border: var(--focus-ring-width) solid transparent;
+  border: var(--table-accordion-outline-width) solid transparent;
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled) td:not(:first-of-type)::before {
   border-left: none;
@@ -8138,21 +8171,20 @@ html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-tabl
   cursor: not-allowed;
 }
 html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):hover:not([disabled]) td::before {
-  border-color: var(--color-emerald-green);
+  border-color: var(--table-accordion-outline-color);
 }
 html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):hover:not([disabled]) .dnb-table__td__accordion-icon .dnb-icon {
-  color: var(--color-emerald-green);
+  color: var(--table-accordion-icon-color--active);
 }
-.dnb-table--outline tbody .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):not(:nth-last-child(2)) .dnb-table__td::before {
-  bottom: calc(var(--table-outline-width) * -1);
+.dnb-table--border tbody .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):not(.dnb-table__tr--last) .dnb-table__td::before {
+  bottom: calc(var(--table-border-width) * -1);
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):hover .dnb-table__td {
   background-color: var(--color-white);
 }
 html[data-whatinput=keyboard] .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td::before {
-  top: 0;
-  bottom: 0;
-  border-color: var(--color-emerald-green);
+  border-color: var(--focus-ring-color);
+  border-width: var(--focus-ring-width);
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td:first-of-type::before {
   left: 0;
@@ -8162,31 +8194,31 @@ html[data-whatinput=keyboard] .dnb-table__tr--has-accordion-content.dnb-table__t
 }
 html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active:hover td::before,
 .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active td::before {
-  border-color: var(--color-emerald-green);
+  border-color: var(--table-accordion-outline-color);
   border-width: var(--table-accordion-border-width);
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active .dnb-table__td {
-  background-color: var(--color-pistachio);
+  background-color: var(--table-accordion-outline-background--active);
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active .dnb-table__td .dnb-table__td__accordion-icon .dnb-icon {
-  color: var(--color-emerald-green);
+  color: var(--table-accordion-icon-color--active);
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled).dnb-table__tr--hover:not(:active):hover .dnb-table__td {
-  background-color: var(--table-accordion-background);
+  background-color: var(--table-accordion-header-background);
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled).dnb-table__tr--hover:not(:active):hover .dnb-table__td::before {
   border: none;
   border-top: var(--table-accordion-border);
 }
 html:not([data-whatinput=keyboard]) .dnb-table__tr--has-accordion-content.dnb-table__tr.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):not(:active):not(:hover) {
-  background-color: var(--table-accordion-background);
+  background-color: var(--table-accordion-header-background);
 }
 html:not([data-whatinput=keyboard]) .dnb-table__tr--has-accordion-content.dnb-table__tr.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):not(:active):not(:hover) td::before {
   border: none;
   border-top: var(--table-accordion-border);
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr--disabled .dnb-table__td__accordion-icon .dnb-icon {
-  color: var(--color-sea-green-30);
+  color: var(--table-accordion-icon-color--disabled);
 }
 @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
   .dnb-table__tr__accordion-content[hidden] {
@@ -8197,17 +8229,51 @@ html:not([data-whatinput=keyboard]) .dnb-table__tr--has-accordion-content.dnb-ta
     display: block;
   }
 }
-.dnb-table__tr__accordion-content td {
+.dnb-table__tr__accordion-content__inner {
+  overflow: hidden;
+  will-change: height;
+  transition: height 400ms var(--easing-default);
+  position: relative;
+}
+.dnb-table__tr__accordion-content__inner__spacing {
+  padding: 1rem;
+  transform: translateY(-10px);
+  transition: transform 500ms var(--easing-default);
+}
+.dnb-table__tr__accordion-content--parallax .dnb-table__tr__accordion-content__inner__spacing {
+  transform: translateY(0);
+}
+html[data-visual-test] .dnb-table__tr__accordion-content--parallax .dnb-table__tr__accordion-content__inner__spacing {
+  transition: none;
+}
+.dnb-table__tr__accordion-content--expanded > td.dnb-table__td {
+  background-color: var(--color-white);
+}
+.dnb-table__tr__accordion-content--expanded + .dnb-table__tr--has-accordion-content .dnb-table__td::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: -0.0625rem;
+  bottom: 0;
+  z-index: 1;
+  pointer-events: none;
+  border-top: var(--table-accordion-border);
+}
+.dnb-table__tr__accordion-content--expanded + .dnb-table__tr--has-accordion-content .dnb-table__td:last-child::after {
+  right: 0;
+}
+.dnb-table__tr__accordion-content--single td {
   padding: 0 !important;
   width: calc(100% - 3.5rem);
 }
-.dnb-table__size--medium .dnb-table__tr__accordion-content td {
+.dnb-table__size--medium .dnb-table__tr__accordion-content--single td {
   width: calc(100% - 3rem);
 }
-.dnb-table__size--small .dnb-table__tr__accordion-content td {
+.dnb-table__size--small .dnb-table__tr__accordion-content--single td {
   width: calc(100% - 2.5rem);
 }
-.dnb-table__tr__accordion-content td::before {
+.dnb-table__tr__accordion-content--single td::before {
   content: "";
   position: absolute;
   top: auto;
@@ -8217,39 +8283,19 @@ html:not([data-whatinput=keyboard]) .dnb-table__tr--has-accordion-content.dnb-ta
   pointer-events: none;
   border-bottom: var(--table-accordion-border);
 }
-.dnb-table--outline .dnb-table__tr__accordion-content:last-of-type td::before {
+.dnb-table--outline .dnb-table__tr__accordion-content--single:last-of-type td::before {
   border-bottom: none;
 }
-.dnb-table--border .dnb-table__tr__accordion-content td::after {
+.dnb-table--border .dnb-table__tr__accordion-content--single td::after {
   border-top: none;
 }
-.dnb-table__tr__accordion-content__inner {
-  overflow: hidden;
-  will-change: height;
-  transition: height 400ms var(--easing-default);
-  position: relative;
-}
-.dnb-table__tr__accordion-content__inner__spacing {
-  padding: 1rem;
-  transform: translateY(-10px);
-  transition: transform 500ms var(--easing-default);
-}
-.dnb-table__tr__accordion-content--parallax .dnb-table__tr__accordion-content__inner__spacing {
-  transform: translateY(0);
-}
-html[data-visual-test] .dnb-table__tr__accordion-content--parallax .dnb-table__tr__accordion-content__inner__spacing {
-  transition: none;
-}
-.dnb-table__tr__accordion-content > td.dnb-table__td {
+.dnb-table__tr__accordion-content--single > td.dnb-table__td {
   padding: 0;
 }
-.dnb-table__tr__accordion-content > td.dnb-table__td .dnb-dl,
-.dnb-table__tr__accordion-content > td.dnb-table__td .dnb-dl dt {
+.dnb-table__tr__accordion-content--single > td.dnb-table__td .dnb-dl,
+.dnb-table__tr__accordion-content--single > td.dnb-table__td .dnb-dl dt {
   margin: 0;
 }
-.dnb-table__tr__accordion-content--expanded > td.dnb-table__td {
-  background-color: var(--color-white);
-}
 .dnb-table__tr__accordion-content.dnb-table__tr .dnb-table__td {
   background-color: var(--table-accordion-background);
   /**