@dnb/eufemia 10.4.2 → 10.6.0

package/cjs/components/button/style/themes/button-mixins.scss

@@ -51,21 +51,35 @@
   }
 }
 
-@mixin buttonFocus($color, $background-color, $focus-color: null) {
+@mixin buttonFocus(
+  $color,
+  $background-color,
+  $focus-color: null,
+  $extendShadow: null
+) {
   @include focus() {
     html[data-whatinput='keyboard'] & {
       color: $color;
       background-color: $background-color;
     }
 
-    @include focusRing(null, $focus-color, inset);
+    @include focusRing(
+      null,
+      $focus-color,
+      inset,
+      $extendShadow: $extendShadow
+    );
 
     @content;
   }
 }
 
 // Used in tertiary button variant
-@mixin buttonFocusRing($whatinput: null, $inset: null) {
+@mixin buttonFocusRing(
+  $whatinput: null,
+  $inset: null,
+  $extendShadow: null
+) {
   // Create focus-ring
   &::before {
     content: '';
@@ -80,7 +94,12 @@
     height: inherit;
     border-radius: inherit;
 
-    @include focusRing($whatinput, null, $inset);
+    @include focusRing(
+      $whatinput,
+      null,
+      $inset,
+      $extendShadow: $extendShadow
+    );
   }
 }
 

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

@@ -210,24 +210,26 @@ html[data-whatinput=keyboard] .dnb-button--tertiary:hover:focus .dnb-button__tex
   visibility: hidden;
 }
 
-.dnb-button--secondary:focus[disabled], .dnb-button--primary:focus[disabled] {
-  cursor: not-allowed;
-}
-.dnb-button--secondary:focus:not([disabled]), .dnb-button--primary:focus:not([disabled]) {
-  outline: none;
-}
-html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]), html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]) {
-  color: var(--sb-color-blue-dark);
-  background-color: var(--sb-color-blue-light-3);
-}
-html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]), html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]) {
-  --border-color: var(--focus-ring-color);
-  --border-width: var(--focus-ring-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-
 .dnb-button {
+  --button-background--focus: var(--sb-color-blue-light-3);
+  --button-primary-shadow: var(--sb-shadow-medium);
+  --button-primary-shadow--hover: var(--sb-shadow-medium);
+  --button-primary-color: var(--sb-color-green);
+  --button-primary-color--hover: var(--sb-color-purple-alternative);
+  --button-primary-color--active: var(--sb-color-green);
+  --button-primary-color--disabled: var(--sb-color-gray-dark-2);
+  --button-primary-background: var(--sb-color-purple-alternative);
+  --button-primary-background--hover: var(--sb-color-green);
+  --button-primary-background--active: var(--sb-color-purple-alternative);
+  --button-primary-background--disabled: var(--sb-color-gray-light);
+  --button-primary-border--hover: transparent;
+  --button-secondary-color: var(--sb-color-purple-alternative);
+  --button-secondary-color--disabled: var(--sb-color-gray-dark);
+  --button-secondary-background: var(--sb-color-white);
+  --button-secondary-background--hover: var(--sb-color-green);
+  --button-secondary-background--active: var(--sb-color-white);
+  --button-secondary-border: var(--sb-color-purple-alternative);
+  --button-secondary-border--disabled: var(--sb-color-gray-light);
   border: none;
 }
 .dnb-button.dnb-button--has-text.dnb-button--size-large.dnb-button--primary, .dnb-button.dnb-button--has-text.dnb-button--size-large.dnb-button--secondary {
@@ -241,45 +243,32 @@ html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]), html
   padding-left: 0.5rem;
 }
 .dnb-button--primary {
-  color: var(--sb-color-green);
-  background-color: var(--sb-color-purple-alternative);
+  color: var(--button-primary-color);
+  background-color: var(--button-primary-background);
+  box-shadow: var(--button-primary-shadow);
 }
 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: var(--sb-color-green);
-  background-color: var(--sb-color-purple);
-  outline: initial;
-  box-shadow: none;
-}
-html[data-whatinput=""] html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]) {
-  box-shadow: none;
+  color: var(--button-primary-color--hover);
+  background-color: var(--button-primary-background--hover);
+  --border-color: var(--button-primary-border--hover);
+  --border-width: 0.0625rem;
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color), var(--button-primary-shadow--hover);
+  border-color: transparent;
 }
 .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: var(--sb-color-green);
