@dnb/eufemia 9.37.0 → 9.38.0

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

@@ -883,13 +883,12 @@
                 box-shadow: 0 0 0 0.0625rem var(--border-color);
         -webkit-box-shadow: 0 0 0 var(--input-border-width) var(--border-color);
                 box-shadow: 0 0 0 var(--input-border-width) var(--border-color); } }
-    @media not all and (min-resolution: 0.001dpcm) {
-      @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
-        .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
-          -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
-                  box-shadow: 0 0 0 0.0625rem var(--border-color);
-          -webkit-box-shadow: 0 0 0 var(--input-border-width) var(--border-color);
-                  box-shadow: 0 0 0 var(--input-border-width) var(--border-color); } } }
+    @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
+      .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
+        -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                box-shadow: 0 0 0 0.0625rem var(--border-color);
+        -webkit-box-shadow: 0 0 0 var(--input-border-width) var(--border-color);
+                box-shadow: 0 0 0 var(--input-border-width) var(--border-color); } }
     @media screen and (-ms-high-contrast: none) {
       .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
         -webkit-box-shadow: inset 0 0 0 1px #737373;
@@ -1975,20 +1974,19 @@ button.dnb-button::-moz-focus-inner {
       .dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(*:root),
       .dnb-core-style .dnb-date-picker__input:not(*:root) {
         margin: 0; } }
-    @media not all and (min-resolution: 0.001dpcm) {
-      @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
-        .dnb-date-picker__input:not(*:root),
-        .dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(*:root),
-        .dnb-core-style .dnb-date-picker__input:not(*:root) {
-          margin: 0 -4px; }
-        .dnb-date-picker__input:first-of-type:not(*:root),
-        .dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type:not(*:root),
-        .dnb-core-style .dnb-date-picker__input:first-of-type:not(*:root) {
-          margin-left: 0.8rem; }
-        .dnb-date-picker__input:last-of-type:not(*:root),
-        .dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type:not(*:root),
-        .dnb-core-style .dnb-date-picker__input:last-of-type:not(*:root) {
-          margin-right: 2.2rem; } } }
+    @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
+      .dnb-date-picker__input:not(*:root),
+      .dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(*:root),
+      .dnb-core-style .dnb-date-picker__input:not(*:root) {
+        margin: 0 -4px; }
+      .dnb-date-picker__input:first-of-type:not(*:root),
+      .dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type:not(*:root),
+      .dnb-core-style .dnb-date-picker__input:first-of-type:not(*:root) {
+        margin-left: 0.8rem; }
+      .dnb-date-picker__input:last-of-type:not(*:root),
+      .dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type:not(*:root),
+      .dnb-core-style .dnb-date-picker__input:last-of-type:not(*:root) {
+        margin-right: 2.2rem; } }
     .dnb-date-picker__input--small.dnb-date-picker__input--small, .dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small, .dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-date-picker__input--small__input,
     .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small.dnb-date-picker__input--small,
     .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small, .dnb-core-style .dnb-date-picker__input--small--has-submit-element
@@ -7247,10 +7245,262 @@ span.dnb-space--no-collapse > span {
       -webkit-transform: translateX(calc(var(--switch-width--medium) - 1.5rem));
               transform: translateX(calc(var(--switch-width--medium) - 1.5rem)); } }
 
