@dnb/eufemia 9.25.0 → 9.27.0

package/cjs/style/themes/theme-ui/dnb-theme-ui.css

@@ -1003,541 +1003,8 @@ a.dnb-button {
 
 /*
  * Table
- *
- */
-/*
-* Button mixins
-*
-*/
-.dnb-table {
-  display: table;
-  table-layout: auto;
-  width: 100%;
-  overflow: auto;
-  margin-top: 0;
-  margin-bottom: 1rem;
-  margin-bottom: var(--spacing-small);
-  border-spacing: 0;
-  border-collapse: collapse;
-  /* stylelint-disable-next-line */
-  /* stylelint-disable-next-line */
-  /* stylelint-disable-next-line */
-  /* stylelint-disable */
-  /* stylelint-enable */ }
-  .dnb-table--fixed {
-    table-layout: fixed; }
-  .dnb-table__sticky-helper > td {
-    display: block;
-    overflow: hidden;
-    padding: 0 !important;
-    height: 0; }
-  .dnb-table > tr > th,
-  .dnb-table > tr > td,
-  .dnb-table > thead > tr > th,
-  .dnb-table > tbody > tr > td,
-  .dnb-table .dnb-table__th,
-  .dnb-table .dnb-table__td {
-    border-bottom: 1px solid transparent;
-    font-size: 1.125rem;
-    font-size: var(--font-size-basis);
-    line-height: 1.5rem;
-    line-height: var(--line-height-basis);
-    border-spacing: 0;
-    word-break: keep-all; }
-  .dnb-table > tr > th,
-  .dnb-table > thead > tr > th,
-  .dnb-table .dnb-table__th {
-    padding: 3rem 1rem 0.5rem;
-    padding: var(--spacing-x-large) var(--spacing-small) var(--spacing-x-small);
-    font-weight: 500;
-    font-weight: var(--font-weight-medium);
-    color: #14555a;
-    color: var(--color-emerald-green);
-    vertical-align: bottom;
-    background-color: #d2f0e9;
-    background-color: var(--color-mint-green-50);
-    border-bottom: 1px solid #a5e1d2;
-    border-bottom: 1px solid var(--color-mint-green); }
-    .dnb-table > tr > th:not([align]):not(.dnb-table--left):not(.dnb-table--right):not(.dnb-table--center),
-    .dnb-table > thead > tr > th:not([align]):not(.dnb-table--left):not(.dnb-table--right):not(.dnb-table--center),
-    .dnb-table .dnb-table__th:not([align]):not(.dnb-table--left):not(.dnb-table--right):not(.dnb-table--center) {
-      text-align: inherit; }
-    @supports (-moz-appearance: meterbar) and (background-blend-mode: difference, normal) {
-      .dnb-table > tr > th,
-      .dnb-table > thead > tr > th,
-      .dnb-table .dnb-table__th {
-        padding-bottom: calc(0.5rem - 0.5px);
-        padding-bottom: calc(var(--spacing-x-small) - 0.5px); } }
-  .dnb-table > thead > tr > th.dnb-table--sortable,
-  .dnb-table .dnb-table__th.dnb-table--sortable {
-    color: #14555a;
-    color: var(--color-emerald-green); }
-    .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor,
-    .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button,
-    .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor,
-    .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button {
-      position: relative;
-      z-index: 1;
-      -webkit-box-align: end;
-          -ms-flex-align: end;
-              align-items: flex-end;
-      -webkit-box-shadow: none;
-              box-shadow: none;
-      line-height: 1.5rem;
-      line-height: var(--line-height-basis);
-      margin: 0;
-      padding: 0;
-      padding-right: 0.5rem;
-      color: inherit;
-      font-weight: 500;
-      font-weight: var(--font-weight-medium);
-      text-align: inherit;
-      font-size: inherit; }
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor > .dnb-icon,
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button > .dnb-icon,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor > .dnb-icon,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button > .dnb-icon {
-        opacity: 0;
-        -webkit-transition: opacity 200ms ease-out, -webkit-transform 500ms ease-out;
-        transition: opacity 200ms ease-out, -webkit-transform 500ms ease-out;
-        transition: opacity 200ms ease-out, transform 500ms ease-out;
-        transition: opacity 200ms ease-out, transform 500ms ease-out, -webkit-transform 500ms ease-out; }
-        [data-visual-test-wrapper] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor > .dnb-icon, [data-visual-test-wrapper]
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button > .dnb-icon, [data-visual-test-wrapper]
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor > .dnb-icon, [data-visual-test-wrapper]
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button > .dnb-icon {
-          -webkit-transition: none;
-          transition: none; }
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor .dnb-button__text,
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button .dnb-button__text,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor .dnb-button__text,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button .dnb-button__text {
-        margin: 0;
-        font-size: inherit; }
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor .dnb-button__text::after,
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button .dnb-button__text::after,
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor .dnb-button__text::after,
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button .dnb-button__text::after {
-          right: 1rem; }
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor .dnb-button__icon,
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button .dnb-button__icon,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor .dnb-button__icon,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button .dnb-button__icon {
-        -ms-flex-item-align: end;
-            align-self: flex-end;
-        margin-top: auto;
-        margin-bottom: 0.25rem; }
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:not(:focus) .dnb-button__text::after,
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:not(:focus) .dnb-button__text::after,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:not(:focus) .dnb-button__text::after,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:not(:focus) .dnb-button__text::after {
-        opacity: 1;
-        color: #14555a;
-        color: var(--color-emerald-green); }
-      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:hover[disabled], html:not([data-whatintent='touch'])
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:hover[disabled], html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover[disabled], html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover[disabled] {
-        cursor: not-allowed; }
-      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:hover:not([disabled]), html:not([data-whatintent='touch'])
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:hover:not([disabled]), html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover:not([disabled]), html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover:not([disabled]) {
-        color: #007272;
-        color: var(--color-sea-green); }
-        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:hover:not([disabled]):not(:focus) .dnb-icon, html:not([data-whatintent='touch'])
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:hover:not([disabled]):not(:focus) .dnb-icon, html:not([data-whatintent='touch'])
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover:not([disabled]):not(:focus) .dnb-icon, html:not([data-whatintent='touch'])
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover:not([disabled]):not(:focus) .dnb-icon {
-          opacity: 1; }
-        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover:not([disabled]) .dnb-button__text::after {
-          opacity: 0; }
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus[disabled],
-      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus[disabled],
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus[disabled],
-      html:not([data-whatintent='touch'])
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus[disabled],
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus[disabled],
-      html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus[disabled],
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus[disabled],
-      html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus[disabled] {
-        cursor: not-allowed; }
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
-      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus:not([disabled])::before,
-      html:not([data-whatintent='touch'])
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus:not([disabled])::before,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
-      html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled])::before,
-      html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled])::before {
-        content: '';
-        position: absolute;
-        top: -0.5rem;
-        bottom: -0.5rem;
-        left: -1rem;
-        right: 0.5rem; }
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
-      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus:not([disabled])::before,
-      html:not([data-whatintent='touch'])
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus:not([disabled])::before,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
-      html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled])::before,
-      html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled])::before {
-        right: -0.5rem; }
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus:not([disabled]) .dnb-icon,
-      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus:not([disabled]) .dnb-icon,
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus:not([disabled]) .dnb-icon,
-      html:not([data-whatintent='touch'])
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus:not([disabled]) .dnb-icon,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled]) .dnb-icon,
-      html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled]) .dnb-icon,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled]) .dnb-icon,
-      html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled]) .dnb-icon {
-        opacity: 1; }
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active[disabled],
-      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active[disabled],
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active[disabled],
-      html:not([data-whatintent='touch'])
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active[disabled],
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active[disabled],
-      html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active[disabled],
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active[disabled],
-      html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active[disabled] {
-        cursor: not-allowed; }
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled]),
-      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled]),
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled]),
-      html:not([data-whatintent='touch'])
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled]),
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]),
-      html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]),
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]),
-      html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]) {
-        color: #14555a;
-        color: var(--color-emerald-green); }
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
-        html:not([data-whatintent='touch'])
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        html:not([data-whatintent='touch'])
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
-        html:not([data-whatintent='touch'])
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
-          content: '';
-          position: absolute;
-          z-index: 1;
-          top: 0;
-          left: -0.5rem;
-          bottom: 0;
-          right: -0.5rem;
-          height: inherit;
-          border-radius: inherit;
-          outline: none; }
-          html[data-whatinput='mouse'] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
-          html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
-          .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
-          html:not([data-whatintent='touch'])
-          .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
-          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
-          html:not([data-whatintent='touch'])
-          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
-          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
-          html:not([data-whatintent='touch'])
-          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
-            --border-color: var(--color-emerald-green);
-            -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
-                    box-shadow: 0 0 0 0.125rem var(--border-color);
-            border-color: transparent; }
-            @media screen and (-ms-high-contrast: none) {
-              html[data-whatinput='mouse'] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
-              html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
-              .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
-              html:not([data-whatintent='touch'])
-              .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
-              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
-              html:not([data-whatintent='touch'])
-              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
-              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
-              html:not([data-whatintent='touch'])
-              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
-                -webkit-box-shadow: 0 0 0 0.125rem #14555a;
-                        box-shadow: 0 0 0 0.125rem #14555a;
-                -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
-                        box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
-        html:not([data-whatintent='touch'])
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        html:not([data-whatintent='touch'])
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
-        html:not([data-whatintent='touch'])
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
-          content: '';
-          position: absolute;
-          z-index: 1;
-          top: 0;
-          left: -0.5rem;
-          bottom: 0;
-          right: -0.5rem;
-          height: inherit;
-          border-radius: inherit;
-          outline: none; }
-          html[data-whatinput='touch'] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
-          html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
-          .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
-          html:not([data-whatintent='touch'])
-          .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
-          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
-          html:not([data-whatintent='touch'])
-          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
-          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
-          html:not([data-whatintent='touch'])
-          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
-            --border-color: var(--color-emerald-green);
-            -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
-                    box-shadow: 0 0 0 0.125rem var(--border-color);
-            border-color: transparent; }
-            @media screen and (-ms-high-contrast: none) {
-              html[data-whatinput='touch'] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
-              html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
-              .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
-              html:not([data-whatintent='touch'])
-              .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
-              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
-              html:not([data-whatintent='touch'])
-              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
-              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
-              html:not([data-whatintent='touch'])
-              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
-                -webkit-box-shadow: 0 0 0 0.125rem #14555a;
-                        box-shadow: 0 0 0 0.125rem #14555a;
-                -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
-                        box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
-        html:not([data-whatintent='touch'])
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        html:not([data-whatintent='touch'])
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
-        html:not([data-whatintent='touch'])
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
-          content: '';
-          position: absolute;
-          top: -0.5rem;
-          bottom: -0.5rem;
-          left: -1rem;
-          right: 0.5rem; }
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
-        html:not([data-whatintent='touch'])
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        html:not([data-whatintent='touch'])
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
-        html:not([data-whatintent='touch'])
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
-          right: -0.5rem; }
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:hover:focus:not(:active) .dnb-button__text::after,
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:hover:focus:not(:active) .dnb-button__text::after,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover:focus:not(:active) .dnb-button__text::after,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover:focus:not(:active) .dnb-button__text::after {
-        visibility: hidden; }
-  .dnb-table > thead > tr > th.dnb-table--active .dnb-anchor:not(:hover) .dnb-button__text::after,
-  .dnb-table > thead > tr > th.dnb-table--active .dnb-button:not(:hover) .dnb-button__text::after,
-  .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:not(:hover) .dnb-button__text::after,
-  .dnb-table .dnb-table__th.dnb-table--active .dnb-button:not(:hover) .dnb-button__text::after {
-    opacity: 0; }
-  .dnb-table > thead > tr > th.dnb-table--active .dnb-anchor .dnb-icon,
-  .dnb-table > thead > tr > th.dnb-table--active .dnb-button .dnb-icon,
-  .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor .dnb-icon,
-  .dnb-table .dnb-table__th.dnb-table--active .dnb-button .dnb-icon {
-    opacity: 1; }
-  html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--active .dnb-anchor:hover[disabled], html:not([data-whatintent='touch'])
-  .dnb-table > thead > tr > th.dnb-table--active .dnb-button:hover[disabled], html:not([data-whatintent='touch'])
-  .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:hover[disabled], html:not([data-whatintent='touch'])
-  .dnb-table .dnb-table__th.dnb-table--active .dnb-button:hover[disabled] {
-    cursor: not-allowed; }
-  html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--active .dnb-anchor:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
-  .dnb-table > thead > tr > th.dnb-table--active .dnb-button:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
-  .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
-  .dnb-table .dnb-table__th.dnb-table--active .dnb-button:hover:not([disabled]) .dnb-button__text::after {
-    color: #007272;
-    color: var(--color-sea-green);
-    opacity: 1; }
-  .dnb-table > thead > tr > th.dnb-table--active .dnb-anchor:hover:focus:not(:active) .dnb-button__text::after,
-  .dnb-table > thead > tr > th.dnb-table--active .dnb-button:hover:focus:not(:active) .dnb-button__text::after,
-  .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:hover:focus:not(:active) .dnb-button__text::after,
-  .dnb-table .dnb-table__th.dnb-table--active .dnb-button:hover:focus:not(:active) .dnb-button__text::after {
-    visibility: visible; }
-  html[data-whatinput='keyboard']
-.dnb-table >
-thead > tr > th.dnb-table--active .dnb-anchor:hover:focus .dnb-button__text::after, html[data-whatinput='keyboard']
-  .dnb-table >
-thead > tr > th.dnb-table--active .dnb-button:hover:focus .dnb-button__text::after, html[data-whatinput='keyboard']
-  .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:hover:focus .dnb-button__text::after, html[data-whatinput='keyboard']
-  .dnb-table .dnb-table__th.dnb-table--active .dnb-button:hover:focus .dnb-button__text::after {
-    visibility: hidden; }
-  .dnb-table > thead > tr > th.dnb-table--reversed .dnb-anchor .dnb-icon,
-  .dnb-table > thead > tr > th.dnb-table--reversed .dnb-button .dnb-icon,
-  .dnb-table .dnb-table__th.dnb-table--reversed .dnb-anchor .dnb-icon,
-  .dnb-table .dnb-table__th.dnb-table--reversed .dnb-button .dnb-icon {
-    -webkit-transform: rotate(180deg);
-            transform: rotate(180deg);
-    -webkit-transform-origin: 50% 50%;
-            transform-origin: 50% 50%; }
-  .dnb-table > thead > tr > th.dnb-table--no-wrap,
-  .dnb-table > tbody > tr > th.dnb-table--no-wrap,
-  .dnb-table .dnb-table__th.dnb-table--no-wrap {
-    white-space: nowrap; }
-  .dnb-table > tr > td,
-  .dnb-table > tbody > tr > td,
-  .dnb-table .dnb-table__td,
-  .dnb-table > tr > th[scope='row'] {
-    padding: 1rem;
-    padding: var(--spacing-small);
-    padding-top: 1.25rem;
-    padding-top: calc(1rem * 1.25);
-    padding-top: calc(var(--spacing-small)*1.25);
-    padding-top: calc(var(--spacing-small) * 1.25);
-    padding-bottom: 1.188rem;
-    padding-bottom: calc(1rem * 1.188);
-    padding-bottom: calc(var(--spacing-small)*1.188);
-    padding-bottom: calc(var(--spacing-small) * 1.188);
-    /* 19/16 */
-    color: currentColor;
-    color: var(--theme-color-black-80, currentColor); }
-  .dnb-table > tbody > tr:not(.dnb-table--ignore),
-  .dnb-table .dnb-table__tr:not(.dnb-table--ignore),
-  .dnb-table .dnb-table--odd:not(.dnb-table--ignore) {
-    background-color: #fff;
-    background-color: var(--color-white); }
-  .dnb-table > tbody > tr:not(.dnb-table--odd):nth-of-type(2n):not(.dnb-table--ignore),
-  .dnb-table .dnb-table__tr:not(.dnb-table--odd):nth-of-type(2n):not(.dnb-table--ignore),
-  .dnb-table .dnb-table--even:not(.dnb-table--ignore) {
-    background-color: #f4fbf9;
-    background-color: var(--color-mint-green-12); }
-  .dnb-table > tbody > tr:last-of-type > td,
-  .dnb-table .dnb-table__tr:last-of-type .dnb-table__td {
-    border-bottom: 1px solid #d2f0e9;
-    border-bottom: 1px solid var(--color-mint-green-50); }
-  .dnb-table, .dnb-table--left {
-    text-align: left; }
-  .dnb-table--right {
-    text-align: right; }
-  .dnb-table--center {
-    text-align: center; }
-  .dnb-table > caption {
-    font-size: 1rem;
-    font-size: var(--font-size-small);
-    margin-top: 0.5rem;
-    margin-top: var(--spacing-x-small);
-    caption-side: bottom; }
-  .dnb-table tr.sticky {
-    top: 0; }
-  .dnb-table tr.sticky th {
-    position: sticky;
-    top: inherit;
-    z-index: 2; }
-    .dnb-table tr.sticky th::after {
-      content: '';
-      position: absolute;
-      opacity: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      height: 6px;
-      -webkit-box-shadow: 0 -2px 12px 8px rgba(51, 51, 51, 0.08);
-              box-shadow: 0 -2px 12px 8px rgba(51, 51, 51, 0.08);
-      -webkit-box-shadow: var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);
-              box-shadow: var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);
-      -webkit-clip-path: inset(6px 0 -48px 0);
-              clip-path: inset(6px 0 -48px 0);
-      -webkit-transition: opacity 300ms ease-out;
-      transition: opacity 300ms ease-out; }
-      [data-visual-test-wrapper] .dnb-table tr.sticky th::after {
-        -webkit-transition: none;
-        transition: none; }
-  .dnb-table tr.sticky.show-shadow th::after {
-    opacity: 1; }
-  .dnb-table--small,
-  .dnb-table--small > tr > th,
-  .dnb-table--small > tr > td,
-  .dnb-table--small > thead > tr > th,
-  .dnb-table--small > tbody > tr > td {
-    font-size: 1rem;
-    font-size: var(--font-size-small); }
-  .dnb-table > tr.dnb-table--small > th,
-  .dnb-table > tr.dnb-table--small > td,
-  .dnb-table > thead > tr.dnb-table--small > th,
-  .dnb-table > tbody > tr.dnb-table--small > td {
-    font-size: 1rem;
-    font-size: var(--font-size-small); }
-  .dnb-table > tr > th.dnb-table--small,
-  .dnb-table > tr > td.dnb-table--small,
-  .dnb-table > thead > tr > th.dnb-table--small,
-  .dnb-table > tbody > tr > td.dnb-table--small, .dnb-table__th.dnb-table--small, .dnb-table__td.dnb-table--small {
-    font-size: 1rem;
-    font-size: var(--font-size-small); }
-  .dnb-table--x-small,
-  .dnb-table--x-small > tr > th,
-  .dnb-table--x-small > tr > td,
-  .dnb-table--x-small > thead > tr > th,
-  .dnb-table--x-small > tbody > tr > td {
-    font-size: 0.875rem;
-    font-size: var(--font-size-x-small); }
-  .dnb-table > tr.dnb-table--x-small > th,
-  .dnb-table > tr.dnb-table--x-small > td,
-  .dnb-table > thead > tr.dnb-table--x-small > th,
-  .dnb-table > tbody > tr.dnb-table--x-small > td {
-    font-size: 0.875rem;
-    font-size: var(--font-size-x-small); }
-  .dnb-table > tr > th.dnb-table--x-small,
-  .dnb-table > tr > td.dnb-table--x-small,
-  .dnb-table > thead > tr > th.dnb-table--x-small,
-  .dnb-table > tbody > tr > td.dnb-table--x-small, .dnb-table__th.dnb-table--x-small, .dnb-table__td.dnb-table--x-small {
-    font-size: 0.875rem;
-    font-size: var(--font-size-x-small); }
-  .dnb-table.dnb-skeleton > * {
-    -webkit-text-fill-color: #ebebeb;
-    -webkit-text-fill-color: var(--skeleton-color); }
-
-.dnb-spacing .dnb-table p,
-.dnb-spacing .dnb-table ul,
-.dnb-spacing .dnb-table ol,
-.dnb-spacing .dnb-table dl,
-.dnb-spacing .dnb-table pre {
-  margin-top: 0;
-  margin-bottom: 0; }
-
+ * The styles are located inside /components/table/styles/...
+ */
 /*
  * Label
  *
@@ -2039,6 +1506,13 @@ html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accord
   -webkit-box-shadow: none;
           box-shadow: none; }
 
+.dnb-autocomplete--show-indicator .dnb-autocomplete__input .dnb-input__icon {
+  color: transparent; }
+
+.dnb-autocomplete__shell, .dnb-autocomplete__input {
+  border-radius: 0.25rem;
+  border-radius: var(--autocomplete-border-radius); }
+
 .dnb-autocomplete__status--error:not(.dnb-autocomplete--opened) .dnb-form-label:hover
 ~ .dnb-autocomplete__inner .dnb-input:not([data-input-state='disabled']) .dnb-input__shell {
   --border-color: var(--color-fire-red);
@@ -4738,10 +4212,455 @@ html[data-whatinput='keyboard']
                 box-shadow: 0 0 0 0.125rem var(--color-fire-red); } }
   .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):checked ~ .dnb-switch__button .dnb-switch__focus {
     -webkit-transform: rotate(180deg);
-            transform: rotate(180deg); }
-  .dnb-switch > .dnb-form-status {
-    -webkit-transform: translateY(0.1875rem);
-            transform: translateY(0.1875rem); }
+            transform: rotate(180deg); }
+  .dnb-switch > .dnb-form-status {
+    -webkit-transform: translateY(0.1875rem);
+            transform: translateY(0.1875rem); }
+
+/*
+* Table theme
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+* Button mixins
+*
+*/
+/*
+* Button mixins
+*
+*/
+.dnb-table {
+  /* stylelint-disable-next-line */
+  /* stylelint-disable-next-line */ }
+  .dnb-table > tr > th,
+  .dnb-table > tr > td,
+  .dnb-table > thead > tr > th,
+  .dnb-table > tbody > tr > td, .dnb-table__th, .dnb-table__td {
+    font-size: 1.125rem;
+    font-size: var(--font-size-basis);
+    line-height: 1.5rem;
+    line-height: var(--line-height-basis);
+    border-spacing: 0;
+    word-break: keep-all; }
+  .dnb-table > tr > th,
+  .dnb-table > thead > tr > th, .dnb-table__th {
+    padding: 3rem 1rem 0.5rem;
+    padding: var(--spacing-x-large) var(--spacing-small) var(--spacing-x-small);
+    font-weight: 500;
+    font-weight: var(--font-weight-medium);
+    color: #000;
+    color: var(--color-black);
+    vertical-align: bottom;
+    background-color: #fff;
+    background-color: var(--color-white); }
+    .dnb-table > tr > th:not([align]):not(.dnb-table--left):not(.dnb-table--right):not(.dnb-table--center),
+    .dnb-table > thead > tr > th:not([align]):not(.dnb-table--left):not(.dnb-table--right):not(.dnb-table--center), .dnb-table__th:not([align]):not(.dnb-table--left):not(.dnb-table--right):not(.dnb-table--center) {
+      text-align: inherit; }
+    @supports (-moz-appearance: meterbar) and (background-blend-mode: difference, normal) {
+      .dnb-table > tr > th,
+      .dnb-table > thead > tr > th, .dnb-table__th {
+        padding-bottom: calc(0.5rem - 0.5px);
+        padding-bottom: calc(var(--spacing-x-small) - 0.5px); } }
+  .dnb-table > tr > td,
+  .dnb-table > tbody > tr > td, .dnb-table__td,
+  .dnb-table > tr > th[scope='row'] {
+    padding: 1rem;
+    padding: var(--spacing-small);
+    padding-top: 1.25rem;
+    padding-top: calc(1rem * 1.25);
+    padding-top: calc(var(--spacing-small)*1.25);
+    padding-top: calc(var(--spacing-small) * 1.25);
+    padding-bottom: 1.188rem;
+    padding-bottom: calc(1rem * 1.188);
+    padding-bottom: calc(var(--spacing-small)*1.188);
+    padding-bottom: calc(var(--spacing-small) * 1.188);
+    /* 19/16 */
+    color: currentColor;
+    color: var(--theme-color-black-80, currentColor); }
+  .dnb-table > tbody > tr,
+  .dnb-table .dnb-table__tr,
+  .dnb-table .dnb-table__tr--odd {
+    background-color: #fff;
+    background-color: var(--color-white); }
+  .dnb-table > tbody > tr:not(.dnb-table__tr--odd):nth-of-type(2n),
+  .dnb-table .dnb-table__tr:not(.dnb-table__tr--odd):nth-of-type(2n),
+  .dnb-table .dnb-table__tr--even {
+    background-color: #f2f2f5;
+    background-color: var(--color-lavender); }
+  .dnb-table > thead > tr,
+  .dnb-table > tbody > tr,
+  .dnb-table .dnb-table__tr {
+    position: relative; }
+  .dnb-table > thead > tr:last-of-type::after,
+  .dnb-table > tbody > tr:last-of-type::after,
+  .dnb-table > .dnb-table__tr:last-of-type::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -1px;
+    z-index: 1;
+    height: 1px;
+    background-color: #ebebeb;
+    background-color: var(--color-black-8); }
+  .dnb-table > thead > tr > th.dnb-table--sortable,
+  .dnb-table .dnb-table__th.dnb-table--sortable {
+    color: #14555a;
+    color: var(--color-emerald-green); }
+    .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor,
+    .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button,
+    .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor,
+    .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button {
+      position: relative;
+      z-index: 1;
+      -webkit-box-align: end;
+          -ms-flex-align: end;
+              align-items: flex-end;
+      -webkit-box-shadow: none;
+              box-shadow: none;
+      line-height: 1.5rem;
+      line-height: var(--line-height-basis);
+      margin: 0;
+      padding: 0;
+      padding-right: 0.5rem;
+      color: inherit;
+      font-weight: 500;
+      font-weight: var(--font-weight-medium);
+      text-align: inherit;
+      font-size: inherit; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor > .dnb-icon,
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button > .dnb-icon,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor > .dnb-icon,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button > .dnb-icon {
+        opacity: 0;
+        -webkit-transition: opacity 200ms ease-out, -webkit-transform 500ms ease-out;
+        transition: opacity 200ms ease-out, -webkit-transform 500ms ease-out;
+        transition: opacity 200ms ease-out, transform 500ms ease-out;
+        transition: opacity 200ms ease-out, transform 500ms ease-out, -webkit-transform 500ms ease-out; }
+        [data-visual-test-wrapper] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor > .dnb-icon, [data-visual-test-wrapper]
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button > .dnb-icon, [data-visual-test-wrapper]
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor > .dnb-icon, [data-visual-test-wrapper]
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button > .dnb-icon {
+          -webkit-transition: none;
+          transition: none; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor .dnb-button__text,
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button .dnb-button__text,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor .dnb-button__text,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button .dnb-button__text {
+        margin: 0;
+        font-size: inherit; }
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor .dnb-button__text::after,
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button .dnb-button__text::after,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor .dnb-button__text::after,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button .dnb-button__text::after {
+          right: 1rem; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor .dnb-button__icon,
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button .dnb-button__icon,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor .dnb-button__icon,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button .dnb-button__icon {
+        -ms-flex-item-align: end;
+            align-self: flex-end;
+        margin-top: auto;
+        margin-bottom: 0.25rem; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:not(:focus) .dnb-button__text::after,
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:not(:focus) .dnb-button__text::after,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:not(:focus) .dnb-button__text::after,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:not(:focus) .dnb-button__text::after {
+        opacity: 1;
+        color: #14555a;
+        color: var(--color-emerald-green); }
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:hover[disabled], html:not([data-whatintent='touch'])
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:hover[disabled], html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover[disabled], html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover[disabled] {
+        cursor: not-allowed; }
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:hover:not([disabled]), html:not([data-whatintent='touch'])
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:hover:not([disabled]), html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover:not([disabled]), html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover:not([disabled]) {
+        color: #007272;
+        color: var(--color-sea-green); }
+        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:hover:not([disabled]):not(:focus) .dnb-icon, html:not([data-whatintent='touch'])
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:hover:not([disabled]):not(:focus) .dnb-icon, html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover:not([disabled]):not(:focus) .dnb-icon, html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover:not([disabled]):not(:focus) .dnb-icon {
+          opacity: 1; }
+        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover:not([disabled]) .dnb-button__text::after {
+          opacity: 0; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus[disabled],
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus[disabled],
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus[disabled],
+      html:not([data-whatintent='touch'])
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus[disabled],
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus[disabled],
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus[disabled],
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus[disabled],
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus[disabled] {
+        cursor: not-allowed; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus:not([disabled])::before,
+      html:not([data-whatintent='touch'])
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus:not([disabled])::before,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled])::before,
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled])::before {
+        content: '';
+        position: absolute;
+        top: -0.5rem;
+        bottom: -0.5rem;
+        left: -1rem;
+        right: 0.5rem; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus:not([disabled])::before,
+      html:not([data-whatintent='touch'])
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus:not([disabled])::before,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled])::before,
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled])::before {
+        right: -0.5rem; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus:not([disabled]) .dnb-icon,
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus:not([disabled]) .dnb-icon,
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus:not([disabled]) .dnb-icon,
+      html:not([data-whatintent='touch'])
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus:not([disabled]) .dnb-icon,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled]) .dnb-icon,
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled]) .dnb-icon,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled]) .dnb-icon,
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled]) .dnb-icon {
+        opacity: 1; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active[disabled],
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active[disabled],
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active[disabled],
+      html:not([data-whatintent='touch'])
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active[disabled],
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active[disabled],
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active[disabled],
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active[disabled],
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active[disabled] {
+        cursor: not-allowed; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled]),
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled]),
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled]),
+      html:not([data-whatintent='touch'])
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled]),
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]),
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]),
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]),
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]) {
+        color: #14555a;
+        color: var(--color-emerald-green); }
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
+          content: '';
+          position: absolute;
+          z-index: 1;
+          top: 0;
+          left: -0.5rem;
+          bottom: 0;
+          right: -0.5rem;
+          height: inherit;
+          border-radius: inherit;
+          outline: none; }
+          html[data-whatinput='mouse'] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
+          html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
+          .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
+          html:not([data-whatintent='touch'])
+          .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
+          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
+          html:not([data-whatintent='touch'])
+          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
+          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
+          html:not([data-whatintent='touch'])
+          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
+            --border-color: var(--color-emerald-green);
+            -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+                    box-shadow: 0 0 0 0.125rem var(--border-color);
+            border-color: transparent; }
+            @media screen and (-ms-high-contrast: none) {
+              html[data-whatinput='mouse'] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
+              html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
+              .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
+              html:not([data-whatintent='touch'])
+              .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
+              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
+              html:not([data-whatintent='touch'])
+              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
+              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
+              html:not([data-whatintent='touch'])
+              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
+                -webkit-box-shadow: 0 0 0 0.125rem #14555a;
+                        box-shadow: 0 0 0 0.125rem #14555a;
+                -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
+                        box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
+          content: '';
+          position: absolute;
+          z-index: 1;
+          top: 0;
+          left: -0.5rem;
+          bottom: 0;
+          right: -0.5rem;
+          height: inherit;
+          border-radius: inherit;
+          outline: none; }
+          html[data-whatinput='touch'] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
+          html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
+          .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
+          html:not([data-whatintent='touch'])
+          .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
+          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
+          html:not([data-whatintent='touch'])
+          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
+          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
+          html:not([data-whatintent='touch'])
+          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
+            --border-color: var(--color-emerald-green);
+            -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+                    box-shadow: 0 0 0 0.125rem var(--border-color);
+            border-color: transparent; }
+            @media screen and (-ms-high-contrast: none) {
+              html[data-whatinput='touch'] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
+              html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
+              .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
+              html:not([data-whatintent='touch'])
+              .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
+              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
+              html:not([data-whatintent='touch'])
+              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
+              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
+              html:not([data-whatintent='touch'])
+              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
+                -webkit-box-shadow: 0 0 0 0.125rem #14555a;
+                        box-shadow: 0 0 0 0.125rem #14555a;
+                -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
+                        box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
+          content: '';
+          position: absolute;
+          top: -0.5rem;
+          bottom: -0.5rem;
+          left: -1rem;
+          right: 0.5rem; }
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
+          right: -0.5rem; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:hover:focus:not(:active) .dnb-button__text::after,
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:hover:focus:not(:active) .dnb-button__text::after,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover:focus:not(:active) .dnb-button__text::after,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover:focus:not(:active) .dnb-button__text::after {
+        visibility: hidden; }
+  .dnb-table > thead > tr > th.dnb-table--active .dnb-anchor:not(:hover) .dnb-button__text::after,
+  .dnb-table > thead > tr > th.dnb-table--active .dnb-button:not(:hover) .dnb-button__text::after,
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:not(:hover) .dnb-button__text::after,
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-button:not(:hover) .dnb-button__text::after {
+    opacity: 0; }
+  .dnb-table > thead > tr > th.dnb-table--active .dnb-anchor .dnb-icon,
+  .dnb-table > thead > tr > th.dnb-table--active .dnb-button .dnb-icon,
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor .dnb-icon,
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-button .dnb-icon {
+    opacity: 1; }
+  html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--active .dnb-anchor:hover[disabled], html:not([data-whatintent='touch'])
+  .dnb-table > thead > tr > th.dnb-table--active .dnb-button:hover[disabled], html:not([data-whatintent='touch'])
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:hover[disabled], html:not([data-whatintent='touch'])
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-button:hover[disabled] {
+    cursor: not-allowed; }
+  html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--active .dnb-anchor:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
+  .dnb-table > thead > tr > th.dnb-table--active .dnb-button:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-button:hover:not([disabled]) .dnb-button__text::after {
+    color: #007272;
+    color: var(--color-sea-green);
+    opacity: 1; }
+  .dnb-table > thead > tr > th.dnb-table--active .dnb-anchor:hover:focus:not(:active) .dnb-button__text::after,
+  .dnb-table > thead > tr > th.dnb-table--active .dnb-button:hover:focus:not(:active) .dnb-button__text::after,
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:hover:focus:not(:active) .dnb-button__text::after,
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-button:hover:focus:not(:active) .dnb-button__text::after {
+    visibility: visible; }
+  html[data-whatinput='keyboard']
+.dnb-table >
+thead > tr > th.dnb-table--active .dnb-anchor:hover:focus .dnb-button__text::after, html[data-whatinput='keyboard']
+  .dnb-table >
+thead > tr > th.dnb-table--active .dnb-button:hover:focus .dnb-button__text::after, html[data-whatinput='keyboard']
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:hover:focus .dnb-button__text::after, html[data-whatinput='keyboard']
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-button:hover:focus .dnb-button__text::after {
+    visibility: hidden; }
+  .dnb-table > thead > tr > th.dnb-table--reversed .dnb-anchor .dnb-icon,
+  .dnb-table > thead > tr > th.dnb-table--reversed .dnb-button .dnb-icon,
+  .dnb-table .dnb-table__th.dnb-table--reversed .dnb-anchor .dnb-icon,
+  .dnb-table .dnb-table__th.dnb-table--reversed .dnb-button .dnb-icon {
+    -webkit-transform: rotate(180deg);
+            transform: rotate(180deg);
+    -webkit-transform-origin: 50% 50%;
+            transform-origin: 50% 50%; }
+  .dnb-table > thead > tr > th.dnb-table--no-wrap,
+  .dnb-table > tbody > tr > th.dnb-table--no-wrap,
+  .dnb-table .dnb-table__th.dnb-table--no-wrap {
+    white-space: nowrap; }
 
 /*
 * Tabs theme
@@ -5080,7 +4999,7 @@ html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled]) {
                 box-shadow: inset 0 0 0 1px #333;
         -webkit-box-shadow: inset 0 0 0 1px var(--color-black-80);
                 box-shadow: inset 0 0 0 1px var(--color-black-80); } }
-  .dnb-timeline__item__label__name {
+  .dnb-timeline__item__label__title {
     margin-left: 1.25rem;
     margin-left: calc(
     calc(
@@ -5112,7 +5031,7 @@ html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled]) {
   .dnb-timeline__item--completed .dnb-timeline__item__content {
     border-left: 1px solid #333;
     border-left: 1px solid var(--color-black-80); }
-  .dnb-timeline__item--completed .dnb-timeline__item__label__name {
+  .dnb-timeline__item--completed .dnb-timeline__item__label__title {
     color: #333;
     color: var(--color-black-80); }
   .dnb-timeline__item--current .dnb-timeline__item__content {
@@ -5124,7 +5043,7 @@ html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled]) {
     padding-left: calc(2rem / 2 + 1rem);
     padding-left: calc(var(--timeline-icon-width--medium)/2 + var(--timeline-border-spacing));
     padding-left: calc(var(--timeline-icon-width--medium) / 2 + var(--timeline-border-spacing)); }
-  .dnb-timeline__item--current .dnb-timeline__item__label__name {
+  .dnb-timeline__item--current .dnb-timeline__item__label__title {
     margin-left: 1rem;
     margin-left: var(--timeline-border-spacing);
     font-weight: 500;
@@ -5145,7 +5064,7 @@ html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled]) {
     border-radius: var(--timeline-icon-border-radius--medium); }
   .dnb-timeline__item--current {
     margin-left: 0; }
-  .dnb-timeline__item--upcoming .dnb-timeline__item__label__name {
+  .dnb-timeline__item--upcoming .dnb-timeline__item__label__title {
     font-weight: normal;
     font-weight: var(--font-weight-basis);
     color: #737373;
@@ -5628,7 +5547,7 @@ html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled]) {
     background-color: var(--color-white); }
     .dnb-drawer-list__option.ignore-events {
       pointer-events: none; }
-    .dnb-drawer-list__option::before {
+    .dnb-drawer-list__option__inner::before {
       pointer-events: none;
       content: '';
       position: absolute;
@@ -5641,11 +5560,10 @@ html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled]) {
       height: var(--drawer-list-option-border-width);
       background-color: #e9f8f4;
       background-color: var(--color-mint-green-25); }
-    .dnb-drawer-list__option__item:nth-of-type(1) {
+    .dnb-drawer-list__option__item.item-nr-1 {
       font-weight: 500;
       font-weight: var(--font-weight-medium); }
     .dnb-drawer-list__option__inner {
-      padding-right: 2rem;
       background-color: #fff;
       background-color: var(--color-white); }
     html:not([data-whatintent='touch']) .dnb-drawer-list__option:hover[disabled] {
@@ -5665,7 +5583,7 @@ html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled]) {
     html:not([data-whatintent='touch']) .dnb-drawer-list__option:active:not([disabled]) .dnb-drawer-list__option__inner {
       color: #000;
       color: var(--color-black); }
-    .dnb-drawer-list__option--focus::before {
+    .dnb-drawer-list__option--focus .dnb-drawer-list__option__inner::before {
       z-index: 3;
       top: 0.125rem;
       top: var(--drawer-list-focus-border-width);
@@ -5684,42 +5602,63 @@ html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled]) {
               box-shadow: 0 0 0 var(--drawer-list-focus-border-width) var(--border-color);
       border-color: transparent; }
       @media screen and (-ms-high-contrast: none) {
-        .dnb-drawer-list__option--focus::before {
+        .dnb-drawer-list__option--focus .dnb-drawer-list__option__inner::before {
           -webkit-box-shadow: 0 0 0 0.125rem #14555a;
                   box-shadow: 0 0 0 0.125rem #14555a;
           -webkit-box-shadow: 0 0 0 var(--drawer-list-focus-border-width) var(--color-emerald-green);
                   box-shadow: 0 0 0 var(--drawer-list-focus-border-width) var(--color-emerald-green); } }
-    .dnb-drawer-list__option--selected {
+    .dnb-drawer-list__option--ignore .dnb-drawer-list__option__inner {
+      color: #333;
+      color: var(--color-black-80);
+      background-color: #fff;
+      background-color: var(--color-white); }
+    .dnb-drawer-list__option--selected .dnb-drawer-list__option__inner {
       color: #fff;
       color: var(--color-white);
       background-color: #14555a;
       background-color: var(--color-emerald-green); }
-      .dnb-drawer-list__option--selected .dnb-drawer-list__option__inner {
+      .dnb-drawer-list__option--selected .dnb-drawer-list__option__inner .dnb-drawer-list__option__inner {
         color: inherit;
         background-color: inherit; }
-      html:not([data-whatintent='touch']) .dnb-drawer-list__option--selected:hover[disabled] {
+      html:not([data-whatintent='touch']) .dnb-drawer-list__option--selected .dnb-drawer-list__option__inner:hover[disabled] {
         cursor: not-allowed; }
-      html:not([data-whatintent='touch']) .dnb-drawer-list__option--selected:hover:not([disabled]) {
+      html:not([data-whatintent='touch']) .dnb-drawer-list__option--selected .dnb-drawer-list__option__inner:hover:not([disabled]) {
         color: #fff;
         color: var(--color-white);
         background-color: #14555a;
         background-color: var(--color-emerald-green); }
-        html:not([data-whatintent='touch']) .dnb-drawer-list__option--selected:hover:not([disabled]) .dnb-drawer-list__option__inner {
+        html:not([data-whatintent='touch']) .dnb-drawer-list__option--selected .dnb-drawer-list__option__inner:hover:not([disabled]) .dnb-drawer-list__option__inner {
           color: inherit;
           background-color: inherit; }
-      .dnb-drawer-list__option--selected::after {
+      .dnb-drawer-list__option--selected .dnb-drawer-list__option__inner::after {
         content: '';
-        position: absolute;
-        z-index: 1;
-        top: calc(50% - 0.5rem);
-        right: 1rem;
         width: 1rem;
         height: 1rem;
         background-size: cover;
         background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSI+ICA8cGF0aCAgICBmaWxsPSIjRTlGOEY0IiAgICBkPSJNMyA4LjhhLjc1Ljc1IDAgMSAwLTEuMjIuODZMMyA4Ljc5em0xLjg0IDMuOWwuNjMtLjQxdi0uMDFoLS4wMWwtLjYyLjQyem0xLjcxLjA1bC0uNTktLjQ2di4wMWwuNTkuNDV6bTguNDMtOS40NWEuNzUuNzUgMCAwIDAtMS4xOC0uOTNsMS4xOC45M3pNMS43OCA5LjY2bDIuNDUgMy40OCAxLjIzLS44N0wzIDguOGwtMS4yMy44N3ptMi40NCAzLjQ2Yy4zMi40OC44Ni43OCAxLjQ0LjhsLjA1LTEuNWEuMy4zIDAgMCAxLS4yNC0uMTNsLTEuMjUuODN6bTEuNDQuOGExLjggMS44IDAgMCAwIDEuNDktLjcxbC0xLjItLjlhLjMuMyAwIDAgMS0uMjQuMWwtLjA1IDEuNXptMS40OC0uN2w3Ljg0LTkuOTItMS4xOC0uOTMtNy44NCA5LjkyIDEuMTguOTN6Ii8+PC9zdmc+); }
-      .dnb-drawer-list__option--selected::before {
+        @supports not (display: grid) {
+          .dnb-drawer-list__option--selected .dnb-drawer-list__option__inner::after {
+            position: absolute;
+            z-index: 1;
+            top: calc(50% - 0.5rem);
+            right: 1rem; } }
+        @supports (display: grid) {
+          .dnb-drawer-list__option--selected .dnb-drawer-list__option__inner::after {
+            grid-column: 2;
+            grid-row: 1 / -1;
+            justify-self: end;
+            align-self: center; } }
+      .dnb-drawer-list__option--selected .dnb-drawer-list__option__inner::before {
         visibility: hidden; }
-    html[data-whatinput='keyboard'] .dnb-drawer-list__option--selected.dnb-drawer-list__option--focus::before {
+    @media screen and (min-width: 40em) {
+      .dnb-drawer-list__option--selected .dnb-drawer-list__option__suffix {
+        z-index: 2;
+        background-color: inherit; }
+      .dnb-drawer-list__option:not(.dnb-drawer-list__option--selected) .dnb-drawer-list__option__suffix.dnb-drawer-list__option__item:nth-of-type(n + 2) {
+        color: #333;
+        color: var(--color-black-80); } }
+    html[data-whatinput='keyboard']
+.dnb-drawer-list__option--selected.dnb-drawer-list__option--focus .dnb-drawer-list__option__inner::before {
       visibility: visible;
       --border-color: var(--color-mint-green);
       -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
@@ -5728,29 +5667,27 @@ html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled]) {
               box-shadow: 0 0 0 var(--drawer-list-focus-border-width) var(--border-color);
       border-color: transparent; }
       @media screen and (-ms-high-contrast: none) {
-        html[data-whatinput='keyboard'] .dnb-drawer-list__option--selected.dnb-drawer-list__option--focus::before {
+        html[data-whatinput='keyboard']
+.dnb-drawer-list__option--selected.dnb-drawer-list__option--focus .dnb-drawer-list__option__inner::before {
           -webkit-box-shadow: 0 0 0 0.125rem #a5e1d2;
                   box-shadow: 0 0 0 0.125rem #a5e1d2;
           -webkit-box-shadow: 0 0 0 var(--drawer-list-focus-border-width) var(--color-mint-green);
                   box-shadow: 0 0 0 var(--drawer-list-focus-border-width) var(--color-mint-green); } }
-    .dnb-drawer-list__option--ignore .dnb-drawer-list__option__inner {
-      color: #333;
-      color: var(--color-black-80);
-      background-color: #fff;
-      background-color: var(--color-white); }
     .dnb-drawer-list__option--focus:not(.dnb-drawer-list__option--selected) .dnb-drawer-list__option__inner {
       color: #007272;
       color: var(--color-sea-green);
       background-color: #f4fbf9;
       background-color: var(--color-mint-green-12); }
-    .dnb-drawer-list__option--focus.first-of-type .dnb-drawer-list__option__inner, .dnb-drawer-list__option--focus.first-of-type::before {
+    .dnb-drawer-list__option--focus.first-of-type .dnb-drawer-list__option__inner,
+    .dnb-drawer-list__option--focus.first-of-type .dnb-drawer-list__option__inner::before {
       border-radius: 0.25rem 0.25rem 0 0;
       border-radius: var(--drawer-list-options-border-radius) var(--drawer-list-options-border-radius) 0 0; }
     .dnb-drawer-list__option.last-of-type,
-    .dnb-drawer-list__option--focus.last-of-type .dnb-drawer-list__option__inner, .dnb-drawer-list__option--focus.last-of-type::before {
+    .dnb-drawer-list__option--focus.last-of-type .dnb-drawer-list__option__inner,
+    .dnb-drawer-list__option--focus.last-of-type .dnb-drawer-list__option__inner::before {
       border-radius: 0 0 0.25rem 0.25rem;
       border-radius: 0 0 var(--drawer-list-options-border-radius) var(--drawer-list-options-border-radius); }
-    .dnb-drawer-list__option.last-of-type:not(.dnb-drawer-list__option--focus)::before {
+    .dnb-drawer-list__option.last-of-type:not(.dnb-drawer-list__option--focus) .dnb-drawer-list__option__inner::before {
       content: none; }
     .dnb-drawer-list__option--selected .dnb-drawer-list__option__item .dnb-anchor:focus {
       outline: none; }
@@ -5765,19 +5702,19 @@ html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled]) {
                     box-shadow: 0 0 0 0.125rem #fff;
             -webkit-box-shadow: 0 0 0 0.125rem var(--color-white);
                     box-shadow: 0 0 0 0.125rem var(--color-white); } }
-  .dnb-drawer-list--scroll .dnb-drawer-list__option:not(.dnb-drawer-list__option--focus)::before {
+  .dnb-drawer-list--scroll .dnb-drawer-list__option:not(.dnb-drawer-list__option--focus) .dnb-drawer-list__option__inner::before {
     left: 0.5rem;
     right: 0.5rem; }
-  .dnb-drawer-list--bottom .dnb-drawer-list__option--focus.closest-to-top::before {
+  .dnb-drawer-list--bottom .dnb-drawer-list__option--focus.closest-to-top .dnb-drawer-list__option__inner::before {
     border-radius: 0.25rem 0.25rem 0 0;
     border-radius: var(--drawer-list-options-border-radius) var(--drawer-list-options-border-radius) 0 0; }
-  .dnb-drawer-list--bottom .dnb-drawer-list__option--focus.closest-to-bottom::before {
+  .dnb-drawer-list--bottom .dnb-drawer-list__option--focus.closest-to-bottom .dnb-drawer-list__option__inner::before {
     border-radius: 0 0 0.25rem 0.25rem;
     border-radius: 0 0 var(--drawer-list-options-border-radius) var(--drawer-list-options-border-radius); }
-  .dnb-drawer-list--top .dnb-drawer-list__option--focus.closest-to-bottom::before {
+  .dnb-drawer-list--top .dnb-drawer-list__option--focus.closest-to-bottom .dnb-drawer-list__option__inner::before {
     border-radius: 0 0 0.25rem 0.25rem;
     border-radius: 0 0 var(--drawer-list-options-border-radius) var(--drawer-list-options-border-radius); }
-  .dnb-drawer-list--top .dnb-drawer-list__option--focus.closest-to-top::before {
+  .dnb-drawer-list--top .dnb-drawer-list__option--focus.closest-to-top .dnb-drawer-list__option__inner::before {
     border-radius: 0.25rem 0.25rem 0 0;
     border-radius: var(--drawer-list-options-border-radius) var(--drawer-list-options-border-radius) 0 0; }
   @media screen and (max-width: 40em) {