@dnb/eufemia 10.0.0-beta.3 → 10.0.0-beta.5

package/es/style/themes/theme-sbanken/sbanken-theme-components.css

@@ -1880,7 +1880,11 @@ html[data-visual-test] .dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-
   height: 1px;
 }
 .dnb-date-picker__addon {
-  display: block;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  grid-gap: 1rem;
+  gap: 1rem;
   padding: 1rem;
 }
 .dnb-date-picker__addon::after {
@@ -7653,10 +7657,6 @@ html[data-whatinput=keyboard] .dnb-anchor--contrast:not(:disabled):focus {
   border-color: transparent;
 }
 
-/*
-* Button theme
-*
-*/
 /*
 * Button theme
 *
@@ -7700,14 +7700,6 @@ html[data-whatinput=keyboard] .dnb-anchor--contrast:not(:disabled):focus {
 .dnb-skeleton .dnb-button--tertiary .dnb-button__text::after {
   content: none;
 }
-.dnb-button--tertiary.dnb-button--has-text {
-  padding-left: 0;
-  padding-right: 0;
-}
-.dnb-button--tertiary.dnb-button--has-icon .dnb-button__text::after {
-  left: -1rem;
-  right: -1rem;
-}
 .dnb-button--tertiary:focus[disabled], html:not([data-whatintent=touch]) .dnb-button--tertiary:focus[disabled] {
   cursor: not-allowed;
 }
@@ -7807,7 +7799,6 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .
 }
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text::after {
   left: -0.5rem;
-  right: 0;
 }
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon {
   margin-right: -0.5rem;
@@ -7835,7 +7826,6 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .
   padding-right: 1rem;
 }
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text::after {
-  left: 0;
   right: -0.5rem;
 }
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon {
@@ -7866,285 +7856,6 @@ html[data-whatinput=keyboard] .dnb-button--tertiary:hover:focus .dnb-button__tex
   visibility: hidden;
 }
 
-.dnb-button--primary {
-  color: var(--color-white);
-  background-color: var(--color-sea-green);
-}
-html:not([data-whatintent=touch]) .dnb-button--primary:hover[disabled] {
-  cursor: not-allowed;
-}
-html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]) {
-  color: 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;
-}
-.dnb-button--primary:focus[disabled], html:not([data-whatintent=touch]) .dnb-button--primary:focus[disabled] {
-  cursor: not-allowed;
-}
-.dnb-button--primary:focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]) {
-  outline: none;
-}
-html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]) {
-  color: var(--color-sea-green);
-  background-color: var(--color-white);
-}
-html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]) {
-  --border-color: var(--focus-ring-color);
-  --border-width: var(--focus-ring-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-button--primary:active[disabled], html:not([data-whatintent=touch]) .dnb-button--primary:active[disabled] {
-  cursor: not-allowed;
-}
-.dnb-button--primary:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]) {
-  color: var(--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;
-}
-.dnb-button--primary[disabled] {
-  color: var(--color-white);
-  background-color: var(--color-sea-green-30);
-}
-.dnb-button:not([disabled]).dnb-button--primary.dnb-button__status--error {
-  color: var(--color-white);
-  background-color: var(--color-fire-red);
-}
-.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]) .dnb-button--secondary:hover[disabled] {
-  cursor: not-allowed;
-}
-html:not([data-whatintent=touch]) .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;
-}
-.dnb-button--secondary:focus[disabled], html:not([data-whatintent=touch]) .dnb-button--secondary:focus[disabled] {
-  cursor: not-allowed;
-}
-.dnb-button--secondary:focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]) {
-  outline: none;
-}
-html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]) {
-  color: var(--color-sea-green);
-  background-color: var(--color-white);
-}
-html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]) {
-  --border-color: var(--focus-ring-color);
-  --border-width: var(--focus-ring-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-button--secondary:active[disabled], html:not([data-whatintent=touch]) .dnb-button--secondary:active[disabled] {
-  cursor: not-allowed;
-}
-.dnb-button--secondary:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--secondary:active:not([disabled]) {
-  color: var(--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;
-}
-.dnb-button--secondary[disabled], .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;
-}
-.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;
-}
-.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]) {
-  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;
-}
-.dnb-button--secondary:not(.dnb-button--has-text):focus[disabled], html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus[disabled] {
-  cursor: not-allowed;
-}
-.dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) {
-  outline: none;
-}
-html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) {
-  color: var(--color-emerald-green);
-  background-color: var(--color-white);
-}
-html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) {
-  --border-color: var(--focus-ring-color);
-  --border-width: var(--focus-ring-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-button--secondary:not(.dnb-button--has-text):active[disabled], html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active[disabled] {
-  cursor: not-allowed;
-}
-.dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]) {
-  color: 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;
-}
-.dnb-button--secondary:not(.dnb-button--has-text):not(.dnb-button--input-button).dnb-button--size-large {
-  width: calc(var(--button-width--large) - 0.5rem);
-  line-height: calc(var(--button-height--large) - 0.5rem);
-}
-.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;
-}
-.dnb-button--tertiary {
-  color: var(--color-sea-green);
-  background-color: transparent;
-}
-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 {
-  color: var(--color-ocean-green);
-  background-color: var(--color-accent-yellow);
-}
-html:not([data-whatintent=touch]) .dnb-button--signal:hover[disabled] {
-  cursor: not-allowed;
-}
-html:not([data-whatintent=touch]) .dnb-button--signal:hover:not([disabled]) {
-  color: 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] .dnb-button--signal:active[disabled], html:not([data-whatintent=touch]) html[data-whatintent=touch] .dnb-button--signal:active[disabled] {
-  cursor: not-allowed;
-}
-html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]), html:not([data-whatintent=touch]) html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]) {
-  color: 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;
-}
-.dnb-button--signal:focus[disabled], html:not([data-whatintent=touch]) .dnb-button--signal:focus[disabled] {
-  cursor: not-allowed;
-}
-.dnb-button--signal:focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]) {
-  outline: none;
-}
-html[data-whatinput=keyboard] .dnb-button--signal:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]) {
-  color: var(--color-ocean-green);
-  background-color: var(--color-accent-yellow);
-}
-html[data-whatinput=keyboard] .dnb-button--signal:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]) {
-  --border-color: var(--focus-ring-color);
-  --border-width: var(--focus-ring-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-button--signal:active[disabled], html:not([data-whatintent=touch]) .dnb-button--signal:active[disabled] {
-  cursor: not-allowed;
-}
-.dnb-button--signal:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--signal:active:not([disabled]) {
-  color: 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;
-}
-.dnb-button--signal[disabled] {
-  color: var(--color-black-20);
-  background-color: var(--color-accent-yellow-30);
-}
-.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 {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 0.0625rem;
-  background-color: currentcolor;
-}
-html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus, html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover {
-  color: var(--color-white);
-  box-shadow: none;
-}
-html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus, html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus::after, html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover, html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover::after {
-  background-color: var(--color-sea-green);
-}
-html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):not(:active):hover {
-  border-radius: 0;
-}
-html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active {
-  color: var(--color-sea-green);
-  box-shadow: none;
-}
-html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active, html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active::after {
-  background-color: var(--color-mint-green-50);
-}
-html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text)[disabled] {
-  color: var(--color-black-55);
-  background-color: var(--color-black-3);
-}
-
 .dnb-button--secondary:focus[disabled], .dnb-button--primary:focus[disabled] {
   cursor: not-allowed;
 }
@@ -8162,6 +7873,19 @@ html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]), html
   border-color: transparent;
 }
 
+.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: 0.5rem;
+}
+.dnb-button.dnb-button--has-text.dnb-button--size-large.dnb-button--icon-position-left {
+  padding-left: 0.5rem;
+}
 .dnb-button--primary {
   color: var(--sb-color-green);
   background-color: var(--sb-color-purple-alternative);
@@ -8194,13 +7918,16 @@ html[data-whatinput=""] html:not([data-whatintent=touch]) .dnb-button--primary:h
 html[data-whatinput=""] .dnb-button--primary[disabled] {
   box-shadow: none;
 }
-
+.dnb-button--primary:not([disabled]).dnb-button__status--error {
+  color: var(--sb-color-white);
+  background-color: var(--sb-color-red);
+}
 .dnb-button--secondary {
   color: var(--sb-color-purple-alternative);
   background-color: var(--sb-color-white);
   --border-color: var(--sb-color-purple-alternative);
   --border-width: 0.0625rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
 html:not([data-whatintent=touch]) .dnb-button--secondary:hover[disabled] {
@@ -8211,7 +7938,7 @@ html:not([data-whatintent=touch]) .dnb-button--secondary:hover:not([disabled]) {
   background-color: var(--sb-color-green-light-2);
   --border-color: var(--sb-color-purple-alternative);
   --border-width: 0.0625rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
 .dnb-button--secondary:active[disabled], html:not([data-whatintent=touch]) .dnb-button--secondary:active[disabled] {
@@ -8222,7 +7949,7 @@ html:not([data-whatintent=touch]) .dnb-button--secondary:hover:not([disabled]) {
   background-color: var(--sb-color-white);
   --border-color: var(--sb-color-purple-alternative);
   --border-width: 0.0625rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
 .dnb-button--secondary[disabled] {
@@ -8230,9 +7957,116 @@ html:not([data-whatintent=touch]) .dnb-button--secondary:hover:not([disabled]) {
   background-color: var(--sb-color-white);
   --border-color: var(--sb-color-gray-light);
   --border-width: 0.0625rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-button--secondary:not([disabled]).dnb-button__status--error {
+  color: var(--sb-color-red);
+  background-color: var(--sb-color-white);
+  --border-color: var(--sb-color-red);
+  --border-width: 0.0625rem;
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+html:not([data-whatintent=touch]) .dnb-button--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]) {
+  color: var(--sb-color-red);
+  background-color: var(--sb-color-magenta-light-3);
+  --border-color: var(--sb-color-red);
+  --border-width: 0.0625rem;
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
+.dnb-button--tertiary {
+  color: var(--sb-color-violet);
+  background-color: transparent;
+}
+.dnb-button--tertiary .dnb-button__text::after {
+  height: 0.0625rem;
+  bottom: -0.5rem;
+  left: -0.5rem;
+  right: -0.5rem;
+}
+.dnb-button--tertiary.dnb-button--size-large .dnb-button__text::after {
+  bottom: -0.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: 0.5rem;
+  padding-right: 0.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: 0.5rem;
+  padding-right: 0.5rem;
+}
+.dnb-button--tertiary.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text {
+  margin-bottom: 0.5rem;
+  font-size: var(--button-font-size);
+}
+.dnb-button--tertiary.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text::after {
+  left: -0.5rem;
+  right: -0.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 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.75rem;
+  font-size: var(--button-font-size);
+}
+.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);
+}
 
 /*
  * Logo Component