@dnb/eufemia 10.0.0-beta.7 → 10.0.0

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

@@ -16,6 +16,9 @@
 * Button mixins
 *
 */
+.dnb-button--tertiary {
+  --button-tertiary-focus-overflow: -1rem;
+}
 .dnb-button--tertiary .dnb-button__text {
   position: relative;
 }
@@ -94,17 +97,23 @@ html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-bu
 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 {
+.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon {
   align-self: flex-start;
   margin-top: calc(var(--button-height) / 2 - 0.5rem);
 }
-.dnb-button--tertiary.dnb-button--size-large .dnb-button__icon {
+.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--medium {
+  margin-top: calc(var(--button-height) / 2 - 0.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 - 0.5rem);
 }
-.dnb-button--tertiary.dnb-button--size-medium .dnb-button__icon {
+.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-medium .dnb-button__icon {
   margin-top: calc(var(--button-height--medium) / 2 - 0.5rem);
 }
-.dnb-button--tertiary.dnb-button--size-small .dnb-button__icon {
+.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-small .dnb-button__icon {
   margin-top: calc(var(--button-height--small) / 2 - 0.5rem);
 }
 .dnb-button--tertiary.dnb-button--icon-position-top {
@@ -115,7 +124,7 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .
 .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 {
+.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text .dnb-button__icon {
   margin-top: 0.5rem;
   align-self: center;
 }
@@ -157,7 +166,7 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([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: -1rem;
+  right: var(--button-tertiary-focus-overflow);
 }
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right {
   /* stylelint-disable */
@@ -184,7 +193,7 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([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: -1rem;
+  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;
@@ -321,6 +330,7 @@ html:not([data-whatintent=touch]) .dnb-button--secondary:not([disabled]).dnb-but
   border-color: transparent;
 }
 .dnb-button--tertiary {
+  --button-tertiary-focus-overflow: 0;
   color: var(--sb-color-violet);
   background-color: transparent;
 }
@@ -392,6 +402,27 @@ html:not([data-whatintent=touch]) .dnb-button--secondary:not([disabled]).dnb-but
   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])::before, html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled])::before {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  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(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
 html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled] {
   cursor: not-allowed;
 }

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

@@ -1 +1 @@
-.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}.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:0 0 0 var(--border-width) var(--border-color)}.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: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__icon{align-self:flex-start;margin-top:calc(var(--button-height)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-large .dnb-button__icon{margin-top:calc(var(--button-height--large)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-medium .dnb-button__icon{margin-top:calc(var(--button-height--medium)/2 - .5rem)}.dnb-button--tertiary.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__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:-1rem}.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:-1rem}.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{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{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{padding-left:.5rem;padding-right:.5rem}.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{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-left{padding-left:1rem}.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{padding-right:1rem}.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}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: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}.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{left:-.5rem;right:-.5rem}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)}.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: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 .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{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;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{padding-left:.5rem;padding-right:.5rem}.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{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-left{padding-left:1rem}.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{padding-right:1rem}.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]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{border-radius:inherit;bottom:0;content:"";height:inherit;left:0;outline:none;position:absolute;right:0;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)}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: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

@@ -102,6 +102,8 @@
     $tertiary-padding: 0.5rem;
     $tertiary-padding-large: 1.5rem;
     $tertiary-icon-space: 0.5rem;
+    
+    --button-tertiary-focus-overflow: 0;
 
     color: var(--sb-color-violet);
     background-color: transparent;
@@ -195,6 +197,10 @@
       }
     }
 
+    @include focus() {
+      @include buttonFocusRing(null, 0, inset);
+    }
+
     @include hover() {
       // underline
       .dnb-button__text::after {

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

@@ -16,6 +16,9 @@
 * Button mixins
 *
 */
+.dnb-button--tertiary {
+  --button-tertiary-focus-overflow: -1rem;
+}
 .dnb-button--tertiary .dnb-button__text {
   position: relative;
 }
@@ -94,17 +97,23 @@ html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-bu
 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 {
+.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon {
   align-self: flex-start;
   margin-top: calc(var(--button-height) / 2 - 0.5rem);
 }
-.dnb-button--tertiary.dnb-button--size-large .dnb-button__icon {
+.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--medium {
+  margin-top: calc(var(--button-height) / 2 - 0.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 - 0.5rem);
 }
-.dnb-button--tertiary.dnb-button--size-medium .dnb-button__icon {
+.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-medium .dnb-button__icon {
   margin-top: calc(var(--button-height--medium) / 2 - 0.5rem);
 }
-.dnb-button--tertiary.dnb-button--size-small .dnb-button__icon {
+.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-small .dnb-button__icon {
   margin-top: calc(var(--button-height--small) / 2 - 0.5rem);
 }
 .dnb-button--tertiary.dnb-button--icon-position-top {
@@ -115,7 +124,7 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .
 .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 {
+.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text .dnb-button__icon {
   margin-top: 0.5rem;
   align-self: center;
 }
@@ -157,7 +166,7 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([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: -1rem;
+  right: var(--button-tertiary-focus-overflow);
 }
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right {
   /* stylelint-disable */
@@ -184,7 +193,7 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([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: -1rem;
+  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;

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

@@ -1 +1 @@
-.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}.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:0 0 0 var(--border-width) var(--border-color)}.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: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__icon{align-self:flex-start;margin-top:calc(var(--button-height)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-large .dnb-button__icon{margin-top:calc(var(--button-height--large)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-medium .dnb-button__icon{margin-top:calc(var(--button-height--medium)/2 - .5rem)}.dnb-button--tertiary.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__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:-1rem}.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:-1rem}.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{background-color:var(--color-sea-green);color:var(--color-white)}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(--color-emerald-green);--border-width:0.125rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.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]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-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]){--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-mint-green-50);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-button--primary[disabled]{background-color:var(--color-sea-green-30);color:var(--color-white)}.dnb-button:not([disabled]).dnb-button--primary.dnb-button__status--error{background-color:var(--color-fire-red);color:var(--color-white)}.dnb-button--secondary{--border-color:var(--color-sea-green);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color: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]){--border-color:var(--color-emerald-green);--border-width:0.125rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.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]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-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]){--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-mint-green-50);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-button--secondary[disabled],.dnb-button--secondary[disabled]:focus{--border-color:var(--color-sea-green-30);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green-30)}.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error{--border-color:var(--color-fire-red);--border-width:0.0625rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-fire-red)}.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error .dnb-button__icon{color:inherit}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]){--border-color:var(--color-emerald-green);--border-width:0.125rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-emerald-green)}.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]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color: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]){--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-mint-green-50);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-emerald-green)}.dnb-button--secondary:not(.dnb-button--has-text):not(.dnb-button--input-button).dnb-button--size-large{line-height:calc(var(--button-height--large) - .5rem);width:calc(var(--button-width--large) - .5rem)}.dnb-button--active{--border-color:var(--color-emerald-green);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-button--tertiary{background-color:transparent;color:var(--color-sea-green)}.dnb-button--tertiary.dnb-button--has-text{padding-left:0;padding-right:0}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(--color-emerald-green)}.dnb-button--tertiary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled]{cursor:not-allowed}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{color:var(--color-emerald-green)}.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[disabled]{color:var(--color-sea-green-30)}.dnb-button--signal{background-color:var(--color-accent-yellow);color:var(--color-ocean-green)}html:not([data-whatintent=touch]) .dnb-button--signal:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--signal:hover:not([disabled]){--border-color:var(--color-ocean-green);--border-width:0.125rem;background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-ocean-green)}html:not([data-whatintent=touch]) html[data-whatintent=touch] .dnb-button--signal:active[disabled],html[data-whatintent=touch] .dnb-button--signal:active[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]),html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]){--border-color:var(--color-ocean-green);--border-width:0.125rem;background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color: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]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-ocean-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]){--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-ocean-green)}.dnb-button--signal[disabled]{background-color:var(--color-accent-yellow-30);color:var(--color-black-20)}.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]){background-color:transparent;box-shadow:none}.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):after{background-color:currentcolor;bottom:0;content:"";left:0;position:absolute;top:0;width:.0625rem}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{box-shadow:none;color:var(--color-white)}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: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{box-shadow:none;color:var(--color-sea-green)}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:var(--color-mint-green-50)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text)[disabled]{background-color:var(--color-black-3);color:var(--color-black-55)}
+.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}.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:0 0 0 var(--border-width) var(--border-color)}.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: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 .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{background-color:var(--color-sea-green);color:var(--color-white)}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(--color-emerald-green);--border-width:0.125rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.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]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-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]){--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-mint-green-50);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-button--primary[disabled]{background-color:var(--color-sea-green-30);color:var(--color-white)}.dnb-button:not([disabled]).dnb-button--primary.dnb-button__status--error{background-color:var(--color-fire-red);color:var(--color-white)}.dnb-button--secondary{--border-color:var(--color-sea-green);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color: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]){--border-color:var(--color-emerald-green);--border-width:0.125rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.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]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-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]){--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-mint-green-50);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-button--secondary[disabled],.dnb-button--secondary[disabled]:focus{--border-color:var(--color-sea-green-30);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green-30)}.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error{--border-color:var(--color-fire-red);--border-width:0.0625rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-fire-red)}.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error .dnb-button__icon{color:inherit}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]){--border-color:var(--color-emerald-green);--border-width:0.125rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-emerald-green)}.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]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color: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]){--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-mint-green-50);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-emerald-green)}.dnb-button--secondary:not(.dnb-button--has-text):not(.dnb-button--input-button).dnb-button--size-large{line-height:calc(var(--button-height--large) - .5rem);width:calc(var(--button-width--large) - .5rem)}.dnb-button--active{--border-color:var(--color-emerald-green);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-button--tertiary{background-color:transparent;color:var(--color-sea-green)}.dnb-button--tertiary.dnb-button--has-text{padding-left:0;padding-right:0}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(--color-emerald-green)}.dnb-button--tertiary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled]{cursor:not-allowed}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{color:var(--color-emerald-green)}.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[disabled]{color:var(--color-sea-green-30)}.dnb-button--signal{background-color:var(--color-accent-yellow);color:var(--color-ocean-green)}html:not([data-whatintent=touch]) .dnb-button--signal:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--signal:hover:not([disabled]){--border-color:var(--color-ocean-green);--border-width:0.125rem;background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-ocean-green)}html:not([data-whatintent=touch]) html[data-whatintent=touch] .dnb-button--signal:active[disabled],html[data-whatintent=touch] .dnb-button--signal:active[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]),html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]){--border-color:var(--color-ocean-green);--border-width:0.125rem;background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color: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]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-ocean-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]){--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-ocean-green)}.dnb-button--signal[disabled]{background-color:var(--color-accent-yellow-30);color:var(--color-black-20)}.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]){background-color:transparent;box-shadow:none}.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):after{background-color:currentcolor;bottom:0;content:"";left:0;position:absolute;top:0;width:.0625rem}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{box-shadow:none;color:var(--color-white)}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: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{box-shadow:none;color:var(--color-sea-green)}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:var(--color-mint-green-50)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text)[disabled]{background-color:var(--color-black-3);color:var(--color-black-55)}

