@dnb/eufemia 10.76.1 → 10.77.0

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

@@ -0,0 +1,469 @@
+/*
+* 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--primary {
+  color: var(--color-white);
+  background-color: var(--color-sea-green);
+}
+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(--color-sea-green);
+  background-color: var(--color-white);
+  --border-color: var(--color-emerald-green);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.eufemia-scope--10_77_0 .dnb-button--primary:focus[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--primary:focus[disabled] {
+  cursor: not-allowed;
+}
+.eufemia-scope--10_77_0 .dnb-button--primary:focus:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--primary:focus:not([disabled]) {
+  outline: none;
+}
+html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-button--primary:focus:not([disabled]), html[data-whatinput=keyboard] .eufemia-scope--10_77_0 html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]) {
+  color: var(--color-sea-green);
+  background-color: var(--color-white);
+}
+html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-button--primary:focus:not([disabled]), html[data-whatinput=keyboard] .eufemia-scope--10_77_0 html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]) {
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.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(--color-sea-green);
+  background-color: var(--color-mint-green-50);
+  --border-color: transparent;
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.eufemia-scope--10_77_0 .dnb-button--primary[disabled] {
+  color: var(--color-white);
+  background-color: var(--color-sea-green-30);
+}
+.eufemia-scope--10_77_0 .dnb-button:not([disabled]).dnb-button--primary.dnb-button__status--error {
+  color: var(--color-white);
+  background-color: var(--color-fire-red);
+}
+.eufemia-scope--10_77_0 .dnb-button--secondary {
+  color: var(--color-sea-green);
+  background-color: var(--color-white);
+  --border-color: var(--color-sea-green);
+  --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]) {
+  color: var(--color-sea-green);
+  background-color: var(--color-white);
+  --border-color: var(--color-emerald-green);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.eufemia-scope--10_77_0 .dnb-button--secondary:focus[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--secondary:focus[disabled] {
+  cursor: not-allowed;
+}
+.eufemia-scope--10_77_0 .dnb-button--secondary:focus:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--secondary:focus:not([disabled]) {
+  outline: none;
+}
+html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-button--secondary:focus:not([disabled]), html[data-whatinput=keyboard] .eufemia-scope--10_77_0 html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]) {
+  color: var(--color-sea-green);
+  background-color: var(--color-white);
+}
+html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-button--secondary:focus:not([disabled]), html[data-whatinput=keyboard] .eufemia-scope--10_77_0 html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]) {
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.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]) {
+  color: var(--color-sea-green);
+  background-color: var(--color-mint-green-50);
+  --border-color: transparent;
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.eufemia-scope--10_77_0 .dnb-button--secondary[disabled], .eufemia-scope--10_77_0 .dnb-button--secondary[disabled]:focus {
+  color: var(--color-sea-green-30);
+  background-color: var(--color-white);
+  --border-color: var(--color-sea-green-30);
+  --border-width: 0.0625rem;
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.eufemia-scope--10_77_0 .dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error {
+  color: var(--color-fire-red);
+  --border-color: var(--color-fire-red);
+  --border-width: 0.0625rem;
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.eufemia-scope--10_77_0 .dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error .dnb-button__icon {
+  color: inherit;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text):hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text):hover:not([disabled]) {
+  color: var(--color-emerald-green);
+  background-color: var(--color-white);
+  --border-color: var(--color-emerald-green);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text):focus[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text):focus[disabled] {
+  cursor: not-allowed;
+}
+.eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) {
+  outline: none;
+}
+html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput=keyboard] .eufemia-scope--10_77_0 html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) {
+  color: var(--color-emerald-green);
+  background-color: var(--color-white);
+}
+html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput=keyboard] .eufemia-scope--10_77_0 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);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text):active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text):active[disabled] {
+  cursor: not-allowed;
+}
+.eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]) {
+  color: var(--color-emerald-green);
+  background-color: var(--color-mint-green-50);
+  --border-color: transparent;
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text):not(.dnb-button--input-button):not(.dnb-button--control-before):not(.dnb-button--control-after).dnb-button--size-large {
+  width: calc(var(--button-width--large) - 0.5rem);
+  line-height: calc(var(--button-height) - 0.5rem);
+}
+.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;
+}
+.eufemia-scope--10_77_0 .dnb-button--active {
+  --border-color: var(--color-emerald-green);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.eufemia-scope--10_77_0 .dnb-button--tertiary {
+  color: var(--color-sea-green);
+  background-color: transparent;
+}
+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 {
+  color: var(--color-emerald-green);
+}
+.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;
+}
+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 {
+  color: var(--color-emerald-green);
+}
+.eufemia-scope--10_77_0 .dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text {
+  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[disabled] {
+  color: var(--color-sea-green-30);
+}
+.eufemia-scope--10_77_0 .dnb-button--signal {
+  color: var(--color-ocean-green);
+  background-color: var(--color-accent-yellow);
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--signal:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--signal:hover:not([disabled]) {
+  color: var(--color-ocean-green);
+  background-color: var(--color-accent-yellow);
+  --border-color: var(--color-ocean-green);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+html[data-whatintent=touch] .eufemia-scope--10_77_0 .dnb-button--signal:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 html[data-whatintent=touch] .dnb-button--signal:active[disabled] {
+  cursor: not-allowed;
+}
+html[data-whatintent=touch] .eufemia-scope--10_77_0 .dnb-button--signal:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]) {
+  color: var(--color-ocean-green);
+  background-color: var(--color-accent-yellow);
+  --border-color: var(--color-ocean-green);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.eufemia-scope--10_77_0 .dnb-button--signal:focus[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--signal:focus[disabled] {
+  cursor: not-allowed;
+}
+.eufemia-scope--10_77_0 .dnb-button--signal:focus:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--signal:focus:not([disabled]) {
+  outline: none;
+}
+html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-button--signal:focus:not([disabled]), html[data-whatinput=keyboard] .eufemia-scope--10_77_0 html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]) {
+  color: var(--color-ocean-green);
+  background-color: var(--color-accent-yellow);
+}
+html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-button--signal:focus:not([disabled]), html[data-whatinput=keyboard] .eufemia-scope--10_77_0 html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]) {
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.eufemia-scope--10_77_0 .dnb-button--signal:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--signal:active[disabled] {
+  cursor: not-allowed;
+}
+.eufemia-scope--10_77_0 .dnb-button--signal:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--signal:active:not([disabled]) {
+  color: var(--color-ocean-green);
+  background-color: var(--color-accent-yellow);
+  --border-color: transparent;
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.eufemia-scope--10_77_0 .dnb-button--signal[disabled] {
+  color: var(--color-black-20);
+  background-color: var(--color-accent-yellow-30);
+}
+.eufemia-scope--10_77_0 .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]) {
+  background-color: transparent;
+  box-shadow: none;
+}
+.eufemia-scope--10_77_0 .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled])::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: var(--input-border-width);
+  background-color: currentcolor;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus-visible, html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover {
+  color: var(--color-white);
+  box-shadow: none;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus-visible, html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus-visible::after, html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover, html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .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]) .eufemia-scope--10_77_0 .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active {
+  color: var(--color-sea-green);
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active, html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .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]) .eufemia-scope--10_77_0 .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active::after {
+  top: var(--input-border-width);
+  bottom: var(--input-border-width);
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text)[disabled] {
+  color: var(--color-black-55);
+  background-color: var(--color-black-3);
+  --border-color: var(--color-black-55);
+  --border-width: var(--input-border-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}

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

@@ -0,0 +1,15 @@
+.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[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{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;border-radius:inherit;bottom:0;box-shadow:0 0 0 var(--border-width) var(--border-color);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]) .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: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{margin-bottom:.25rem;margin-top:0}.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--primary{background-color:var(--color-sea-green);color:var(--color-white)}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(--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)}.eufemia-scope--10_77_0 .dnb-button--primary:focus[disabled],html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--primary:focus[disabled]{cursor:not-allowed}.eufemia-scope--10_77_0 .dnb-button--primary:focus:not([disabled]),html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--primary:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-button--primary:focus:not([disabled]),html[data-whatinput=keyboard] .eufemia-scope--10_77_0 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)}.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]){--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)}.eufemia-scope--10_77_0 .dnb-button--primary[disabled]{background-color:var(--color-sea-green-30);color:var(--color-white)}.eufemia-scope--10_77_0 .dnb-button:not([disabled]).dnb-button--primary.dnb-button__status--error{background-color:var(--color-fire-red);color:var(--color-white)}.eufemia-scope--10_77_0 .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]) .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]){--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)}.eufemia-scope--10_77_0 .dnb-button--secondary:focus[disabled],html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--secondary:focus[disabled]{cursor:not-allowed}.eufemia-scope--10_77_0 .dnb-button--secondary:focus:not([disabled]),html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--secondary:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-button--secondary:focus:not([disabled]),html[data-whatinput=keyboard] .eufemia-scope--10_77_0 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)}.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]){--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)}.eufemia-scope--10_77_0 .dnb-button--secondary[disabled],.eufemia-scope--10_77_0 .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)}.eufemia-scope--10_77_0 .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)}.eufemia-scope--10_77_0 .dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error .dnb-button__icon{color:inherit}html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text):hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .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)}.eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text):focus[disabled],html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text):focus[disabled]{cursor:not-allowed}.eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html[data-whatinput=keyboard] .eufemia-scope--10_77_0 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)}.eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text):active[disabled],html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text):active[disabled]{cursor:not-allowed}.eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .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)}.eufemia-scope--10_77_0 .dnb-button--secondary:not(.dnb-button--has-text):not(.dnb-button--input-button):not(.dnb-button--control-before):not(.dnb-button--control-after).dnb-button--size-large{line-height:calc(var(--button-height) - .5rem);width:calc(var(--button-width--large) - .5rem)}.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}.eufemia-scope--10_77_0 .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)}.eufemia-scope--10_77_0 .dnb-button--tertiary{background-color:transparent;color:var(--color-sea-green)}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{color:var(--color-emerald-green)}.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}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{color:var(--color-emerald-green)}.eufemia-scope--10_77_0 .dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{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[disabled]{color:var(--color-sea-green-30)}.eufemia-scope--10_77_0 .dnb-button--signal{background-color:var(--color-accent-yellow);color:var(--color-ocean-green)}html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--signal:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .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]) .eufemia-scope--10_77_0 html[data-whatintent=touch] .dnb-button--signal:active[disabled],html[data-whatintent=touch] .eufemia-scope--10_77_0 .dnb-button--signal:active[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]),html[data-whatintent=touch] .eufemia-scope--10_77_0 .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)}.eufemia-scope--10_77_0 .dnb-button--signal:focus[disabled],html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--signal:focus[disabled]{cursor:not-allowed}.eufemia-scope--10_77_0 .dnb-button--signal:focus:not([disabled]),html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--signal:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-button--signal:focus:not([disabled]),html[data-whatinput=keyboard] .eufemia-scope--10_77_0 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)}.eufemia-scope--10_77_0 .dnb-button--signal:active[disabled],html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--signal:active[disabled]{cursor:not-allowed}.eufemia-scope--10_77_0 .dnb-button--signal:active:not([disabled]),html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .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)}.eufemia-scope--10_77_0 .dnb-button--signal[disabled]{background-color:var(--color-accent-yellow-30);color:var(--color-black-20)}.eufemia-scope--10_77_0 .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]){background-color:transparent;box-shadow:none}.eufemia-scope--10_77_0 .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:var(--input-border-width)}html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus-visible,html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .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]) .eufemia-scope--10_77_0 .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus-visible,html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus-visible:after,html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover,html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .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]) .eufemia-scope--10_77_0 .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active{color:var(--color-sea-green)}html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active,html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .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]) .eufemia-scope--10_77_0 .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active:after{bottom:var(--input-border-width);top:var(--input-border-width)}html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text)[disabled]{--border-color:var(--color-black-55);--border-width:var(--input-border-width);background-color:var(--color-black-3);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-black-55)}

package/cjs/components/card/style/dnb-card--isolated.css

@@ -0,0 +1,104 @@
+/*
+ * Utilities
+ */
+.eufemia-scope--10_77_0 .dnb-card__heading {
+  font-size: var(--font-size-basis);
+  font-weight: var(--font-weight-medium);
+}
+.eufemia-scope--10_77_0 .dnb-card + .dnb-card__heading {
+  margin-top: var(--spacing-small);
+}
+.eufemia-scope--10_77_0 .dnb-card__title {
+  padding-bottom: 1rem;
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-medium);
+}
+.eufemia-scope--10_77_0 .dnb-card:not([style*="--space-"]) .dnb-card__title {
+  padding: 1rem;
+}
+.eufemia-scope--10_77_0 .dnb-card.dnb-section {
+  --outline-color: var(--card-outline-color);
+  --outline-width: var(--card-outline-width);
+  --background-color: var(--card-background-color);
+  background-color: var(--background-color);
+}
+.eufemia-scope--10_77_0 .dnb-card .dnb-section {
+  z-index: 1;
+}
+@media screen and (min-width: 40.00625em) {
+  .eufemia-scope--10_77_0 .dnb-card {
+    --nested-space-l: calc(var(--padding-left, 0px) * -1);
+    --nested-space-r: calc(var(--padding-right, 0px) * -1);
+  }
+  .eufemia-scope--10_77_0 .dnb-card .dnb-section::after {
+    --left: var(--nested-space-l);
+    --width: calc(100% - var(--nested-space-r) * 2);
+  }
+}
+.eufemia-scope--10_77_0 .dnb-card--filled.dnb-card.dnb-section {
+  --background-color: var(--outline-color);
+}
+@media screen and (max-width: 40em) {
+  .eufemia-scope--10_77_0 .dnb-card--responsive.dnb-section::before {
+    left: var(--left);
+    --outline: 99vw 0 0 0 var(--background-color),
+      198vw 0 0 0 var(--background-color),
+      297vw 0 0 0 var(--background-color),
+      396vw 0 0 0 var(--background-color),
+      0 var(--outline-width) 0 0 var(--outline-color),
+      99vw var(--outline-width) 0 0 var(--outline-color),
+      0 calc(var(--outline-width) * -1) 0 0 var(--outline-color),
+      99vw calc(var(--outline-width) * -1) 0 0 var(--outline-color),
+      198vw var(--outline-width) 0 0 var(--outline-color),
+      198vw calc(var(--outline-width) * -1) 0 0 var(--outline-color);
+  }
+}
+@media screen and (max-width: 40em) {
+  .eufemia-scope--10_77_0 .dnb-card + .dnb-card--responsive:not([class*=space__top]) {
+    background: linear-gradient(to left, var(--background-color), var(--background-color)) no-repeat 0 var(--outline-width);
+  }
+  .eufemia-scope--10_77_0 .dnb-card + .dnb-card--responsive:not([class*=space__top])::before {
+    top: var(--outline-width);
+  }
+}
+@media screen and (max-width: 40em) {
+  .eufemia-scope--10_77_0 .dnb-flex-container.dnb-flex-container--divider-space .dnb-card + .dnb-card--responsive {
+    margin-top: 0;
+  }
+  .eufemia-scope--10_77_0 .dnb-flex-container.dnb-flex-container--divider-space .dnb-card + .dnb-card--responsive::before {
+    top: var(--outline-width);
+    z-index: 0;
+    background-color: transparent;
+  }
+}
+.eufemia-scope--10_77_0 .dnb-card .dnb-flex-container:has(> .dnb-card__title + .dnb-scroll-view) {
+  align-items: stretch;
+  flex-wrap: nowrap;
+}
+.eufemia-scope--10_77_0 .dnb-card--filled .dnb-scroll-view {
+  clip-path: inset(0 0 0 0 round var(--rounded-corner) var(--rounded-corner) var(--rounded-corner) var(--rounded-corner));
+}
+.eufemia-scope--10_77_0 .dnb-card > .dnb-flex-container > .dnb-space:has(> .dnb-scroll-view) {
+  width: 100%;
+}
+.eufemia-scope--10_77_0 .dnb-card > .dnb-flex-container--align-stretch > .dnb-button {
+  align-self: flex-start;
+}
+.eufemia-scope--10_77_0 .dnb-card[style*="--outset"].dnb-space[style]:not(.dnb-card) {
+  padding-left: calc(var(--padding-left) * (1 - var(--outset)));
+  padding-right: calc(var(--padding-right) * (1 - var(--outset)));
+}
+.eufemia-scope--10_77_0 .dnb-card[style*="--outset"].dnb-card > .dnb-flex-container {
+  margin-left: calc(var(--padding-left, var(--spacing-medium)) * -1 * var(--outset));
+  margin-right: calc(var(--padding-right, var(--spacing-medium)) * -1 * var(--outset));
+}
+
+.eufemia-scope--10_77_0 .dnb-card--auto-indent:has(+ .dnb-card, + * + .dnb-card, + * + * + .dnb-card, + .dnb-help-button__content + .dnb-section + .dnb-card):not([class*=space__bottom]) {
+  margin-bottom: var(--spacing-small);
+}
+
+@media screen and (min-width: 40.00625em) {
+  .eufemia-scope--10_77_0 .dnb-card--auto-indent:has(+ .dnb-card:not([style*="--outset"]), + * + .dnb-card:not([style*="--outset"]), + * + * + .dnb-card:not([style*="--outset"]), + .dnb-help-button__content + .dnb-section + .dnb-card:not([style*="--outset"])):not([class*=space__left]) {
+    margin-left: var(--spacing-medium);
+  }
+}

