@dnb/eufemia 10.76.1 → 10.77.0

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

@@ -0,0 +1,433 @@
+/*
+* Button theme
+*
+*/
+/*
+ * Utilities
+ */
+/*
+ * Utilities
+ */ /*
+* Button mixins
+*
+*/
+/*
+ * Utilities
+ */
+/*
+ * Utilities
+ */ /*
+* Button mixins
+*
+*/
+.eufemia-scope--10_77_0 .dnb-button--tertiary {
+  --button-tertiary-focus-left: -0.5rem;
+  --button-tertiary-focus-right: -0.5rem;
+  --button-tertiary-focus-overflow--icon-top: -0.5rem;
+  --button-tertiary-underline-left: var(
+    --button-tertiary-underline-overflow
+  );
+  --button-tertiary-underline-right: var(
+    --button-tertiary-underline-overflow
+  );
+  --button-tertiary-underline-overflow: 0;
+  --button-tertiary-underline-overflow--icon: calc(
+    (var(--button-icon-gutter) + var(--button-icon-size)) * -1
+  );
+}
+.eufemia-scope--10_77_0 .dnb-button--tertiary .dnb-button__text {
+  position: relative;
+}
+.eufemia-scope--10_77_0 .dnb-button--tertiary .dnb-button__text::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: auto;
+  height: 0.095rem;
+  border-radius: 0.0475rem;
+  color: var(--color-sea-green);
+  background-color: currentcolor;
+  bottom: -0.0625rem;
+  color: transparent;
+  transition: color 250ms ease-in-out;
+  left: var(--button-tertiary-underline-left);
+  right: var(--button-tertiary-underline-right);
+}
+.eufemia-scope--10_77_0 [data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text::after {
+  transition: none;
+}
+.eufemia-scope--10_77_0 .dnb-skeleton .dnb-button--tertiary .dnb-button__text::after {
+  content: none;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--tertiary:focus-visible[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--tertiary:focus-visible:not([disabled]) {
+  outline: none;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--tertiary:focus-visible:not([disabled])::before {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: var(--button-tertiary-focus-left);
+  bottom: 0;
+  right: var(--button-tertiary-focus-right);
+  height: inherit;
+  border-radius: inherit;
+  outline: none;
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--tertiary:focus-visible:not([disabled]) .dnb-button__text::after {
+  visibility: hidden;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--tertiary:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text::after {
+  visibility: visible;
+}
+.eufemia-scope--10_77_0 .dnb-button--tertiary:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--tertiary:active[disabled] {
+  cursor: not-allowed;
+}
+.eufemia-scope--10_77_0 .dnb-button--tertiary:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--tertiary:active:not([disabled]) {
+  outline: initial;
+}
+html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-button--tertiary:active:not([disabled]), html[data-whatinput=keyboard] .eufemia-scope--10_77_0 html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) {
+  box-shadow: none;
+}
+html[data-whatintent=touch] .eufemia-scope--10_77_0 .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after, html[data-whatintent=touch] .eufemia-scope--10_77_0 html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after {
+  transition: none;
+  visibility: visible;
+  opacity: 1;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after, html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after {
+  visibility: hidden;
+}
+.eufemia-scope--10_77_0 .dnb-button--tertiary.dnb-button--has-text {
+  --button-padding-left: 0;
+  --button-padding-right: 0;
+  --button-icon-margin-top: calc(
+    (var(--button-height) - var(--button-icon-size)) / 2
+  );
+}
+.eufemia-scope--10_77_0 .dnb-button--tertiary.dnb-button--has-text .dnb-button__icon {
+  align-self: flex-start;
+}
+.eufemia-scope--10_77_0 .dnb-button--tertiary.dnb-button--icon-position-top {
+  --button-tertiary-focus-left: var(
+    --button-tertiary-focus-overflow--icon-top
+  );
+  --button-tertiary-focus-right: var(
+    --button-tertiary-focus-overflow--icon-top
+  );
+  flex-direction: column;
+  border-radius: 0.5rem;
+  vertical-align: middle;
+}
+.eufemia-scope--10_77_0 .dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text {
+  --button-icon-margin-top: 0.5rem;
+}
+.eufemia-scope--10_77_0 .dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text .dnb-button__icon {
+  align-self: center;
+}
+.eufemia-scope--10_77_0 .dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text {
+  margin-top: 0;
+  margin-bottom: 0.25rem;
+  font-size: var(--font-size-x-small);
+}
+.eufemia-scope--10_77_0 .dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text {
+  font-size: var(--font-size-small);
+}
+.eufemia-scope--10_77_0 .dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__alignment {
+  order: 3;
+  height: 0;
+}
+.eufemia-scope--10_77_0 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-size-medium, .eufemia-scope--10_77_0 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-size-large {
+  --button-tertiary-underline-overflow--icon: var(
+    --button-tertiary-underline-overflow
+  );
+}
+.eufemia-scope--10_77_0 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left {
+  --button-tertiary-focus-right: -1rem;
+  --button-tertiary-underline-left: var(
+    --button-tertiary-underline-overflow--icon
+  );
+}
+.eufemia-scope--10_77_0 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right {
+  --button-tertiary-focus-left: -1rem;
+  --button-tertiary-underline-right: var(
+    --button-tertiary-underline-overflow--icon
+  );
+}
+.eufemia-scope--10_77_0 .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text) {
+  --button-tertiary-focus-left: 0;
+  --button-tertiary-focus-right: 0;
+}
+html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-button--tertiary:hover:focus .dnb-button__text::after {
+  visibility: hidden;
+}
+
+.eufemia-scope--10_77_0 .dnb-button {
+  --button-background--focus: var(--sb-color-blue-light-3);
+  --button-border-radius--control-button: 3rem;
+  --button-padding--large: 1.5rem;
+  --button-primary-shadow: var(--sb-shadow-medium);
+  --button-primary-shadow--hover: var(--sb-shadow-medium);
+  --button-primary-color: var(--sb-color-white);
+  --button-primary-color--hover: var(--sb-color-purple-alternative);
+  --button-primary-color--active: var(--sb-color-white);
+  --button-primary-color--disabled: var(--sb-color-gray-dark-2);
+  --button-primary-background: var(--sb-color-purple-alternative);
+  --button-primary-background--hover: var(--sb-color-green);
+  --button-primary-background--active: var(--sb-color-purple-alternative);
+  --button-primary-background--disabled: var(--sb-color-gray-light);
+  --button-primary-border--hover: transparent;
+  --button-secondary-color: var(--sb-color-purple-alternative);
+  --button-secondary-color--hover: var(--sb-color-purple-alternative);
+  --button-secondary-color--active: var(--sb-color-purple-alternative);
+  --button-secondary-color--disabled: var(--sb-color-gray-dark);
+  --button-secondary-background: var(--sb-color-white);
+  --button-secondary-background--hover: var(--sb-color-green);
+  --button-secondary-background--active: var(--sb-color-white);
+  --button-secondary-border: var(--button-secondary-border--default);
+  --button-secondary-border--default: var(--sb-color-purple-alternative);
+  --button-secondary-border--hover: var(
+    --button-secondary-border--default
+  );
+  --button-secondary-border--active: var(
+    --button-secondary-border--default
+  );
+  --button-secondary-border--disabled: var(--sb-color-gray-light);
+  --button-tertiary-color: var(--sb-color-violet);
+  --button-tertiary-border: var(--sb-color-violet);
+  border: none;
+}
+.eufemia-scope--10_77_0 .dnb-button--has-text.dnb-button--size-large {
+  --button-padding-icon: 1rem;
+}
+.eufemia-scope--10_77_0 .dnb-button--primary {
+  color: var(--button-primary-color);
+  background-color: var(--button-primary-background);
+  box-shadow: var(--button-primary-shadow);
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--primary:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--primary:hover:not([disabled]) {
+  color: var(--button-primary-color--hover);
+  background-color: var(--button-primary-background--hover);
+  --border-color: var(--button-primary-border--hover);
+  --border-width: 0.0625rem;
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color), var(--button-primary-shadow--hover);
+  border-color: transparent;
+}
+.eufemia-scope--10_77_0 .dnb-button--primary:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--primary:active[disabled] {
+  cursor: not-allowed;
+}
+.eufemia-scope--10_77_0 .dnb-button--primary:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--primary:active:not([disabled]) {
+  color: var(--button-primary-color--active);
+  background-color: var(--button-primary-background--active);
+}
+.eufemia-scope--10_77_0 .dnb-button--secondary {
+  color: var(--button-secondary-color);
+  background-color: var(--button-secondary-background);
+  --border-color: var(--button-secondary-border);
+  --border-width: 0.0625rem;
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--secondary:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--secondary:hover:not([disabled]) {
+  --button-secondary-border: var(--button-secondary-border--hover);
+  color: var(--button-secondary-color--hover);
+  background-color: var(--button-secondary-background--hover);
+}
+.eufemia-scope--10_77_0 .dnb-button--secondary:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--secondary:active[disabled] {
+  cursor: not-allowed;
+}
+.eufemia-scope--10_77_0 .dnb-button--secondary:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--secondary:active:not([disabled]) {
+  --button-secondary-border: var(--button-secondary-border--active);
+  color: var(--button-secondary-color--active);
+  background-color: var(--button-secondary-background--active);
+}
+.eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-before, .eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-after {
+  box-shadow: none;
+  border: none;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-before:hover[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-after:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-before:hover:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-after:hover:not([disabled]) {
+  box-shadow: none;
+  border: none;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--primary:focus-visible[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--secondary:focus-visible[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--primary:focus-visible:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--secondary:focus-visible:not([disabled]) {
+  color: var(--sb-color-blue-dark);
+  background-color: var(--button-background--focus);
+  outline: none;
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color), var(--sb-shadow-medium);
+  border-color: transparent;
+}
+.eufemia-scope--10_77_0 .dnb-button[disabled] {
+  --button-primary-shadow: 0 0 transparent;
+  --button-primary-color: var(--button-primary-color--disabled);
+  --button-primary-background: var(
+    --button-primary-background--disabled
+  );
+  --button-secondary-color: var(--button-secondary-color--disabled);
+  --button-secondary-border--default: var(
+    --button-secondary-border--disabled
+  );
+}
+.eufemia-scope--10_77_0 .dnb-button:not([disabled]).dnb-button__status--error {
+  --button-primary-shadow--hover: 0 0 transparent;
+  --button-primary-color: var(--sb-color-white);
+  --button-primary-color--hover: var(--sb-color-red);
+  --button-primary-color--active: var(--sb-color-white);
+  --button-primary-background: var(--sb-color-red);
+  --button-primary-background--hover: var(--sb-color-magenta-light-3);
+  --button-primary-background--active: var(--sb-color-red);
+  --button-primary-border--hover: var(--sb-color-red);
+  --button-secondary-color: var(--sb-color-red);
+  --button-secondary-color--hover: var(--sb-color-red);
+  --button-secondary-color--active: var(--sb-color-red);
+  --button-secondary-background--hover: var(--sb-color-magenta-light-3);
+  --button-secondary-border--default: var(--sb-color-red);
+}
+.eufemia-scope--10_77_0 .dnb-button--tertiary {
+  --button-tertiary-focus-overflow--icon-top: 0;
+  --button-tertiary-underline-overflow: -0.5rem;
+  --button-tertiary-underline-overflow--icon: calc(
+    (
+        var(--button-icon-gutter) + var(--button-icon-size) - var(
+            --button-tertiary-underline-overflow
+          )
+      ) * -1
+  );
+  --button-tertiary-underline-bottom: -0.5rem;
+  --button-tertiary-text-bottom--icon: 0.5rem;
+  --button-tertiary-text-top--icon: 0;
+  color: var(--button-tertiary-color);
+  background-color: transparent;
+}
+.eufemia-scope--10_77_0 .dnb-button--tertiary .dnb-button__text::after {
+  height: 0.0625rem;
+  bottom: var(--button-tertiary-underline-bottom);
+}
+.eufemia-scope--10_77_0 .dnb-button--tertiary.dnb-button--has-text.dnb-button--icon-position-top {
+  --button-padding-left: calc(
+    var(--button-tertiary-underline-overflow) * -1
+  );
+  --button-padding-right: calc(
+    var(--button-tertiary-underline-overflow) * -1
+  );
+}
+.eufemia-scope--10_77_0 .dnb-button--tertiary.dnb-button--has-text.dnb-button--icon-position-top .dnb-button__text {
+  margin-top: var(--button-tertiary-text-top--icon);
+  margin-bottom: var(--button-tertiary-text-bottom--icon);
+  font-size: var(--button-font-size);
+}
+.eufemia-scope--10_77_0 .dnb-button--tertiary.dnb-button--size-large {
+  --button-tertiary-underline-bottom: -0.75rem;
+  --button-tertiary-underline-overflow: -1.5rem;
+  --button-tertiary-text-bottom--icon: 0.75rem;
+  --button-tertiary-text-top--icon: 0.25rem;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--tertiary:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--tertiary:hover:not([disabled]):not(:focus-visible) .dnb-button__text::after {
+  color: var(--button-tertiary-border);
+  transition: none;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--tertiary:hover:not([disabled]):not(.dnb-button--has-text) {
+  --focus-ring-width: 0.0625rem;
+  --sb-shadow-medium: 0 0 transparent;
+  color: var(--sb-color-blue-dark);
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--tertiary:hover:not([disabled]):not(.dnb-button--has-text)::before {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: var(--button-tertiary-focus-left);
+  bottom: 0;
+  right: var(--button-tertiary-focus-right);
+  height: inherit;
+  border-radius: inherit;
+  outline: none;
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color), var(--sb-shadow-medium);
+  border-color: transparent;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--tertiary:hover:not([disabled]):not(.dnb-button--has-text)::before {
+  background-color: var(--button-background--focus);
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--tertiary:hover:not([disabled]):not(.dnb-button--has-text) > * {
+  z-index: 2;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--tertiary:focus-visible[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--tertiary:focus-visible:not([disabled]) {
+  color: var(--sb-color-blue-dark);
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--tertiary:focus-visible:not([disabled])::before {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: var(--button-tertiary-focus-left);
+  bottom: 0;
+  right: var(--button-tertiary-focus-right);
+  height: inherit;
+  border-radius: inherit;
+  outline: none;
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color), var(--sb-shadow-medium);
+  border-color: transparent;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--tertiary:focus-visible:not([disabled])::before {
+  background-color: var(--button-background--focus);
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--tertiary:focus-visible:not([disabled]) > * {
+  z-index: 2;
+}
+.eufemia-scope--10_77_0 .dnb-button--tertiary[disabled] {
+  color: var(--sb-color-gray-dark);
+}
+.eufemia-scope--10_77_0 .dnb-button--on-dark-background {
+  --button-primary-color: var(--sb-color-text);
+  --button-primary-color--hover: var(--sb-color-purple-alternative);
+  --button-primary-color--active: var(--sb-color-purple-alternative);
+  --button-primary-background: var(--sb-color-green);
+  --button-primary-background--hover: var(--sb-color-violet-light-2);
+  --button-primary-background--active: var(--sb-color-violet-light-3);
+  --button-secondary-color: var(--sb-color-white);
+  --button-secondary-color--hover: var(--sb-color-purple-alternative);
+  --button-secondary-color--active: var(--sb-color-purple-alternative);
+  --button-secondary-background: transparent;
+  --button-secondary-background--hover: var(--sb-color-violet-light-2);
+  --button-secondary-background--active: var(--sb-color-violet-light-3);
+  --button-secondary-border--default: var(--sb-color-green);
+  --button-secondary-border--hover: var(--sb-color-violet-light);
+  --button-secondary-border--active: var(--sb-color-violet-light);
+  --button-tertiary-color: var(--sb-color-white);
+  --button-tertiary-border: var(--sb-color-green);
+}

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

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