@dnb/eufemia 9.15.2 → 9.16.3

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

@@ -0,0 +1,732 @@
+/*
+* Button theme
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+* Button mixins
+*
+*/
+.dnb-button {
+  border: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  text-align: left; }
+  .dnb-button--primary {
+    color: #fff;
+    color: var(--color-white);
+    background-color: #007272;
+    background-color: var(--color-sea-green); }
+    html:not([data-whatintent='touch']) .dnb-button--primary:hover[disabled] {
+      cursor: not-allowed; }
+    html:not([data-whatintent='touch']) .dnb-button--primary:hover:not([disabled]) {
+      color: #007272;
+      color: var(--color-sea-green);
+      background-color: #fff;
+      background-color: var(--color-white);
+      --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:not([data-whatintent='touch']) .dnb-button--primary:hover:not([disabled]) {
+          -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); } }
+      @media screen and (-ms-high-contrast: none) {
+        html:not([data-whatintent='touch']) .dnb-button--primary:hover:not([disabled]) {
+          opacity: 1; } }
+    .dnb-button--primary:focus[disabled],
+    html:not([data-whatintent='touch']) .dnb-button--primary:focus[disabled] {
+      cursor: not-allowed; }
+    .dnb-button--primary:focus:not([disabled]),
+    html:not([data-whatintent='touch']) .dnb-button--primary:focus:not([disabled]) {
+      outline: none; }
+      html[data-whatinput='keyboard'] .dnb-button--primary:focus:not([disabled]), html[data-whatinput='keyboard']
+      html:not([data-whatintent='touch']) .dnb-button--primary:focus:not([disabled]) {
+        color: #007272;
+        color: var(--color-sea-green);
+        background-color: #fff;
+        background-color: var(--color-white); }
+      html[data-whatinput='keyboard'] .dnb-button--primary:focus:not([disabled]), html[data-whatinput='keyboard']
+      html:not([data-whatintent='touch']) .dnb-button--primary:focus:not([disabled]) {
+        --border-color: var(--color-emerald-green);
+        -webkit-box-shadow: inset 0 0 0 0.125rem var(--border-color);
+                box-shadow: inset 0 0 0 0.125rem var(--border-color);
+        /* iOS fix - because "inset" works not fine with border-radius */
+        /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+        border-color: transparent; }
+        @supports (-webkit-touch-callout: none) {
+          html[data-whatinput='keyboard'] .dnb-button--primary:focus:not([disabled]), html[data-whatinput='keyboard']
+          html:not([data-whatintent='touch']) .dnb-button--primary: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-button--primary:focus:not([disabled]), html[data-whatinput='keyboard']
+            html:not([data-whatintent='touch']) .dnb-button--primary: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-button--primary:focus:not([disabled]), html[data-whatinput='keyboard']
+          html:not([data-whatintent='touch']) .dnb-button--primary:focus:not([disabled]) {
+            -webkit-box-shadow: inset 0 0 0 0.125rem #14555a;
+                    box-shadow: inset 0 0 0 0.125rem #14555a;
+            -webkit-box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green);
+                    box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green); } }
+    .dnb-button--primary:active[disabled],
+    html:not([data-whatintent='touch']) .dnb-button--primary:active[disabled] {
+      cursor: not-allowed; }
+    .dnb-button--primary:active:not([disabled]),
+    html:not([data-whatintent='touch']) .dnb-button--primary:active:not([disabled]) {
+      color: #007272;
+      color: var(--color-sea-green);
+      background-color: #d2f0e9;
+      background-color: var(--color-mint-green-50);
+      --border-color: transparent;
+      -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+              box-shadow: 0 0 0 0.0625rem var(--border-color);
+      border-color: transparent; }
+      @media screen and (-ms-high-contrast: none) {
+        .dnb-button--primary:active:not([disabled]),
+        html:not([data-whatintent='touch']) .dnb-button--primary:active:not([disabled]) {
+          -webkit-box-shadow: 0 0 0 0.0625rem transparent;
+                  box-shadow: 0 0 0 0.0625rem transparent; } }
+    .dnb-button--primary[disabled] {
+      color: #fff;
+      color: var(--color-white);
+      background-color: #b3dada;
+      background-color: var(--color-sea-green-30); }
+  .dnb-button:not([disabled]).dnb-button--primary.dnb-button__status--error {
+    color: #fff;
+    color: var(--color-white);
+    background-color: #dc2a2a;
+    background-color: var(--color-fire-red); }
+  .dnb-button--secondary {
+    color: #007272;
+    color: var(--color-sea-green);
+    background-color: #fff;
+    background-color: var(--color-white);
+    --border-color: var(--color-sea-green);
+    -webkit-box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+            box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+    /* iOS fix - because "inset" works not fine with border-radius */
+    /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+    border-color: transparent; }
+    @supports (-webkit-touch-callout: none) {
+      .dnb-button--secondary {
+        -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-button--secondary {
+          -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-button--secondary {
+        -webkit-box-shadow: inset 0 0 0 1px #007272;
+                box-shadow: inset 0 0 0 1px #007272;
+        -webkit-box-shadow: inset 0 0 0 1px var(--color-sea-green);
+                box-shadow: inset 0 0 0 1px var(--color-sea-green); } }
+    html:not([data-whatintent='touch']) .dnb-button--secondary:hover[disabled] {
+      cursor: not-allowed; }
+    html:not([data-whatintent='touch']) .dnb-button--secondary:hover:not([disabled]) {
+      color: #007272;
+      color: var(--color-sea-green);
+      background-color: #fff;
+      background-color: var(--color-white);
+      --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:not([data-whatintent='touch']) .dnb-button--secondary:hover:not([disabled]) {
+          -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); } }
+      @media screen and (-ms-high-contrast: none) {
+        html:not([data-whatintent='touch']) .dnb-button--secondary:hover:not([disabled]) {
+          opacity: 1; } }
+    .dnb-button--secondary:focus[disabled],
+    html:not([data-whatintent='touch']) .dnb-button--secondary:focus[disabled] {
+      cursor: not-allowed; }
+    .dnb-button--secondary:focus:not([disabled]),
+    html:not([data-whatintent='touch']) .dnb-button--secondary:focus:not([disabled]) {
+      outline: none; }
+      html[data-whatinput='keyboard'] .dnb-button--secondary:focus:not([disabled]), html[data-whatinput='keyboard']
+      html:not([data-whatintent='touch']) .dnb-button--secondary:focus:not([disabled]) {
+        color: #007272;
+        color: var(--color-sea-green);
+        background-color: #fff;
+        background-color: var(--color-white); }
+      html[data-whatinput='keyboard'] .dnb-button--secondary:focus:not([disabled]), html[data-whatinput='keyboard']
+      html:not([data-whatintent='touch']) .dnb-button--secondary:focus:not([disabled]) {
+        --border-color: var(--color-emerald-green);
+        -webkit-box-shadow: inset 0 0 0 0.125rem var(--border-color);
+                box-shadow: inset 0 0 0 0.125rem var(--border-color);
+        /* iOS fix - because "inset" works not fine with border-radius */
+        /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+        border-color: transparent; }
+        @supports (-webkit-touch-callout: none) {
+          html[data-whatinput='keyboard'] .dnb-button--secondary:focus:not([disabled]), html[data-whatinput='keyboard']
+          html:not([data-whatintent='touch']) .dnb-button--secondary: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-button--secondary:focus:not([disabled]), html[data-whatinput='keyboard']
+            html:not([data-whatintent='touch']) .dnb-button--secondary: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-button--secondary:focus:not([disabled]), html[data-whatinput='keyboard']
+          html:not([data-whatintent='touch']) .dnb-button--secondary:focus:not([disabled]) {
+            -webkit-box-shadow: inset 0 0 0 0.125rem #14555a;
+                    box-shadow: inset 0 0 0 0.125rem #14555a;
+            -webkit-box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green);
+                    box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green); } }
+    .dnb-button--secondary:active[disabled],
+    html:not([data-whatintent='touch']) .dnb-button--secondary:active[disabled] {
+      cursor: not-allowed; }
+    .dnb-button--secondary:active:not([disabled]),
+    html:not([data-whatintent='touch']) .dnb-button--secondary:active:not([disabled]) {
+      color: #007272;
+      color: var(--color-sea-green);
+      background-color: #d2f0e9;
+      background-color: var(--color-mint-green-50);
+      --border-color: transparent;
+      -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+              box-shadow: 0 0 0 0.0625rem var(--border-color);
+      border-color: transparent; }
+      @media screen and (-ms-high-contrast: none) {
+        .dnb-button--secondary:active:not([disabled]),
+        html:not([data-whatintent='touch']) .dnb-button--secondary:active:not([disabled]) {
+          -webkit-box-shadow: 0 0 0 0.0625rem transparent;
+                  box-shadow: 0 0 0 0.0625rem transparent; } }
+    html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):hover[disabled] {
+      cursor: not-allowed; }
+    html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):hover:not([disabled]) {
+      color: #14555a;
+      color: var(--color-emerald-green);
+      background-color: #fff;
+      background-color: var(--color-white);
+      --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:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):hover:not([disabled]) {
+          -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); } }
+      @media screen and (-ms-high-contrast: none) {
+        html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):hover:not([disabled]) {
+          opacity: 1; } }
+    .dnb-button--secondary:not(.dnb-button--has-text):focus[disabled],
+    html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):focus[disabled] {
+      cursor: not-allowed; }
+    .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),
+    html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) {
+      outline: none; }
+      html[data-whatinput='keyboard'] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput='keyboard']
+      html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) {
+        color: #14555a;
+        color: var(--color-emerald-green);
+        background-color: #fff;
+        background-color: var(--color-white); }
+      html[data-whatinput='keyboard'] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput='keyboard']
+      html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) {
+        --border-color: var(--color-emerald-green);
+        -webkit-box-shadow: inset 0 0 0 0.125rem var(--border-color);
+                box-shadow: inset 0 0 0 0.125rem var(--border-color);
+        /* iOS fix - because "inset" works not fine with border-radius */
+        /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+        border-color: transparent; }
+        @supports (-webkit-touch-callout: none) {
+          html[data-whatinput='keyboard'] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput='keyboard']
+          html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):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-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput='keyboard']
+            html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):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-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput='keyboard']
+          html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) {
+            -webkit-box-shadow: inset 0 0 0 0.125rem #14555a;
+                    box-shadow: inset 0 0 0 0.125rem #14555a;
+            -webkit-box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green);
+                    box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green); } }
+    .dnb-button--secondary:not(.dnb-button--has-text):active[disabled],
+    html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):active[disabled] {
+      cursor: not-allowed; }
+    .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),
+    html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]) {
+      color: #14555a;
+      color: var(--color-emerald-green);
+      background-color: #d2f0e9;
+      background-color: var(--color-mint-green-50);
+      --border-color: transparent;
+      -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+              box-shadow: 0 0 0 0.0625rem var(--border-color);
+      border-color: transparent; }
+      @media screen and (-ms-high-contrast: none) {
+        .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),
+        html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]) {
+          -webkit-box-shadow: 0 0 0 0.0625rem transparent;
+                  box-shadow: 0 0 0 0.0625rem transparent; } }
+    .dnb-button--secondary[disabled], .dnb-button--secondary[disabled]:focus {
+      color: #b3dada;
+      color: var(--color-sea-green-30);
+      background-color: #fff;
+      background-color: var(--color-white);
+      --border-color: var(--color-sea-green-30);
+      -webkit-box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+              box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+      /* iOS fix - because "inset" works not fine with border-radius */
+      /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+      border-color: transparent; }
+      @supports (-webkit-touch-callout: none) {
+        .dnb-button--secondary[disabled], .dnb-button--secondary[disabled]:focus {
+          -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-button--secondary[disabled], .dnb-button--secondary[disabled]:focus {
+            -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-button--secondary[disabled], .dnb-button--secondary[disabled]:focus {
+          -webkit-box-shadow: inset 0 0 0 1px #b3dada;
+                  box-shadow: inset 0 0 0 1px #b3dada;
+          -webkit-box-shadow: inset 0 0 0 1px var(--color-sea-green-30);
+                  box-shadow: inset 0 0 0 1px var(--color-sea-green-30); } }
+  .dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error {
+    color: #dc2a2a;
+    color: var(--color-fire-red);
+    --border-color: var(--color-fire-red);
+    -webkit-box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+            box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+    /* iOS fix - because "inset" works not fine with border-radius */
+    /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+    border-color: transparent; }
+    @supports (-webkit-touch-callout: none) {
+      .dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error {
+        -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-button:not([disabled]).dnb-button--secondary.dnb-button__status--error {
+          -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-button:not([disabled]).dnb-button--secondary.dnb-button__status--error {
+        -webkit-box-shadow: inset 0 0 0 1px #dc2a2a;
+                box-shadow: inset 0 0 0 1px #dc2a2a;
+        -webkit-box-shadow: inset 0 0 0 1px var(--color-fire-red);
+                box-shadow: inset 0 0 0 1px var(--color-fire-red); } }
+    .dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error .dnb-button__icon {
+      color: inherit; }
+  .dnb-button--active {
+    --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) {
+      .dnb-button--active {
+        -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-button--tertiary {
+    position: relative;
+    color: #007272;
+    color: var(--color-sea-green);
+    background-color: transparent; }
+    .dnb-button--tertiary .dnb-button__text {
+      position: relative; }
+      .dnb-button--tertiary .dnb-button__text::after {
+        content: '';
+        position: absolute;
+        z-index: 1;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: auto;
+        height: 0.095rem;
+        border-radius: 0.0475rem;
+        border-radius: calc(0.095rem / 2);
+        color: #007272;
+        color: var(--color-sea-green);
+        background-color: currentColor;
+        bottom: -0.0625rem;
+        color: transparent;
+        -webkit-transition: color 250ms ease-in-out;
+        transition: color 250ms ease-in-out; }
+        @media screen and (-ms-high-contrast: none) {
+          .dnb-button--tertiary .dnb-button__text::after {
+            height: 1px;
+            border-radius: 0.5px; } }
+        [data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text::after {
+          -webkit-transition: none;
+          transition: none; }
+      .dnb-skeleton .dnb-button--tertiary .dnb-button__text::after {
+        content: none; }
+    .dnb-button--tertiary.dnb-button--has-text {
+      padding-left: 0.5rem;
+      padding-right: 0.5rem; }
+    .dnb-button--tertiary.dnb-button--has-icon .dnb-button__text::after {
+      left: -0.5rem;
+      right: -0.5rem; }
+    .dnb-button--tertiary:focus[disabled],
+    html:not([data-whatintent='touch']) .dnb-button--tertiary:focus[disabled] {
+      cursor: not-allowed; }
+    .dnb-button--tertiary:focus:not([disabled]),
+    html:not([data-whatintent='touch']) .dnb-button--tertiary:focus:not([disabled]) {
+      outline: medium none invert;
+      outline: initial; }
+      html[data-whatinput='keyboard'] .dnb-button--tertiary:focus:not([disabled]), html[data-whatinput='keyboard']
+      html:not([data-whatintent='touch']) .dnb-button--tertiary:focus:not([disabled]) {
+        -webkit-box-shadow: none;
+                box-shadow: none; }
+      .dnb-button--tertiary:focus:not([disabled])::before,
+      html:not([data-whatintent='touch']) .dnb-button--tertiary:focus: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='keyboard'] .dnb-button--tertiary:focus:not([disabled])::before, html[data-whatinput='keyboard']
+        html:not([data-whatintent='touch']) .dnb-button--tertiary:focus: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='keyboard'] .dnb-button--tertiary:focus:not([disabled])::before, html[data-whatinput='keyboard']
+            html:not([data-whatintent='touch']) .dnb-button--tertiary:focus: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-button--tertiary:focus:not([disabled]) .dnb-button__text::after,
+      html:not([data-whatintent='touch']) .dnb-button--tertiary:focus:not([disabled]) .dnb-button__text::after {
+        visibility: hidden; }
+    html:not([data-whatintent='touch']) .dnb-button--tertiary:hover[disabled] {
+      cursor: not-allowed; }
+    html:not([data-whatintent='touch']) .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text::after {
+      visibility: visible;
+      color: #14555a;
+      color: var(--color-emerald-green); }
+    .dnb-button--tertiary:active[disabled],
+    html:not([data-whatintent='touch']) .dnb-button--tertiary:active[disabled] {
+      cursor: not-allowed; }
+    .dnb-button--tertiary:active:not([disabled]),
+    html:not([data-whatintent='touch']) .dnb-button--tertiary:active:not([disabled]) {
+      outline: medium none invert;
+      outline: initial; }
+      html[data-whatinput='keyboard'] .dnb-button--tertiary:active:not([disabled]), html[data-whatinput='keyboard']
+      html:not([data-whatintent='touch']) .dnb-button--tertiary:active:not([disabled]) {
+        -webkit-box-shadow: none;
+                box-shadow: none; }
+      html[data-whatintent='touch'] .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after, html[data-whatintent='touch']
+      html:not([data-whatintent='touch']) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after {
+        -webkit-transition: none;
+        transition: none;
+        visibility: visible;
+        opacity: 1;
+        color: #14555a;
+        color: var(--color-emerald-green); }
+      html:not([data-whatintent='touch']) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
+      html:not([data-whatintent='touch']) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after {
+        visibility: hidden; }
+    .dnb-button--tertiary .dnb-button__icon {
+      -ms-flex-item-align: start;
+          align-self: flex-start;
+      margin-top: 0.75rem; }
+    .dnb-button--tertiary.dnb-button--size-large .dnb-button__icon,
+    .dnb-button--tertiary.dnb-button--size-small .dnb-button__icon {
+      margin-top: 0.25rem; }
+    .dnb-button--tertiary.dnb-button--size-medium .dnb-button__icon {
+      margin-top: 0.5rem; }
+    .dnb-button--tertiary.dnb-button--icon-position-top {
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+          -ms-flex-direction: column;
+              flex-direction: column;
+      border-radius: 0.5rem;
+      vertical-align: middle; }
+      .dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text {
+        padding: 0; }
+      .dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__icon {
+        margin-top: 0.5rem;
+        -ms-flex-item-align: center;
+            align-self: center; }
+      .dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text {
+        margin-top: 0;
+        margin-bottom: 0.25rem;
+        font-size: 0.875rem;
+        font-size: var(--font-size-x-small); }
+        .dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text::after {
+          left: 0;
+          right: 0; }
+      .dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text {
+        font-size: 1rem;
+        font-size: var(--font-size-small); }
+      .dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__alignment {
+        -webkit-box-ordinal-group: 4;
+            -ms-flex-order: 3;
+                order: 3;
+        height: 0; }
+    .dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large .dnb-button__icon,
+    .dnb-button--tertiary:not(.dnb-button--size-large) .dnb-button__icon.dnb-icon--medium {
+      margin-top: 0.5rem; }
+    .dnb-button--tertiary.dnb-button--size-large,
+    .dnb-core-style .dnb-button--tertiary.dnb-button--size-large {
+      line-height: 2rem;
+      line-height: var(--button-height--medium); }
+    .dnb-button--tertiary.dnb-button--size-large.dnb-button--has-icon:not(.dnb-button--has-text) {
+      width: 2rem;
+      width: var(--button-width--medium); }
+    .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left {
+      padding-left: 0;
+      padding-right: 0.5rem; }
+      .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text {
+        padding-left: 1rem; }
+        .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text::after {
+          right: 0; }
+      .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon {
+        margin-right: -0.5rem; }
+      .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text, .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text {
+        padding-left: 0;
+        margin-left: 1rem; }
+        .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text::after, .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text::after {
+          left: 0; }
+    .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right {
+      padding-right: 0;
+      padding-left: 0.5rem;
+      /* stylelint-disable */
+      /* stylelint-enable */ }
+      .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text {
+        padding-right: 1rem; }
+        .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text::after {
+          left: 0; }
+      .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon {
+        margin-left: -0.5rem; }
+      .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text, .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text {
+        padding-right: 0;
+        margin-right: 1rem; }
+        .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text::after, .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text::after {
+          right: 0; }
+    .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled],
+    html:not([data-whatintent='touch']) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled] {
+      cursor: not-allowed; }
+    .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled])::before,
+    html:not([data-whatintent='touch']) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled])::before {
+      left: 0;
+      right: 0; }
+    html:not([data-whatintent='touch']) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):hover[disabled] {
+      cursor: not-allowed; }
+    html:not([data-whatintent='touch']) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):hover:not([disabled]) {
+      --border-color: var(--color-sea-green);
+      -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+              box-shadow: 0 0 0 0.0625rem var(--border-color);
+      border-color: transparent; }
+      @media screen and (-ms-high-contrast: none) {
+        html:not([data-whatintent='touch']) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):hover:not([disabled]) {
+          -webkit-box-shadow: 0 0 0 0.0625rem #007272;
+                  box-shadow: 0 0 0 0.0625rem #007272;
+          -webkit-box-shadow: 0 0 0 0.0625rem var(--color-sea-green);
+                  box-shadow: 0 0 0 0.0625rem var(--color-sea-green); } }
+    .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active[disabled],
+    html:not([data-whatintent='touch']) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active[disabled] {
+      cursor: not-allowed; }
+    .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]),
+    html:not([data-whatintent='touch']) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]) {
+      --border-color: var(--color-sea-green-30);
+      -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+              box-shadow: 0 0 0 0.0625rem var(--border-color);
+      border-color: transparent; }
+      @media screen and (-ms-high-contrast: none) {
+        .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]),
+        html:not([data-whatintent='touch']) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]) {
+          -webkit-box-shadow: 0 0 0 0.0625rem #b3dada;
+                  box-shadow: 0 0 0 0.0625rem #b3dada;
+          -webkit-box-shadow: 0 0 0 0.0625rem var(--color-sea-green-30);
+                  box-shadow: 0 0 0 0.0625rem var(--color-sea-green-30); } }
+    html[data-whatinput='keyboard']
+.dnb-button--tertiary:hover:focus .dnb-button__text::after {
+      visibility: hidden; }
+    .dnb-button--tertiary[disabled] {
+      color: #b3dada;
+      color: var(--color-sea-green-30); }
+  .dnb-button--signal {
+    color: #00343e;
+    color: var(--color-ocean-green);
+    background-color: #fdbb31;
+    background-color: var(--color-accent-yellow); }
+    html:not([data-whatintent='touch']) .dnb-button--signal:hover[disabled] {
+      cursor: not-allowed; }
+    html:not([data-whatintent='touch']) .dnb-button--signal:hover:not([disabled]) {
+      color: #00343e;
+      color: var(--color-ocean-green);
+      background-color: #fdbb31;
+      background-color: var(--color-accent-yellow);
+      --border-color: var(--color-ocean-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:not([data-whatintent='touch']) .dnb-button--signal:hover:not([disabled]) {
+          -webkit-box-shadow: 0 0 0 0.125rem #00343e;
+                  box-shadow: 0 0 0 0.125rem #00343e;
+          -webkit-box-shadow: 0 0 0 0.125rem var(--color-ocean-green);
+                  box-shadow: 0 0 0 0.125rem var(--color-ocean-green); } }
+      @media screen and (-ms-high-contrast: none) {
+        html:not([data-whatintent='touch']) .dnb-button--signal:hover:not([disabled]) {
+          opacity: 1; } }
+    html[data-whatintent='touch'] .dnb-button--signal:active[disabled],
+    html:not([data-whatintent='touch']) html[data-whatintent='touch'] .dnb-button--signal:active[disabled] {
+      cursor: not-allowed; }
+    html[data-whatintent='touch'] .dnb-button--signal:active:not([disabled]),
+    html:not([data-whatintent='touch']) html[data-whatintent='touch'] .dnb-button--signal:active:not([disabled]) {
+      color: #00343e;
+      color: var(--color-ocean-green);
+      background-color: #fdbb31;
+      background-color: var(--color-accent-yellow);
+      --border-color: var(--color-ocean-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-whatintent='touch'] .dnb-button--signal:active:not([disabled]),
+        html:not([data-whatintent='touch']) html[data-whatintent='touch'] .dnb-button--signal:active:not([disabled]) {
+          -webkit-box-shadow: 0 0 0 0.125rem #00343e;
+                  box-shadow: 0 0 0 0.125rem #00343e;
+          -webkit-box-shadow: 0 0 0 0.125rem var(--color-ocean-green);
+                  box-shadow: 0 0 0 0.125rem var(--color-ocean-green); } }
+    .dnb-button--signal:focus[disabled],
+    html:not([data-whatintent='touch']) .dnb-button--signal:focus[disabled] {
+      cursor: not-allowed; }
+    .dnb-button--signal:focus:not([disabled]),
+    html:not([data-whatintent='touch']) .dnb-button--signal:focus:not([disabled]) {
+      outline: none; }
+      html[data-whatinput='keyboard'] .dnb-button--signal:focus:not([disabled]), html[data-whatinput='keyboard']
+      html:not([data-whatintent='touch']) .dnb-button--signal:focus:not([disabled]) {
+        color: #00343e;
+        color: var(--color-ocean-green);
+        background-color: #fdbb31;
+        background-color: var(--color-accent-yellow); }
+      html[data-whatinput='keyboard'] .dnb-button--signal:focus:not([disabled]), html[data-whatinput='keyboard']
+      html:not([data-whatintent='touch']) .dnb-button--signal:focus:not([disabled]) {
+        --border-color: var(--color-emerald-green);
+        -webkit-box-shadow: inset 0 0 0 0.125rem var(--border-color);
+                box-shadow: inset 0 0 0 0.125rem var(--border-color);
+        /* iOS fix - because "inset" works not fine with border-radius */
+        /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+        border-color: transparent; }
+        @supports (-webkit-touch-callout: none) {
+          html[data-whatinput='keyboard'] .dnb-button--signal:focus:not([disabled]), html[data-whatinput='keyboard']
+          html:not([data-whatintent='touch']) .dnb-button--signal: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-button--signal:focus:not([disabled]), html[data-whatinput='keyboard']
+            html:not([data-whatintent='touch']) .dnb-button--signal: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-button--signal:focus:not([disabled]), html[data-whatinput='keyboard']
+          html:not([data-whatintent='touch']) .dnb-button--signal:focus:not([disabled]) {
+            -webkit-box-shadow: inset 0 0 0 0.125rem #14555a;
+                    box-shadow: inset 0 0 0 0.125rem #14555a;
+            -webkit-box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green);
+                    box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green); } }
+    .dnb-button--signal:active[disabled],
+    html:not([data-whatintent='touch']) .dnb-button--signal:active[disabled] {
+      cursor: not-allowed; }
+    .dnb-button--signal:active:not([disabled]),
+    html:not([data-whatintent='touch']) .dnb-button--signal:active:not([disabled]) {
+      color: #00343e;
+      color: var(--color-ocean-green);
+      background-color: #fdbb31;
+      background-color: var(--color-accent-yellow);
+      --border-color: transparent;
+      -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+              box-shadow: 0 0 0 0.0625rem var(--border-color);
+      border-color: transparent; }
+      @media screen and (-ms-high-contrast: none) {
+        .dnb-button--signal:active:not([disabled]),
+        html:not([data-whatintent='touch']) .dnb-button--signal:active:not([disabled]) {
+          -webkit-box-shadow: 0 0 0 0.0625rem transparent;
+                  box-shadow: 0 0 0 0.0625rem transparent; } }
+    .dnb-button--signal[disabled] {
+      color: #ccc;
+      color: var(--color-black-20);
+      background-color: #feebc1;
+      background-color: var(--color-accent-yellow-30); }
+  .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text), .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]) {
+    background-color: transparent;
+    -webkit-box-shadow: none;
+            box-shadow: none; }
+    .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text)::after, .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled])::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 0.0625rem;
+      background-color: currentColor; }
+  html:not([data-whatintent='touch'])
+.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus, html:not([data-whatintent='touch'])
+.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover {
+    color: #fff;
+    color: var(--color-white);
+    -webkit-box-shadow: none;
+            box-shadow: none; }
+    html:not([data-whatintent='touch'])
+.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus, html:not([data-whatintent='touch'])
+.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus::after, html:not([data-whatintent='touch'])
+.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover, html:not([data-whatintent='touch'])
+.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover::after {
+      background-color: #007272;
+      background-color: var(--color-sea-green); }
+  html:not([data-whatintent='touch'])
+.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):not(:active):hover {
+    border-radius: 0; }
+  html:not([data-whatintent='touch'])
+.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active {
+    color: #007272;
+    color: var(--color-sea-green);
+    -webkit-box-shadow: none;
+            box-shadow: none; }
+    html:not([data-whatintent='touch'])
+.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active, html:not([data-whatintent='touch'])
+.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active::after {
+      background-color: #d2f0e9;
+      background-color: var(--color-mint-green-50); }
+  html:not([data-whatintent='touch'])
+.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text)[disabled] {
+    color: #737373;
+    color: var(--color-black-55);
+    background-color: #f8f8f8;
+    background-color: var(--color-black-3); }