package/cjs/components/card/style/dnb-card--isolated.min.css

@@ -0,0 +1 @@
+.eufemia-scope--10_77_0 .dnb-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.eufemia-scope--10_77_0 .dnb-card+.dnb-card__heading{margin-top:var(--spacing-small)}.eufemia-scope--10_77_0 .dnb-card__title{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);padding-bottom:1rem}.eufemia-scope--10_77_0 .dnb-card:not([style*="--space-"]) .dnb-card__title{padding:1rem}.eufemia-scope--10_77_0 .dnb-card.dnb-section{--outline-color:var(--card-outline-color);--outline-width:var(--card-outline-width);--background-color:var(--card-background-color);background-color:var(--background-color)}.eufemia-scope--10_77_0 .dnb-card .dnb-section{z-index:1}@media screen and (min-width:40.00625em){.eufemia-scope--10_77_0 .dnb-card{--nested-space-l:calc(var(--padding-left, 0px)*-1);--nested-space-r:calc(var(--padding-right, 0px)*-1)}.eufemia-scope--10_77_0 .dnb-card .dnb-section:after{--left:var(--nested-space-l);--width:calc(100% - var(--nested-space-r)*2)}}.eufemia-scope--10_77_0 .dnb-card--filled.dnb-card.dnb-section{--background-color:var(--outline-color)}@media screen and (max-width:40em){.eufemia-scope--10_77_0 .dnb-card--responsive.dnb-section:before{--outline:99vw 0 0 0 var(--background-color),198vw 0 0 0 var(--background-color),297vw 0 0 0 var(--background-color),396vw 0 0 0 var(--background-color),0 var(--outline-width) 0 0 var(--outline-color),99vw var(--outline-width) 0 0 var(--outline-color),0 calc(var(--outline-width)*-1) 0 0 var(--outline-color),99vw calc(var(--outline-width)*-1) 0 0 var(--outline-color),198vw var(--outline-width) 0 0 var(--outline-color),198vw calc(var(--outline-width)*-1) 0 0 var(--outline-color);left:var(--left)}.eufemia-scope--10_77_0 .dnb-card+.dnb-card--responsive:not([class*=space__top]){background:linear-gradient(to left,var(--background-color),var(--background-color)) no-repeat 0 var(--outline-width)}.eufemia-scope--10_77_0 .dnb-card+.dnb-card--responsive:not([class*=space__top]):before{top:var(--outline-width)}.eufemia-scope--10_77_0 .dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive{margin-top:0}.eufemia-scope--10_77_0 .dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive:before{background-color:transparent;top:var(--outline-width);z-index:0}}.eufemia-scope--10_77_0 .dnb-card .dnb-flex-container:has(>.dnb-card__title+.dnb-scroll-view){align-items:stretch;flex-wrap:nowrap}.eufemia-scope--10_77_0 .dnb-card--filled .dnb-scroll-view{clip-path:inset(0 0 0 0 round var(--rounded-corner) var(--rounded-corner) var(--rounded-corner) var(--rounded-corner))}.eufemia-scope--10_77_0 .dnb-card>.dnb-flex-container>.dnb-space:has(>.dnb-scroll-view){width:100%}.eufemia-scope--10_77_0 .dnb-card>.dnb-flex-container--align-stretch>.dnb-button{align-self:flex-start}.eufemia-scope--10_77_0 .dnb-card[style*="--outset"].dnb-space[style]:not(.dnb-card){padding-left:calc(var(--padding-left)*(1 - var(--outset)));padding-right:calc(var(--padding-right)*(1 - var(--outset)))}.eufemia-scope--10_77_0 .dnb-card[style*="--outset"].dnb-card>.dnb-flex-container{margin-left:calc(var(--padding-left, var(--spacing-medium))*-1*var(--outset));margin-right:calc(var(--padding-right, var(--spacing-medium))*-1*var(--outset))}.eufemia-scope--10_77_0 .dnb-card--auto-indent:has(+.dnb-card,+*+.dnb-card,+*+*+.dnb-card,+.dnb-help-button__content+.dnb-section+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}@media screen and (min-width:40.00625em){.eufemia-scope--10_77_0 .dnb-card--auto-indent:has(+.dnb-card:not([style*="--outset"]),+*+.dnb-card:not([style*="--outset"]),+*+*+.dnb-card:not([style*="--outset"]),+.dnb-help-button__content+.dnb-section+.dnb-card:not([style*="--outset"])):not([class*=space__left]){margin-left:var(--spacing-medium)}}

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

@@ -0,0 +1,8 @@
+.eufemia-scope--10_77_0 .dnb-card {
+  --card-outline-color: var(--border-color, var(--sb-color-gray-light));
+  --card-outline-width: 0.0625rem;
+  --card-background-color: var(--sb-color-white);
+}
+.eufemia-scope--10_77_0 .dnb-card .dnb-card {
+  --rounded-corner: 0.375rem;
+}

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

@@ -0,0 +1 @@
+.eufemia-scope--10_77_0 .dnb-card{--card-outline-color:var(--border-color,var(--sb-color-gray-light));--card-outline-width:0.0625rem;--card-background-color:var(--sb-color-white)}.eufemia-scope--10_77_0 .dnb-card .dnb-card{--rounded-corner:0.375rem}

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

@@ -0,0 +1,11 @@
+.eufemia-scope--10_77_0 {
+  --card-outline-color: var(--border-color, var(--color-lavender));
+  --card-outline-width: 0.25rem;
+  --card-background-color: var(--color-white);
+}
+
+.eufemia-scope--10_77_0 .dnb-card .dnb-card {
+  --card-outline-color: var(--color-black-8);
+  --outline-width: 0.0625rem;
+  --rounded-corner: 0.375rem;
+}