-  background-color: var(--sb-color-purple-alternative);
-}
-.dnb-button--primary[disabled] {
-  color: var(--sb-color-gray-dark-2);
-  background-color: var(--sb-color-gray-light);
-  outline: initial;
-  box-shadow: none;
-}
-html[data-whatinput=""] .dnb-button--primary[disabled] {
-  box-shadow: none;
-}
-.dnb-button--primary:not([disabled]).dnb-button__status--error {
-  color: var(--sb-color-white);
-  background-color: var(--sb-color-red);
+  color: var(--button-primary-color--active);
+  background-color: var(--button-primary-background--active);
 }
 .dnb-button--secondary {
-  color: var(--sb-color-purple-alternative);
-  background-color: var(--sb-color-white);
-  --border-color: var(--sb-color-purple-alternative);
+  color: var(--button-secondary-color);
+  background-color: var(--button-secondary-background);
+  --border-color: var(--button-secondary-border);
   --border-width: 0.0625rem;
   box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
@@ -288,51 +277,60 @@ 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: var(--sb-color-purple-alternative);
-  background-color: var(--sb-color-green-light-2);
-  --border-color: var(--sb-color-purple-alternative);
-  --border-width: 0.0625rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+  background-color: var(--button-secondary-background--hover);
 }
 .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: var(--sb-color-purple-alternative);
-  background-color: var(--sb-color-white);
-  --border-color: var(--sb-color-purple-alternative);
-  --border-width: 0.0625rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+  background-color: var(--button-secondary-background--active);
 }