+/*
+* Table component
+*
+*/
+/*
+* Button mixins
+*
+*/
+/*
+* Table component
+*
+*/
+.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]),
+  .dnb-table > thead > tr > th:not([align]), .dnb-table__th:not([align]) {
+    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__th__horizontal {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end; }
+
 /*
 * Table component
 *
 */
+.dnb-table {
+  --border: 0.0625rem solid var(--color-black-8);
+  --outline: 0.0625rem solid var(--color-black-8); }
+  .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.25rem;
+    padding-bottom: calc(1rem * 1.25);
+    padding-bottom: calc(var(--spacing-small)*1.25);
+    padding-bottom: calc(var(--spacing-small) * 1.25);
+    color: currentColor;
+    color: var(--theme-color-black-80, currentColor);
+    vertical-align: baseline; }
+  .dnb-table--border tbody .dnb-table__td {
+    z-index: 2; }
+    .dnb-table--border tbody .dnb-table__td::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: -1;
+      pointer-events: none;
+      border: var(--border);
+      border-right: none;
+      border-bottom: none; }
+    .dnb-table--border tbody .dnb-table__td:first-of-type::after {
+      border-left: none; }
+  .dnb-table:not(.dnb-table--outline) tbody .dnb-table__tr:last-of-type .dnb-table__td::after {
+    border-bottom: var(--border); }
+  .dnb-table--outline thead .dnb-table__th {
+    z-index: 2; }
+    .dnb-table--outline thead .dnb-table__th::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: -1;
+      pointer-events: none;
+      border-top: var(--outline); }
+    .dnb-table--outline thead .dnb-table__th:first-of-type::after {
+      border-left: var(--outline); }
+    .dnb-table--outline thead .dnb-table__th:last-of-type::after {
+      border-right: var(--outline); }
+  .dnb-table--outline tbody .dnb-table__td {
+    z-index: 2; }
+    .dnb-table--outline tbody .dnb-table__td:first-of-type::after, .dnb-table--outline tbody .dnb-table__td:last-of-type::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: -1;
+      pointer-events: none; }
+    .dnb-table--outline tbody .dnb-table__td:first-of-type::after {
+      border-left: var(--outline); }
+    .dnb-table--outline tbody .dnb-table__td:last-of-type::after {
+      border-right: var(--outline); }
+  .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td {
+    z-index: 2; }
+    .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: -1;
+      pointer-events: none;
+      border-bottom: var(--outline); }
+  .dnb-table--outline thead .dnb-table__th:first-of-type, .dnb-table--outline thead .dnb-table__th:first-of-type::after {
+    border-radius: 0.5rem 0 0 0; }
+  .dnb-table--outline thead .dnb-table__th:last-of-type, .dnb-table--outline thead .dnb-table__th:last-of-type::after {
+    border-radius: 0 0.5rem 0 0; }
+  .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:first-of-type, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:first-of-type::after {
+    border-radius: 0 0 0 0.5rem; }
+  .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type::after {
+    border-radius: 0 0 0.5rem 0; }
+  .dnb-table__td--no-spacing,
+  .dnb-table td.dnb-table__td--no-spacing {
+    padding: 0; }
+  .dnb-table__td--spacing-horizontal,
+  .dnb-table td.dnb-table__td--spacing-horizontal {
+    padding-top: 0;
+    padding-bottom: 0; }
+
+/*
+* Table component
+*
+*/
+.dnb-table > tbody > tr,
+.dnb-table .dnb-table__tr,
+.dnb-table .dnb-table__tr--even {
+  background-color: #f2f2f5;
+  background-color: var(--color-lavender); }
+
+.dnb-table > tbody > tr:not(.dnb-table__tr--even):nth-of-type(2n),
+.dnb-table .dnb-table__tr:not(.dnb-table__tr--even):nth-of-type(2n),
+.dnb-table .dnb-table__tr--odd {
+  background-color: #fff;
+  background-color: var(--color-white); }
+
+.dnb-table--outline thead .dnb-table__tr:first-of-type {
+  -webkit-clip-path: inset(0 round 0.5rem 0.5rem 0 0);
+          clip-path: inset(0 round 0.5rem 0.5rem 0 0); }
+
+.dnb-table--outline tbody .dnb-table__tr:last-of-type {
+  -webkit-clip-path: inset(0 round 0 0 0.5rem 0.5rem);
+          clip-path: inset(0 round 0 0 0.5rem 0.5rem); }
+
+/*
+* Table component
+*
+*/
+.dnb-table > tr > th,
+.dnb-table > tr > td,
+.dnb-table > thead > tr > th,
+.dnb-table > tbody > tr > td, .dnb-table__th, .dnb-table__td {
+  position: relative;
+  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; }
+
+/*
+* Table component
+*
+*/
+.dnb-table__sticky-helper > td {
+  display: block;
+  overflow: hidden;
+  padding: 0 !important;
+  height: 0; }
+
+.dnb-table tr.sticky th {
+  position: sticky;
+  top: 0;
+  top: var(--table-top, 0);
+  z-index: 2; }
+  .dnb-table tr.sticky th::before {
+    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::before {
+      -webkit-transition: none;
+      transition: none; }
+
+.dnb-table tr.sticky.show-shadow th::before {
+  opacity: 1; }
+
+/*
+* Table component
+*
+*/
+.dnb-table__container {
+  position: relative;
+  --border: 0.0625rem solid var(--color-black-8);
+  background-color: #fff;
+  background-color: var(--color-white); }
+  .dnb-table__container::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    pointer-events: none;
+    border: var(--border); }
+  .dnb-table__container, .dnb-table__container::after {
+    border-radius: 0.5rem; }
+  .dnb-table__container, .dnb-table__container__body, .dnb-table__container__head, .dnb-table__container__foot {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column; }
+  .dnb-table__container__body .dnb-table:not([class*='space__bottom']) {
+    margin-bottom: 0; }
+  .dnb-table__container__head {
+    padding: 2rem 1rem 0; }
+    .dnb-spacing .dnb-table__container__head .dnb-h--large:not([class*='space__top']) {
+      margin: 0; }
+  .dnb-table__container__foot {
+    padding: 0.5rem 1rem 2rem; }
+
 .dnb-table {
   display: table;
   table-layout: auto;
@@ -7261,16 +7511,13 @@ span.dnb-space--no-collapse > span {
   margin-bottom: var(--spacing-small);
   border-spacing: 0;
   border-collapse: collapse;
-  /* 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; }
+    table-layout: fixed;
+    width: auto; }
+  .dnb-table--no-wrap {
+    white-space: nowrap; }
   .dnb-table, .dnb-table--left {
     text-align: left; }
   .dnb-table--right {
@@ -7283,32 +7530,6 @@ span.dnb-space--no-collapse > span {
     margin-top: 0.5rem;
     margin-top: var(--spacing-x-small);
     caption-side: bottom; }
-  .dnb-table tr.sticky th {
-    position: sticky;
-    top: 0;
-    top: var(--table-top, 0);
-    z-index: 2; }
-    .dnb-table tr.sticky th::before {
-      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::before {
-        -webkit-transition: none;
-        transition: none; }
-  .dnb-table tr.sticky.show-shadow th::before {
-    opacity: 1; }
   .dnb-table--small,
   .dnb-table--small > tr > th,
   .dnb-table--small > tr > td,
@@ -7350,6 +7571,250 @@ span.dnb-space--no-collapse > span {
   .dnb-table.dnb-skeleton > * {
     -webkit-text-fill-color: #ebebeb;
     -webkit-text-fill-color: var(--skeleton-color); }
+  .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-table__sort-button.dnb-button,
+    .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.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-table__sort-button.dnb-button > .dnb-icon,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.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-table__sort-button.dnb-button > .dnb-icon, [data-visual-test-wrapper]
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon {
+          -webkit-transition: none;
+          transition: none; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text {
+        margin: 0;
+        font-size: inherit; }
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after {
+          right: 1rem; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.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-table__sort-button.dnb-button:not(:focus) .dnb-button__text::after,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.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-table__sort-button.dnb-button:hover[disabled], html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled] {
+        cursor: not-allowed; }
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]), html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.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-table__sort-button.dnb-button:hover:not([disabled]):not(:focus) .dnb-icon, html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.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-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after {
+          opacity: 0; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled] {
+        cursor: not-allowed; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before,
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before,
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.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-table__sort-button.dnb-button:focus:not([disabled])::before,
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before,
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before {
+        right: -0.5rem; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon,
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon,
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon {
+        opacity: 1; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled] {
+        cursor: not-allowed; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]) {
+        color: #14555a;
+        color: var(--color-emerald-green); }
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.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-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
+          html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
+          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
+          html:not([data-whatintent='touch'])
+          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.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-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
+              html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
+              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
+              html:not([data-whatintent='touch'])
+              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.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-table__sort-button.dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.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-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
+          html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
+          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
+          html:not([data-whatintent='touch'])
+          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.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-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
+              html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
+              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
+              html:not([data-whatintent='touch'])
+              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.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-table__sort-button.dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.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-table__sort-button.dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
+          right: -0.5rem; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after {
+        visibility: hidden; }
+    .dnb-table > thead > tr > th.dnb-table--sortable[align='right'],
+    .dnb-table .dnb-table__th.dnb-table--sortable[align='right'] {
+      padding-right: 0.5rem; }
+      .dnb-table > thead > tr > th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button,
+      .dnb-table .dnb-table__th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button {
+        -webkit-box-orient: horizontal;
+        -webkit-box-direction: reverse;
+            -ms-flex-direction: row-reverse;
+                flex-direction: row-reverse; }
+        .dnb-table > thead > tr > th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right,
+        .dnb-table .dnb-table__th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right {
+          padding-right: 0.5rem; }
+          .dnb-table > thead > tr > th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text,
+          .dnb-table .dnb-table__th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text {
+            padding-right: 0; }
+            .dnb-table > thead > tr > th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text::after,
+            .dnb-table .dnb-table__th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text::after {
+              right: 0; }
+  .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:not(:hover) .dnb-button__text::after,
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:not(:hover) .dnb-button__text::after {
+    opacity: 0; }
+  .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button .dnb-icon,
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button .dnb-icon {
+    opacity: 1; }
+  html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled], html:not([data-whatintent='touch'])
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled] {
+    cursor: not-allowed; }
+  html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.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-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after,
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.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-table__sort-button.dnb-button:hover:focus .dnb-button__text::after, html[data-whatinput='keyboard']
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus .dnb-button__text::after {
+    visibility: hidden; }
+  .dnb-table > thead > tr > th.dnb-table--reversed .dnb-table__sort-button.dnb-button .dnb-icon,
+  .dnb-table .dnb-table__th.dnb-table--reversed .dnb-table__sort-button.dnb-button .dnb-icon {
+    -webkit-transform: rotate(180deg);
+            transform: rotate(180deg);
+    -webkit-transform-origin: 50% 50%;
+            transform-origin: 50% 50%; }
+  .dnb-table .dnb-table__th .dnb-table__help-button,
+  .dnb-table > thead > tr > th .dnb-table__help-button {
+    margin-left: 0.5rem; }
 
 .dnb-spacing .dnb-table p,
 .dnb-spacing .dnb-table ul,
@@ -7613,11 +8078,10 @@ span.dnb-space--no-collapse > span {
     .dnb-tag--interactive.dnb-button {
       -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
               box-shadow: 0 0 0 0.0625rem var(--border-color); } }
-  @media not all and (min-resolution: 0.001dpcm) {
-    @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
-      .dnb-tag--interactive.dnb-button {
-        -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
-                box-shadow: 0 0 0 0.0625rem var(--border-color); } } }
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
+    .dnb-tag--interactive.dnb-button {
+      -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+              box-shadow: 0 0 0 0.0625rem var(--border-color); } }
   @media screen and (-ms-high-contrast: none) {
     .dnb-tag--interactive.dnb-button {
       -webkit-box-shadow: inset 0 0 0 1px #007272;
@@ -7669,12 +8133,11 @@ span.dnb-space--no-collapse > span {
         html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:focus:not([disabled]) {
           -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
                   box-shadow: 0 0 0 0.125rem var(--border-color); } }
-      @media not all and (min-resolution: 0.001dpcm) {
-        @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
-          html[data-whatinput='keyboard'] .dnb-tag--interactive.dnb-button:focus:not([disabled]), html[data-whatinput='keyboard']
-          html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:focus:not([disabled]) {
-            -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
-                    box-shadow: 0 0 0 0.125rem var(--border-color); } } }
+      @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
+        html[data-whatinput='keyboard'] .dnb-tag--interactive.dnb-button:focus:not([disabled]), html[data-whatinput='keyboard']
+        html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:focus:not([disabled]) {
+          -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+                  box-shadow: 0 0 0 0.125rem var(--border-color); } }
       @media screen and (-ms-high-contrast: none) {
         html[data-whatinput='keyboard'] .dnb-tag--interactive.dnb-button:focus:not([disabled]), html[data-whatinput='keyboard']
         html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:focus:not([disabled]) {
@@ -7752,12 +8215,11 @@ span.dnb-space--no-collapse > span {
         html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:focus:not([disabled]) {
           -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
                   box-shadow: 0 0 0 0.125rem var(--border-color); } }
-      @media not all and (min-resolution: 0.001dpcm) {
-        @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
-          html[data-whatinput='keyboard'] .dnb-tag--removable.dnb-button:focus:not([disabled]), html[data-whatinput='keyboard']
-          html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:focus:not([disabled]) {
-            -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
-                    box-shadow: 0 0 0 0.125rem var(--border-color); } } }
+      @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
+        html[data-whatinput='keyboard'] .dnb-tag--removable.dnb-button:focus:not([disabled]), html[data-whatinput='keyboard']
+        html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:focus:not([disabled]) {
+          -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+                  box-shadow: 0 0 0 0.125rem var(--border-color); } }
       @media screen and (-ms-high-contrast: none) {
         html[data-whatinput='keyboard'] .dnb-tag--removable.dnb-button:focus:not([disabled]), html[data-whatinput='keyboard']
         html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:focus:not([disabled]) {
@@ -8211,11 +8673,10 @@ span.dnb-space--no-collapse > span {
       .dnb-timeline__item__label__icon {
         -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
                 box-shadow: 0 0 0 0.0625rem var(--border-color); } }
-    @media not all and (min-resolution: 0.001dpcm) {
-      @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
-        .dnb-timeline__item__label__icon {
-          -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
-                  box-shadow: 0 0 0 0.0625rem var(--border-color); } } }
+    @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
+      .dnb-timeline__item__label__icon {
+        -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                box-shadow: 0 0 0 0.0625rem var(--border-color); } }
     @media screen and (-ms-high-contrast: none) {
       .dnb-timeline__item__label__icon {
         -webkit-box-shadow: inset 0 0 0 1px #333;
@@ -8307,11 +8768,10 @@ span.dnb-space--no-collapse > span {
       .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon {
         -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
                 box-shadow: 0 0 0 0.0625rem var(--border-color); } }
-    @media not all and (min-resolution: 0.001dpcm) {
-      @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
-        .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon {
-          -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
-                  box-shadow: 0 0 0 0.0625rem var(--border-color); } } }
+    @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
+      .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon {
+        -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                box-shadow: 0 0 0 0.0625rem var(--border-color); } }
     @media screen and (-ms-high-contrast: none) {
       .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon {
         -webkit-box-shadow: inset 0 0 0 1px #f8f8f8;