package/cjs/components/checkbox/Checkbox.d.ts

@@ -7,6 +7,7 @@ import type {
 import type { FormLabelText } from '../FormLabel';
 import type { SkeletonShow } from '../Skeleton';
 import type { SpacingProps } from '../space/types';
+import type { GlobalStatusConfigObject } from '../GlobalStatus';
 export type CheckboxLabelPosition = 'left' | 'right';
 export type CheckboxSize = 'default' | 'medium' | 'large';
 export type CheckboxSuffix =
@@ -68,9 +69,9 @@ export interface CheckboxProps
   status_no_animation?: boolean;
 
   /**
-   * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   * The <a href="/uilib/components/global-status/properties/#configuration-object">configuration</a> used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
    */
-  global_status_id?: string;
+  globalStatus?: GlobalStatusConfigObject;
 
   /**
    * Text describing the content of the Checkbox more than the label. You can also send in a React component, so it gets wrapped inside the Checkbox component.

package/cjs/components/checkbox/Checkbox.js

@@ -33,7 +33,7 @@ var _FormStatus = _interopRequireDefault(require("../form-status/FormStatus"));
 
 var _AlignmentHelper, _span;
 
-const _excluded = ["value", "status", "status_state", "status_props", "status_no_animation", "global_status_id", "suffix", "size", "label", "label_position", "label_sr_only", "title", "element", "disabled", "readOnly", "skeleton", "className", "class", "id", "checked", "children", "on_change", "on_state_update"],
+const _excluded = ["value", "status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "size", "label", "label_position", "label_sr_only", "title", "element", "disabled", "readOnly", "skeleton", "className", "class", "id", "checked", "children", "on_change", "on_state_update"],
       _excluded2 = ["size"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -122,7 +122,7 @@ class Checkbox extends _react.default.PureComponent {
       status_state,
       status_props,
       status_no_animation,
-      global_status_id,
+      globalStatus,
       suffix,
       size,
       label,
@@ -171,7 +171,7 @@ class Checkbox extends _react.default.PureComponent {
     const statusComp = _react.default.createElement(_FormStatus.default, _extends({
       show: showStatus,
       id: id + '-form-status',
-      global_status_id: global_status_id,
+      globalStatus: globalStatus,
       label: label,
       text_id: id + '-status',
       width_selector: id + ', ' + id + '-label',
@@ -241,7 +241,7 @@ _defineProperty(Checkbox, "defaultProps", {
   status_state: 'error',
   status_props: null,
   status_no_animation: null,
-  global_status_id: null,
+  globalStatus: null,
   suffix: null,
   value: null,
   attributes: null,
@@ -270,7 +270,10 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes = _objectSpread(_obje
   status_state: _propTypes.default.string,
   status_props: _propTypes.default.object,
   status_no_animation: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  global_status_id: _propTypes.default.string,
+  globalStatus: _propTypes.default.shape({
+    id: _propTypes.default.string,
+    message: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
+  }),
   suffix: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node]),
   value: _propTypes.default.string,
   attributes: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),

package/cjs/components/date-picker/DatePicker.d.ts

@@ -5,6 +5,7 @@ import type {
   FormStatusState,
   FormStatusText
 } from '../FormStatus';
+import type { GlobalStatusConfigObject } from '../GlobalStatus';
 import type { InputInputElement, InputSize } from '../Input';
 import type { SkeletonShow } from '../Skeleton';
 import type { SpacingProps } from '../space/types';
@@ -230,9 +231,9 @@ export interface DatePickerProps
   status_no_animation?: boolean;
 
   /**
-   * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   * The <a href="/uilib/components/global-status/properties/#configuration-object">configuration</a> used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
    */
-  global_status_id?: string;
+  globalStatus?: GlobalStatusConfigObject;
 
   /**
    * Text describing the content of the DatePicker more than the label. You can also send in a React component, so it gets wrapped inside the DatePicker component.

package/cjs/components/date-picker/DatePicker.js

@@ -48,7 +48,7 @@ var _DatePickerFooter = _interopRequireDefault(require("./DatePickerFooter"));
 var _AlignmentHelper;
 
 const _excluded = ["hidePicker"],
-      _excluded2 = ["label", "title", "label_direction", "label_sr_only", "only_month", "hide_last_week", "disable_autofocus", "enable_keyboard_nav", "hide_navigation_buttons", "show_input", "range", "first_day", "reset_date", "locale", "link", "sync", "input_element", "addon_element", "shortcuts", "disabled", "stretch", "skeleton", "size", "status", "status_state", "status_props", "status_no_animation", "global_status_id", "suffix", "mask_order", "mask_placeholder", "align_picker", "submit_button_text", "cancel_button_text", "reset_button_text", "hide_navigation", "return_format", "date_format", "hide_days", "month", "date", "start_date", "end_date", "min_date", "max_date", "correct_invalid_date", "opened", "direction", "id", "className", "class", "show_submit_button", "show_cancel_button", "show_reset_button"];
+      _excluded2 = ["label", "title", "label_direction", "label_sr_only", "only_month", "hide_last_week", "disable_autofocus", "enable_keyboard_nav", "hide_navigation_buttons", "show_input", "range", "first_day", "reset_date", "locale", "link", "sync", "input_element", "addon_element", "shortcuts", "disabled", "stretch", "skeleton", "size", "status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "mask_order", "mask_placeholder", "align_picker", "submit_button_text", "cancel_button_text", "reset_button_text", "hide_navigation", "return_format", "date_format", "hide_days", "month", "date", "start_date", "end_date", "min_date", "max_date", "correct_invalid_date", "opened", "direction", "id", "className", "class", "show_submit_button", "show_cancel_button", "show_reset_button"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -126,6 +126,7 @@ class DatePicker extends _react.default.PureComponent {
     });
 
     _defineProperty(this, "onResetHandler", args => {
+      this.hidePicker(args);
       (0, _componentHelper.dispatchCustomElementEvent)(this, 'on_reset', this.getReturnObject(args));
     });
 
@@ -279,7 +280,7 @@ class DatePicker extends _react.default.PureComponent {
       status_state,
       status_props,
       status_no_animation,
-      global_status_id,
+      globalStatus,
       suffix,
       mask_order,
       mask_placeholder,
@@ -369,7 +370,7 @@ class DatePicker extends _react.default.PureComponent {
     }, pickerParams), _AlignmentHelper || (_AlignmentHelper = _react.default.createElement(_AlignmentHelper2.default, null)), _react.default.createElement(_FormStatus.default, _extends({
       show: showStatus,
       id: id + '-form-status',
-      global_status_id: global_status_id,
+      globalStatus: globalStatus,
       label: label,
       text_id: id + '-status',
       width_selector: id + '-shell',
@@ -504,7 +505,7 @@ _defineProperty(DatePicker, "defaultProps", {
   status_state: 'error',
   status_props: null,
   status_no_animation: null,
-  global_status_id: null,
+  globalStatus: null,
   suffix: null,
   opened: false,
   prevent_close: null,
@@ -575,7 +576,10 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = _objectSpread(_ob
   status_state: _propTypes.default.string,
   status_props: _propTypes.default.object,
   status_no_animation: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  global_status_id: _propTypes.default.string,
+  globalStatus: _propTypes.default.shape({
+    id: _propTypes.default.string,
+    message: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
+  }),
   suffix: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node]),
   opened: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   prevent_close: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),

package/cjs/components/dialog/style/dnb-dialog.css

@@ -193,12 +193,12 @@
 .dnb-dialog__actions {
   padding-top: 1.5rem;
   display: flex;
+  flex-flow: row wrap;
   justify-content: center;
+  grid-gap: 1rem;
+  gap: 1rem;
   width: 100%;
 }
-.dnb-dialog__actions > :not(:last-child) {
-  margin-right: 1rem;
-}
 .dnb-dialog--information .dnb-dialog__actions {
   justify-content: left;
 }

package/cjs/components/dialog/style/dnb-dialog.min.css

@@ -1 +1 @@
-@keyframes show-modal{0%{opacity:.1;transform:translate3d(0,-1rem,0)}to{opacity:1;transform:translateZ(0)}}@keyframes hide-modal{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,1rem,0)}}@keyframes show-drawer{to{opacity:1;transform:translateZ(0)}}@keyframes hide-drawer-left{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(-20rem,0,0)}}@keyframes hide-drawer-top{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-20rem,0)}}@keyframes hide-drawer-bottom{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,20rem,0)}}@keyframes hide-drawer-right{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(20rem,0,0)}}@keyframes show-modal-overlay{0%{opacity:0}to{opacity:1}}@keyframes hide-modal-overlay{0%{opacity:1}to{opacity:0}}.dnb-dialog{--dialog-min-width:320px;--dialog-avg-width:60vw;--dialog-max-width:49rem;--dialog-confirm-max-width:40rem;--dialog-spacing:2rem;--dialog-spacing-minus:-2rem;-webkit-tap-highlight-color:rgba(0,0,0,0);border:none;border-radius:.5rem;box-shadow:var(--shadow-default);max-height:100vh;overflow:hidden;position:relative;-webkit-user-select:text;user-select:text}.dnb-dialog .dnb-scroll-view{max-height:90vh}.dnb-dialog__inner{display:flex;flex-direction:column;height:100%;position:relative;width:100%}.dnb-dialog--information{max-width:var(--dialog-max-width);min-width:var(--dialog-min-width);width:var(--dialog-avg-width)}.dnb-dialog--confirmation{margin-left:1rem;margin-right:1rem;max-width:var(--dialog-confirm-max-width)}@media screen and (max-width:40em){.dnb-dialog--auto-fullscreen{border-radius:0;box-shadow:none;height:100vh;margin:auto 0;max-height:100vh;max-width:100%;width:100%}}.dnb-dialog--fullscreen{border-radius:0;box-shadow:none;height:100vh;margin:auto 0;max-height:100vh;max-width:100%;width:100%}.dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__content{padding-bottom:calc(var(--dialog-spacing)*2)}.dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner{padding-left:calc(var(--dialog-spacing)*1.75);padding-right:calc(var(--dialog-spacing)*1.75)}@media screen and (max-width:72em){.dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner{padding-left:calc(var(--dialog-spacing));padding-right:calc(var(--dialog-spacing))}}@media screen and (max-width:40em){.dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner{padding-left:calc(var(--dialog-spacing)/2);padding-right:calc(var(--dialog-spacing)/2)}}.dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__navigation.dnb-section{margin-bottom:calc(var(--dialog-spacing)/2);margin-top:calc(var(--dialog-spacing))}@media screen and (max-width:60em){.dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__navigation.dnb-section{margin-top:calc(var(--dialog-spacing)/2)}}.dnb-dialog--spacing.dnb-dialog--confirmation .dnb-dialog__inner{padding:calc(var(--dialog-spacing))}.dnb-dialog__align--centered .dnb-dialog__inner{align-items:center;justify-content:center}.dnb-dialog__align--centered.dnb-dialog--confirmation .dnb-dialog__content,.dnb-dialog__align--centered .dnb-dialog__title{text-align:center}.dnb-dialog__content{position:relative;z-index:1}.dnb-dialog__actions{display:flex;justify-content:center;padding-top:1.5rem;width:100%}.dnb-dialog__actions>:not(:last-child){margin-right:1rem}.dnb-dialog--information .dnb-dialog__actions{justify-content:left}.dnb-dialog__align--center .dnb-dialog__content{align-items:center;text-align:center}.dnb-dialog__align--right .dnb-dialog__content{align-items:flex-end;text-align:right}.dnb-dialog__title~.dnb-dialog__content{padding-top:calc(var(--dialog-spacing)/2)}@media screen and (max-width:60em){.dnb-dialog__title{font-size:var(--font-size-large)!important;line-height:var(--line-height-medium)!important}}@media screen and (max-width:40em){.dnb-dialog__title{font-size:var(--font-size-medium)!important;line-height:var(--line-height-lead)!important}}.dnb-dialog--information .dnb-dialog__title{margin-bottom:var(--spacing-small)!important}.dnb-dialog--confirmation .dnb-dialog__title{margin-bottom:var(--spacing-x-small)!important}.dnb-dialog__navigation.dnb-section{display:flex;flex-direction:row;justify-content:space-between}html:not([data-visual-test]) .dnb-dialog{animation:show-modal var(--modal-animation-duration) ease-out}html:not([data-visual-test]) .dnb-dialog--hide{animation:hide-modal .22s ease-in-out forwards}.dnb-dialog--no-animation{animation-duration:0ms!important}@media screen and (max-width:40em){.dnb-dialog--no-animation-on-mobile{animation-delay:0ms!important;animation-duration:0ms!important}}.dnb-dialog__body{margin-bottom:calc(var(--dialog-spacing-minus)*2);padding-bottom:calc(var(--dialog-spacing)*2)}.dnb-dialog__header:after{height:600%;top:-500%}.dnb-dialog__header .dnb-modal__title,.dnb-dialog__header [class*=dnb-h--]{padding:0}.dnb-dialog__header .dnb-modal__title:not([class*=__top]),.dnb-dialog__header [class*=dnb-h--]:not([class*=__top]){margin-top:0}.dnb-dialog__header .dnb-modal__title:not([class*=__bottom]),.dnb-dialog__header [class*=dnb-h--]:not([class*=__bottom]){margin-bottom:0}.dnb-dialog--spacing .dnb-dialog__header .dnb-tabs{margin-top:3.5rem}.dnb-dialog__icon{display:flex}.dnb-dialog__icon~.dnb-dialog__header{margin-top:1.5rem}@supports (-webkit-touch-callout:none){@media (max-height:40em){.dnb-dialog .dnb-scroll-view{max-height:82vh}}}[data-visual-test].hide-page-content #___gatsby{opacity:0}
+@keyframes show-modal{0%{opacity:.1;transform:translate3d(0,-1rem,0)}to{opacity:1;transform:translateZ(0)}}@keyframes hide-modal{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,1rem,0)}}@keyframes show-drawer{to{opacity:1;transform:translateZ(0)}}@keyframes hide-drawer-left{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(-20rem,0,0)}}@keyframes hide-drawer-top{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-20rem,0)}}@keyframes hide-drawer-bottom{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,20rem,0)}}@keyframes hide-drawer-right{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(20rem,0,0)}}@keyframes show-modal-overlay{0%{opacity:0}to{opacity:1}}@keyframes hide-modal-overlay{0%{opacity:1}to{opacity:0}}.dnb-dialog{--dialog-min-width:320px;--dialog-avg-width:60vw;--dialog-max-width:49rem;--dialog-confirm-max-width:40rem;--dialog-spacing:2rem;--dialog-spacing-minus:-2rem;-webkit-tap-highlight-color:rgba(0,0,0,0);border:none;border-radius:.5rem;box-shadow:var(--shadow-default);max-height:100vh;overflow:hidden;position:relative;-webkit-user-select:text;user-select:text}.dnb-dialog .dnb-scroll-view{max-height:90vh}.dnb-dialog__inner{display:flex;flex-direction:column;height:100%;position:relative;width:100%}.dnb-dialog--information{max-width:var(--dialog-max-width);min-width:var(--dialog-min-width);width:var(--dialog-avg-width)}.dnb-dialog--confirmation{margin-left:1rem;margin-right:1rem;max-width:var(--dialog-confirm-max-width)}@media screen and (max-width:40em){.dnb-dialog--auto-fullscreen{border-radius:0;box-shadow:none;height:100vh;margin:auto 0;max-height:100vh;max-width:100%;width:100%}}.dnb-dialog--fullscreen{border-radius:0;box-shadow:none;height:100vh;margin:auto 0;max-height:100vh;max-width:100%;width:100%}.dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__content{padding-bottom:calc(var(--dialog-spacing)*2)}.dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner{padding-left:calc(var(--dialog-spacing)*1.75);padding-right:calc(var(--dialog-spacing)*1.75)}@media screen and (max-width:72em){.dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner{padding-left:calc(var(--dialog-spacing));padding-right:calc(var(--dialog-spacing))}}@media screen and (max-width:40em){.dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner{padding-left:calc(var(--dialog-spacing)/2);padding-right:calc(var(--dialog-spacing)/2)}}.dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__navigation.dnb-section{margin-bottom:calc(var(--dialog-spacing)/2);margin-top:calc(var(--dialog-spacing))}@media screen and (max-width:60em){.dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__navigation.dnb-section{margin-top:calc(var(--dialog-spacing)/2)}}.dnb-dialog--spacing.dnb-dialog--confirmation .dnb-dialog__inner{padding:calc(var(--dialog-spacing))}.dnb-dialog__align--centered .dnb-dialog__inner{align-items:center;justify-content:center}.dnb-dialog__align--centered.dnb-dialog--confirmation .dnb-dialog__content,.dnb-dialog__align--centered .dnb-dialog__title{text-align:center}.dnb-dialog__content{position:relative;z-index:1}.dnb-dialog__actions{grid-gap:1rem;display:flex;flex-flow:row wrap;gap:1rem;justify-content:center;padding-top:1.5rem;width:100%}.dnb-dialog--information .dnb-dialog__actions{justify-content:left}.dnb-dialog__align--center .dnb-dialog__content{align-items:center;text-align:center}.dnb-dialog__align--right .dnb-dialog__content{align-items:flex-end;text-align:right}.dnb-dialog__title~.dnb-dialog__content{padding-top:calc(var(--dialog-spacing)/2)}@media screen and (max-width:60em){.dnb-dialog__title{font-size:var(--font-size-large)!important;line-height:var(--line-height-medium)!important}}@media screen and (max-width:40em){.dnb-dialog__title{font-size:var(--font-size-medium)!important;line-height:var(--line-height-lead)!important}}.dnb-dialog--information .dnb-dialog__title{margin-bottom:var(--spacing-small)!important}.dnb-dialog--confirmation .dnb-dialog__title{margin-bottom:var(--spacing-x-small)!important}.dnb-dialog__navigation.dnb-section{display:flex;flex-direction:row;justify-content:space-between}html:not([data-visual-test]) .dnb-dialog{animation:show-modal var(--modal-animation-duration) ease-out}html:not([data-visual-test]) .dnb-dialog--hide{animation:hide-modal .22s ease-in-out forwards}.dnb-dialog--no-animation{animation-duration:0ms!important}@media screen and (max-width:40em){.dnb-dialog--no-animation-on-mobile{animation-delay:0ms!important;animation-duration:0ms!important}}.dnb-dialog__body{margin-bottom:calc(var(--dialog-spacing-minus)*2);padding-bottom:calc(var(--dialog-spacing)*2)}.dnb-dialog__header:after{height:600%;top:-500%}.dnb-dialog__header .dnb-modal__title,.dnb-dialog__header [class*=dnb-h--]{padding:0}.dnb-dialog__header .dnb-modal__title:not([class*=__top]),.dnb-dialog__header [class*=dnb-h--]:not([class*=__top]){margin-top:0}.dnb-dialog__header .dnb-modal__title:not([class*=__bottom]),.dnb-dialog__header [class*=dnb-h--]:not([class*=__bottom]){margin-bottom:0}.dnb-dialog--spacing .dnb-dialog__header .dnb-tabs{margin-top:3.5rem}.dnb-dialog__icon{display:flex}.dnb-dialog__icon~.dnb-dialog__header{margin-top:1.5rem}@supports (-webkit-touch-callout:none){@media (max-height:40em){.dnb-dialog .dnb-scroll-view{max-height:82vh}}}[data-visual-test].hide-page-content #___gatsby{opacity:0}

package/cjs/components/dialog/style/dnb-dialog.scss

@@ -112,12 +112,10 @@
     padding-top: 1.5rem;
 
     display: flex;
+    flex-flow: row wrap;
     justify-content: center;
+    gap: 1rem;
     width: 100%;
-
-    > :not(:last-child) {
-      margin-right: 1rem;
-    }
   }
 
   &--information &__actions {

package/cjs/components/dropdown/Dropdown.d.ts

@@ -13,6 +13,7 @@ import type {
   DrawerListProps,
   DrawerListData
 } from '../../fragments/DrawerList';
+import type { GlobalStatusConfigObject } from '../GlobalStatus';
 export type DropdownData = DrawerListData;
 type DropdownTitle = string | React.ReactNode;
 type DropdownAlignDropdown = 'left' | 'right';
@@ -78,9 +79,9 @@ export interface DropdownProps
   status_no_animation?: boolean;
 
   /**
-   * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   * The <a href="/uilib/components/global-status/properties/#configuration-object">configuration</a> used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
    */
-  global_status_id?: string;
+  globalStatus?: GlobalStatusConfigObject;
 
   /**
    * Same as `prevent_selection`, but the "selection area" (given title) will not be visible and the icon `more` (three dots) is used. Defaults to `false`.