-.dnb-button--secondary[disabled] {
-  color: var(--sb-color-gray-dark);
-  background-color: var(--sb-color-white);
-  --border-color: var(--sb-color-gray-light);
-  --border-width: 0.0625rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-button--secondary:not([disabled]).dnb-button__status--error {
-  color: var(--sb-color-red);
-  background-color: var(--sb-color-white);
-  --border-color: var(--sb-color-red);
-  --border-width: 0.0625rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+html:not([data-whatintent=touch]) .dnb-button.focus-visible[disabled] {
+  cursor: not-allowed;
 }
-html:not([data-whatintent=touch]) .dnb-button--secondary:not([disabled]).dnb-button__status--error:hover[disabled] {
+html:not([data-whatintent=touch]) .dnb-button:focus-visible[disabled] {
   cursor: not-allowed;
 }
-html:not([data-whatintent=touch]) .dnb-button--secondary:not([disabled]).dnb-button__status--error:hover:not([disabled]) {
-  color: var(--sb-color-red);
-  background-color: var(--sb-color-magenta-light-3);
-  --border-color: var(--sb-color-red);
-  --border-width: 0.0625rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+html:not([data-whatintent=touch]) .dnb-button.focus-visible:not([disabled]) {
+  color: var(--sb-color-blue-dark);
+  background-color: var(--button-background--focus);
+  outline: none;
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color), var(--sb-shadow-medium);
   border-color: transparent;
 }
+html:not([data-whatintent=touch]) .dnb-button:focus-visible:not([disabled]) {
+  color: var(--sb-color-blue-dark);
+  background-color: var(--button-background--focus);
+  outline: none;
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color), var(--sb-shadow-medium);
+  border-color: transparent;
+}
+.dnb-button[disabled] {
+  --button-primary-shadow: 0 0 transparent;
+  --button-primary-color: var(--button-primary-color--disabled);
+  --button-primary-background: var(
+    --button-primary-background--disabled
+  );
+  --button-secondary-color: var(--button-secondary-color--disabled);
+  --button-secondary-border: var(--button-secondary-border--disabled);
+}
+.dnb-button:not([disabled]).dnb-button__status--error {
+  --button-primary-shadow--hover: 0 0 transparent;
+  --button-primary-color: var(--sb-color-white);
+  --button-primary-color--hover: var(--sb-color-red);
+  --button-primary-color--active: var(--sb-color-white);
+  --button-primary-background: var(--sb-color-red);
+  --button-primary-background--hover: var(--sb-color-magenta-light-3);
+  --button-primary-background--active: var(--sb-color-red);
+  --button-primary-border--hover: var(--sb-color-red);
+  --button-secondary-color: var(--sb-color-red);
+  --button-secondary-background--hover: var(--sb-color-magenta-light-3);
+  --button-secondary-border: var(--sb-color-red);
+}
 .dnb-button--tertiary {
   --button-tertiary-focus-overflow: -0.5rem;
   color: var(--sb-color-violet);
@@ -416,7 +414,7 @@ html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]), html[
 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(--focus-ring-color);
   --border-width: var(--focus-ring-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color), var(--sb-shadow-medium);
   border-color: transparent;
 }
 .dnb-button--tertiary:focus:not([disabled]).focus-visible, html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]).focus-visible {
@@ -426,10 +424,10 @@ html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled])::befor
   color: var(--sb-color-blue-dark);
 }
 .dnb-button--tertiary:focus:not([disabled]).focus-visible::before, html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]).focus-visible::before {
-  background-color: var(--sb-color-blue-light-3);
+  background-color: var(--button-background--focus);
 }
 .dnb-button--tertiary:focus:not([disabled]):focus-visible::before, html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):focus-visible::before {
-  background-color: var(--sb-color-blue-light-3);
+  background-color: var(--button-background--focus);
 }
 .dnb-button--tertiary:focus:not([disabled]).focus-visible > *, html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]).focus-visible > * {
   z-index: 2;
@@ -468,7 +466,7 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]) .d
   border-color: transparent;
 }
 .dnb-button--tertiary:not(.dnb-button--has-text):hover::before {
-  background-color: var(--sb-color-blue-light-3);
+  background-color: var(--button-background--focus);
 }
 .dnb-button--tertiary:not(.dnb-button--has-text):hover > * {
   z-index: 2;

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

@@ -1 +1,3 @@
-.dnb-button--tertiary{--button-tertiary-focus-overflow:-1rem}.dnb-button--tertiary .dnb-button__text{position:relative}.dnb-button--tertiary .dnb-button__text:after{background-color:currentcolor;border-radius:.0475rem;bottom:0;bottom:-.0625rem;color:var(--color-sea-green);color:transparent;content:"";height:.095rem;left:0;position:absolute;right:0;transition:color .25s ease-in-out;width:auto;z-index:1}[data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text:after{transition:none}.dnb-skeleton .dnb-button--tertiary .dnb-button__text:after{content: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{box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text:after{visibility:visible}.dnb-button--tertiary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){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]){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{opacity:1;transition:none;visibility:visible}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--has-text{padding-left:0;padding-right:0}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon{align-self:flex-start;margin-top:calc(var(--button-height)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--medium{margin-top:calc(var(--button-height)/2 - .75rem)}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--large{margin-top:calc(var(--button-height)/2 - 1rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large .dnb-button__icon{margin-top:calc(var(--button-height--large)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-medium .dnb-button__icon{margin-top:calc(var(--button-height--medium)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-small .dnb-button__icon{margin-top:calc(var(--button-height--small)/2 - .5rem)}.dnb-button--tertiary.dnb-button--icon-position-top{border-radius:.5rem;flex-direction:column;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--has-text .dnb-button__icon{align-self:center;margin-top:.5rem}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{margin-bottom:.25rem;margin-top:0}.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__alignment{height:0;order:3}.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{left:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon{margin-left:0;margin-right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text{margin-left:1rem;padding-left:0}.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,.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{left:-.5rem;right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before{right:var(--button-tertiary-focus-overflow)}.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{right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon{margin-left:-.5rem;margin-right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text{margin-right:1rem;padding-right:0}.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,.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{right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before{left:var(--button-tertiary-focus-overflow)}.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[data-whatinput=keyboard] .dnb-button--tertiary:hover:focus .dnb-button__text:after{visibility:hidden}.dnb-button--primary:focus[disabled],.dnb-button--secondary:focus[disabled]{cursor:not-allowed}.dnb-button--primary:focus:not([disabled]),.dnb-button--secondary:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]),html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--sb-color-blue-light-3);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-blue-dark)}.dnb-button{border:none}.dnb-button.dnb-button--has-text.dnb-button--size-large.dnb-button--primary,.dnb-button.dnb-button--has-text.dnb-button--size-large.dnb-button--secondary{padding-left:1.5rem;padding-right:1.5rem}.dnb-button.dnb-button--has-text.dnb-button--size-large.dnb-button--icon-position-right{padding-right:.5rem}.dnb-button.dnb-button--has-text.dnb-button--size-large.dnb-button--icon-position-left{padding-left:.5rem}.dnb-button--primary{background-color:var(--sb-color-purple-alternative);color:var(--sb-color-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]){background-color:var(--sb-color-purple);box-shadow:none;color:var(--sb-color-green);outline:initial}html[data-whatinput=""] html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){box-shadow:none}.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]){background-color:var(--sb-color-purple-alternative);color:var(--sb-color-green)}.dnb-button--primary[disabled]{background-color:var(--sb-color-gray-light);box-shadow:none;color:var(--sb-color-gray-dark-2);outline:initial}html[data-whatinput=""] .dnb-button--primary[disabled]{box-shadow:none}.dnb-button--primary:not([disabled]).dnb-button__status--error{background-color:var(--sb-color-red);color:var(--sb-color-white)}.dnb-button--secondary{--border-color:var(--sb-color-purple-alternative);--border-width:0.0625rem;background-color:var(--sb-color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-purple-alternative)}html:not([data-whatintent=touch]) .dnb-button--secondary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--secondary:hover:not([disabled]){--border-color:var(--sb-color-purple-alternative);--border-width:0.0625rem;background-color:var(--sb-color-green-light-2);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-purple-alternative)}.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]){--border-color:var(--sb-color-purple-alternative);--border-width:0.0625rem;background-color:var(--sb-color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-purple-alternative)}.dnb-button--secondary[disabled]{--border-color:var(--sb-color-gray-light);--border-width:0.0625rem;color:var(--sb-color-gray-dark)}.dnb-button--secondary:not([disabled]).dnb-button__status--error,.dnb-button--secondary[disabled]{background-color:var(--sb-color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-button--secondary:not([disabled]).dnb-button__status--error{--border-color:var(--sb-color-red);--border-width:0.0625rem;color:var(--sb-color-red)}html:not([data-whatintent=touch]) .dnb-button--secondary:not([disabled]).dnb-button__status--error:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--secondary:not([disabled]).dnb-button__status--error:hover:not([disabled]){--border-color:var(--sb-color-red);--border-width:0.0625rem;background-color:var(--sb-color-magenta-light-3);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-red)}.dnb-button--tertiary{--button-tertiary-focus-overflow:-0.5rem;background-color:transparent;color:var(--sb-color-violet)}.dnb-button--tertiary .dnb-button__text:after{bottom:-.5rem;height:.0625rem;left:-.5rem;right:-.5rem}.dnb-button--tertiary.dnb-button--size-large .dnb-button__text:after{bottom:-.75rem;left:-1.5rem;right:-1.5rem}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{font-size:var(--font-size-x-small)}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text{font-size:var(--font-size-small)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text:after{left:-1rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-right .dnb-button__text:after{right:-1rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top{padding-left:.5rem;padding-right:.5rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text{font-size:var(--button-font-size);margin-bottom:.5rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text:after{left:-.5rem;right:-.5rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text:after{left:-1.5rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large.dnb-button--has-icon.dnb-button--icon-position-right .dnb-button__text:after{right:-1.5rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large.dnb-button--has-icon.dnb-button--icon-position-top{padding-left:1.5rem;padding-right:1.5rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text{font-size:var(--button-font-size);margin-bottom:.75rem;margin-top:.25rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text:after{left:-1.5rem;right:-1.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: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]){box-shadow:none}.dnb-button--tertiary:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}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(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-button--tertiary:focus:not([disabled]).focus-visible,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]).focus-visible{color:var(--sb-color-blue-dark)}.dnb-button--tertiary:focus:not([disabled]):focus-visible,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):focus-visible{color:var(--sb-color-blue-dark)}.dnb-button--tertiary:focus:not([disabled]).focus-visible:before,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]).focus-visible:before{background-color:var(--sb-color-blue-light-3)}.dnb-button--tertiary:focus:not([disabled]):focus-visible:before,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):focus-visible:before{background-color:var(--sb-color-blue-light-3)}.dnb-button--tertiary:focus:not([disabled]).focus-visible>*,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]).focus-visible>*{z-index:2}.dnb-button--tertiary:focus:not([disabled]):focus-visible>*,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):focus-visible>*{z-index:2}.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{color:var(--sb-color-violet);transition:none}.dnb-button--tertiary:not(.dnb-button--has-text):hover{--focus-ring-width:0.0625rem;color:var(--sb-color-blue-dark)}.dnb-button--tertiary:not(.dnb-button--has-text):hover:before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--sb-color-blue-light-3);border-color:transparent;border-radius:inherit;bottom:0;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}.dnb-button--tertiary:not(.dnb-button--has-text):hover>*{z-index:2}.dnb-button--tertiary:not(.dnb-button--has-text):hover:before{left:0;right:0}.dnb-button--tertiary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled]{cursor:not-allowed}.dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{color:var(--sb-color-violet)}.dnb-button--tertiary[disabled]{color:var(--sb-color-gray-dark)}
+.dnb-button--tertiary{--button-tertiary-focus-overflow:-1rem}.dnb-button--tertiary .dnb-button__text{position:relative}.dnb-button--tertiary .dnb-button__text:after{background-color:currentcolor;border-radius:.0475rem;bottom:0;bottom:-.0625rem;color:var(--color-sea-green);color:transparent;content:"";height:.095rem;left:0;position:absolute;right:0;transition:color .25s ease-in-out;width:auto;z-index:1}[data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text:after{transition:none}.dnb-skeleton .dnb-button--tertiary .dnb-button__text:after{content: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{box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text:after{visibility:visible}.dnb-button--tertiary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){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]){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{opacity:1;transition:none;visibility:visible}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--has-text{padding-left:0;padding-right:0}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon{align-self:flex-start;margin-top:calc(var(--button-height)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--medium{margin-top:calc(var(--button-height)/2 - .75rem)}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--large{margin-top:calc(var(--button-height)/2 - 1rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large .dnb-button__icon{margin-top:calc(var(--button-height--large)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-medium .dnb-button__icon{margin-top:calc(var(--button-height--medium)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-small .dnb-button__icon{margin-top:calc(var(--button-height--small)/2 - .5rem)}.dnb-button--tertiary.dnb-button--icon-position-top{border-radius:.5rem;flex-direction:column;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--has-text .dnb-button__icon{align-self:center;margin-top:.5rem}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{margin-bottom:.25rem;margin-top:0}.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__alignment{height:0;order:3}.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{left:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon{margin-left:0;margin-right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text{margin-left:1rem;padding-left:0}.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,.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{left:-.5rem;right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before{right:var(--button-tertiary-focus-overflow)}.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{right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon{margin-left:-.5rem;margin-right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text{margin-right:1rem;padding-right:0}.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,.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{right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before{left:var(--button-tertiary-focus-overflow)}.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[data-whatinput=keyboard] .dnb-button--tertiary:hover:focus .dnb-button__text:after{visibility:hidden}.dnb-button{--button-background--focus:var(--sb-color-blue-light-3);--button-primary-shadow:var(--sb-shadow-medium);--button-primary-shadow--hover:var(--sb-shadow-medium);--button-primary-color:var(--sb-color-green);--button-primary-color--hover:var(--sb-color-purple-alternative);--button-primary-color--active:var(--sb-color-green);--button-primary-color--disabled:var(--sb-color-gray-dark-2);--button-primary-background:var(--sb-color-purple-alternative);--button-primary-background--hover:var(--sb-color-green);--button-primary-background--active:var(--sb-color-purple-alternative);--button-primary-background--disabled:var(--sb-color-gray-light);--button-primary-border--hover:transparent;--button-secondary-color:var(--sb-color-purple-alternative);--button-secondary-color--disabled:var(--sb-color-gray-dark);--button-secondary-background:var(--sb-color-white);--button-secondary-background--hover:var(--sb-color-green);--button-secondary-background--active:var(--sb-color-white);--button-secondary-border:var(--sb-color-purple-alternative);--button-secondary-border--disabled:var(--sb-color-gray-light);border:none}.dnb-button.dnb-button--has-text.dnb-button--size-large.dnb-button--primary,.dnb-button.dnb-button--has-text.dnb-button--size-large.dnb-button--secondary{padding-left:1.5rem;padding-right:1.5rem}.dnb-button.dnb-button--has-text.dnb-button--size-large.dnb-button--icon-position-right{padding-right:.5rem}.dnb-button.dnb-button--has-text.dnb-button--size-large.dnb-button--icon-position-left{padding-left:.5rem}.dnb-button--primary{background-color:var(--button-primary-background);box-shadow:var(--button-primary-shadow);color:var(--button-primary-color)}html:not([data-whatintent=touch]) .dnb-button--primary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){--border-color:var(--button-primary-border--hover);--border-width:0.0625rem;background-color:var(--button-primary-background--hover);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color),var(--button-primary-shadow--hover);color:var(--button-primary-color--hover)}.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]){background-color:var(--button-primary-background--active);color:var(--button-primary-color--active)}.dnb-button--secondary{--border-color:var(--button-secondary-border);--border-width:0.0625rem;background-color:var(--button-secondary-background);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--button-secondary-color)}html:not([data-whatintent=touch]) .dnb-button--secondary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--secondary:hover:not([disabled]){background-color:var(--button-secondary-background--hover)}.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]){background-color:var(--button-secondary-background--active)}html:not([data-whatintent=touch]) .dnb-button.focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button.focus-visible:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--button-background--focus);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color),var(--sb-shadow-medium);color:var(--sb-color-blue-dark);outline:none}html:not([data-whatintent=touch]) .dnb-button:focus-visible:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--button-background--focus);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color),var(--sb-shadow-medium);color:var(--sb-color-blue-dark);outline:none}.dnb-button[disabled]{--button-primary-shadow:0 0 transparent;--button-primary-color:var(--button-primary-color--disabled);--button-primary-background:var(
+    --button-primary-background--disabled
+  );--button-secondary-color:var(--button-secondary-color--disabled);--button-secondary-border:var(--button-secondary-border--disabled)}.dnb-button:not([disabled]).dnb-button__status--error{--button-primary-shadow--hover:0 0 transparent;--button-primary-color:var(--sb-color-white);--button-primary-color--hover:var(--sb-color-red);--button-primary-color--active:var(--sb-color-white);--button-primary-background:var(--sb-color-red);--button-primary-background--hover:var(--sb-color-magenta-light-3);--button-primary-background--active:var(--sb-color-red);--button-primary-border--hover:var(--sb-color-red);--button-secondary-color:var(--sb-color-red);--button-secondary-background--hover:var(--sb-color-magenta-light-3);--button-secondary-border:var(--sb-color-red)}.dnb-button--tertiary{--button-tertiary-focus-overflow:-0.5rem;background-color:transparent;color:var(--sb-color-violet)}.dnb-button--tertiary .dnb-button__text:after{bottom:-.5rem;height:.0625rem;left:-.5rem;right:-.5rem}.dnb-button--tertiary.dnb-button--size-large .dnb-button__text:after{bottom:-.75rem;left:-1.5rem;right:-1.5rem}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{font-size:var(--font-size-x-small)}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text{font-size:var(--font-size-small)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text:after{left:-1rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-right .dnb-button__text:after{right:-1rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top{padding-left:.5rem;padding-right:.5rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text{font-size:var(--button-font-size);margin-bottom:.5rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text:after{left:-.5rem;right:-.5rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text:after{left:-1.5rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large.dnb-button--has-icon.dnb-button--icon-position-right .dnb-button__text:after{right:-1.5rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large.dnb-button--has-icon.dnb-button--icon-position-top{padding-left:1.5rem;padding-right:1.5rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text{font-size:var(--button-font-size);margin-bottom:.75rem;margin-top:.25rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text:after{left:-1.5rem;right:-1.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: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]){box-shadow:none}.dnb-button--tertiary:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}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(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color),var(--sb-shadow-medium)}.dnb-button--tertiary:focus:not([disabled]).focus-visible,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]).focus-visible{color:var(--sb-color-blue-dark)}.dnb-button--tertiary:focus:not([disabled]):focus-visible,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):focus-visible{color:var(--sb-color-blue-dark)}.dnb-button--tertiary:focus:not([disabled]).focus-visible:before,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]).focus-visible:before{background-color:var(--button-background--focus)}.dnb-button--tertiary:focus:not([disabled]):focus-visible:before,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):focus-visible:before{background-color:var(--button-background--focus)}.dnb-button--tertiary:focus:not([disabled]).focus-visible>*,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]).focus-visible>*{z-index:2}.dnb-button--tertiary:focus:not([disabled]):focus-visible>*,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):focus-visible>*{z-index:2}.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{color:var(--sb-color-violet);transition:none}.dnb-button--tertiary:not(.dnb-button--has-text):hover{--focus-ring-width:0.0625rem;color:var(--sb-color-blue-dark)}.dnb-button--tertiary:not(.dnb-button--has-text):hover:before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--button-background--focus);border-color:transparent;border-radius:inherit;bottom:0;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}.dnb-button--tertiary:not(.dnb-button--has-text):hover>*{z-index:2}.dnb-button--tertiary:not(.dnb-button--has-text):hover:before{left:0;right:0}.dnb-button--tertiary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled]{cursor:not-allowed}.dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{color:var(--sb-color-violet)}.dnb-button--tertiary[disabled]{color:var(--sb-color-gray-dark)}

package/cjs/components/button/style/themes/dnb-button-theme-sbanken.scss

@@ -10,17 +10,10 @@
 // we slice the shareable parts out in a separate file
 @import '../dnb-button--tertiary.scss';
 
-%focus {
-  @include buttonFocus(
-    var(--sb-color-blue-dark),
-    var(--sb-color-blue-light-3)
-  );
-}
-
 @mixin focus-tertiary {
   color: var(--sb-color-blue-dark);
   &::before {
-    background-color: var(--sb-color-blue-light-3);
+    background-color: var(--button-background--focus);
   }
 
   > * {
@@ -29,6 +22,31 @@
 }
 
 .dnb-button {
+  // global
+  --button-background--focus: var(--sb-color-blue-light-3);
+
+  // primary
+  --button-primary-shadow: var(--sb-shadow-medium);
+  --button-primary-shadow--hover: var(--sb-shadow-medium);
+  --button-primary-color: var(--sb-color-green);
+  --button-primary-color--hover: var(--sb-color-purple-alternative);
+  --button-primary-color--active: var(--sb-color-green);
+  --button-primary-color--disabled: var(--sb-color-gray-dark-2);
+  --button-primary-background: var(--sb-color-purple-alternative);
+  --button-primary-background--hover: var(--sb-color-green);
+  --button-primary-background--active: var(--sb-color-purple-alternative);
+  --button-primary-background--disabled: var(--sb-color-gray-light);
+  --button-primary-border--hover: transparent;
+
+  // secondary
+  --button-secondary-color: var(--sb-color-purple-alternative);
+  --button-secondary-color--disabled: var(--sb-color-gray-dark);
+  --button-secondary-background: var(--sb-color-white);
+  --button-secondary-background--hover: var(--sb-color-green);
+  --button-secondary-background--active: var(--sb-color-white);
+  --button-secondary-border: var(--sb-color-purple-alternative);
+  --button-secondary-border--disabled: var(--sb-color-gray-light);
+
   border: none;
 
   &#{&}--has-text#{&}--size-large {
@@ -46,70 +64,80 @@
   }
 
   &--primary {
-    color: var(--sb-color-green);
-    background-color: var(--sb-color-purple-alternative);
+    color: var(--button-primary-color);
+    background-color: var(--button-primary-background);
+    box-shadow: var(--button-primary-shadow);
 
     @include hover() {
-      color: var(--sb-color-green);
-      background-color: var(--sb-color-purple);
-      @include removeFocusRing();
+      color: var(--button-primary-color--hover);
+      background-color: var(--button-primary-background--hover);
+
+      @include fakeBorder(
+        $color: var(--button-primary-border--hover),
+        $inset: inset,
+        $extendShadow: var(--button-primary-shadow--hover)
+      ); // only for error button
     }
 
     @include active() {
-      color: var(--sb-color-green);
-      background-color: var(--sb-color-purple-alternative);
-    }
-
-    @extend %focus;
-
-    &[disabled] {
-      color: var(--sb-color-gray-dark-2);
-      background-color: var(--sb-color-gray-light);
-      @include removeFocusRing();
-    }
-
-    &:not([disabled]).dnb-button__status--error {
-      color: var(--sb-color-white);
-      background-color: var(--sb-color-red);
+      color: var(--button-primary-color--active);
+      background-color: var(--button-primary-background--active);
     }
   }
 
   &--secondary {
-    color: var(--sb-color-purple-alternative);
-    background-color: var(--sb-color-white);
-    @include fakeBorder(var(--sb-color-purple-alternative), null, inset);
+    color: var(--button-secondary-color);
+    background-color: var(--button-secondary-background);
+    @include fakeBorder(var(--button-secondary-border), null, inset);
 
     @include hover() {
-      color: var(--sb-color-purple-alternative);
-      background-color: var(--sb-color-green-light-2);
-      @include fakeBorder(var(--sb-color-purple-alternative), null, inset);
+      background-color: var(--button-secondary-background--hover);
     }
 
     @include active() {
-      color: var(--sb-color-purple-alternative);
-      background-color: var(--sb-color-white);
-      @include fakeBorder(var(--sb-color-purple-alternative), null, inset);
+      background-color: var(--button-secondary-background--active);
     }
+  }
 
-    @extend %focus;
+  @include focus-visible() {
+    color: var(--sb-color-blue-dark);
+    background-color: var(--button-background--focus);
 
-    &[disabled] {
-      color: var(--sb-color-gray-dark);
-      background-color: var(--sb-color-white);
-      @include fakeBorder(var(--sb-color-gray-light), null, inset);
-    }
+    @include focusRing(
+      $whatinput: 'always',
+      $inset: inset,
+      $extendShadow: var(--sb-shadow-medium)
+    );
+  }
 
-    &:not([disabled]).dnb-button__status--error {
-      color: var(--sb-color-red);
-      background-color: var(--sb-color-white);
-      @include fakeBorder(var(--sb-color-red), null, inset);
+  &[disabled] {
+    // primary
+    --button-primary-shadow: 0 0 transparent;
+    --button-primary-color: var(--button-primary-color--disabled);
+    --button-primary-background: var(
+      --button-primary-background--disabled
+    );
+
+    // secondary
+    --button-secondary-color: var(--button-secondary-color--disabled);
+    --button-secondary-border: var(--button-secondary-border--disabled);
+  }
 
-      @include hover() {
-        color: var(--sb-color-red);
-        background-color: var(--sb-color-magenta-light-3);
-        @include fakeBorder(var(--sb-color-red), null, inset);
-      }
-    }
+  &:not([disabled]).dnb-button__status--error {
+    // primary
+    --button-primary-shadow--hover: 0 0 transparent;
+    --button-primary-color: var(--sb-color-white);
+    --button-primary-color--hover: var(--sb-color-red);
+    --button-primary-color--active: var(--sb-color-white);
+    --button-primary-background: var(--sb-color-red);
+    --button-primary-background--hover: var(--sb-color-magenta-light-3);
+    --button-primary-background--active: var(--sb-color-red);
+    --button-primary-border--hover: var(--sb-color-red);
+
+    // secondary
+    --button-secondary-color: var(--sb-color-red);
+    --button-secondary-background--hover: var(--sb-color-magenta-light-3);
+    --button-secondary-border: var(--sb-color-red);
   }
 
   &--tertiary {
@@ -205,7 +233,7 @@
 
     @include focus() {
       @include removeFocusRing('keyboard');
-      @include buttonFocusRing(null, inset);
+      @include buttonFocusRing(null, inset, var(--sb-shadow-medium));
       &:focus-visible {
         @include focus-tertiary();
       }