@dnb/eufemia 10.18.0 → 10.20.0

package/cjs/style/themes/theme-eiendom/eiendom-theme-components.css

@@ -451,6 +451,16 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
   border-color: transparent;
 }
 
+.dnb-text-counter .dnb-icon {
+  margin-right: 0;
+  font-size: 0;
+  transition: margin 200ms var(--easing-default), font-size 400ms var(--easing-default);
+}
+.dnb-text-counter--exceeded .dnb-icon {
+  margin-right: 0.5rem;
+  font-size: var(--font-size-basis--em);
+}
+
 /**
  * ATTENTION: This file is auto generated by using "styleFactory".
  * Do not change the content!
@@ -491,12 +501,6 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
 /*
  * Utilities
  */
-:root {
-  --forms-field-width--small: 5rem;
-  --forms-field-width--medium: 11rem;
-  --forms-field-width--large: 21rem;
-}
-
 .dnb-forms-field-number {
   --number-control-button-border-color: black;
   --number-control-button-border-color--hover: darkgrey;
@@ -694,12 +698,21 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
   max-width: 14ch;
 }
 
+/*
+ * Utilities
+ */
 .dnb-forms-field-postal-code-and-city__fields {
   display: flex;
   flex-flow: row;
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
 }
+@media screen and (max-width: 25em) {
+  .dnb-forms-field-postal-code-and-city__fields {
+    row-gap: var(--spacing-x-small);
+    flex-flow: column;
+  }
+}
 .dnb-forms-field-postal-code-and-city__postal-code {
   flex: 0 5rem;
 }
@@ -717,15 +730,22 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
   line-height: 2.5rem;
 }
 
+/*
+ * Utilities
+ */
 :root {
   --forms-field-width--small: 5rem;
   --forms-field-width--medium: 11rem;
   --forms-field-width--large: 21rem;
 }
 
-/*
- * Utilities
- */
+@media screen and (max-width: 15em) {
+  .dnb-forms-field-string .dnb-input__shell,
+  .dnb-forms-field-number .dnb-input__shell {
+    width: 90%;
+  }
+}
+
 fieldset.dnb-forms-field-block {
   padding: 0;
   border: none;
@@ -743,6 +763,9 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   margin-left: 0;
 }
 
+.dnb-forms-field-block {
+  width: 100%;
+}
 .dnb-forms-field-block__grid {
   display: grid;
 }
@@ -766,7 +789,7 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 .dnb-forms-field-block--width-stretch {
   flex-grow: 1;
 }
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 25em) {
   .dnb-forms-field-block--width-small {
     width: var(--forms-field-width--small);
   }
@@ -784,16 +807,23 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   justify-content: space-between;
   align-items: center;
 }
+.dnb-forms-field-block__label-description {
+  margin-left: 0.3em;
+}
 .dnb-forms-field-block__status {
   grid-area: status;
 }
+.dnb-forms-field-block__status .dnb-form-status__shell {
+  margin-top: 0.5rem;
+}
 .dnb-forms-field-block__contents {
   grid-area: contents;
+  width: 100%;
 }
 .dnb-forms-field-block__contents--width-stretch {
   width: 100%;
 }
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 25em) {
   .dnb-forms-field-block__contents--width-small {
     width: var(--forms-field-width--small);
   }
@@ -854,8 +884,14 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   -moz-column-gap: var(--spacing-medium);
        column-gap: var(--spacing-medium);
 }
+.dnb-forms-steps-layout--drawer {
+  flex-direction: column;
+  justify-content: stretch;
+  align-items: stretch;
+}
 .dnb-forms-steps-layout__sidebar {
   flex: 0;
+  margin-bottom: 2rem;
 }
 .dnb-forms-steps-layout__contents {
   flex: 1 0 25rem;
@@ -1025,9 +1061,6 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   width: 100%;
   margin-top: 1rem;
 }
-.dnb-accordion__content.dnb-height-animation--hidden .dnb-accordion__content__inner {
-  display: none;
-}
 .dnb-accordion-group--single-container {
   transition: min-height 1s var(--accordion-easing);
 }
@@ -1819,18 +1852,28 @@ label + .dnb-autocomplete[class*=__form-status] .dnb-autocomplete__shell {
 .dnb-breadcrumb__item__span__icon {
   margin-right: 0.5rem;
 }
-.dnb-breadcrumb__animation {
+.dnb-breadcrumb__multiple {
   display: flex;
   flex-direction: column;
   transition: height 400ms var(--easing-default);
 }
-.dnb-breadcrumb__animation .dnb-breadcrumb__item {
+.dnb-breadcrumb__multiple .dnb-breadcrumb__item {
   transition: transform 400ms var(--easing-default) calc(var(--delay) * 50ms);
   transform: translateX(-1rem);
 }
-.dnb-breadcrumb__animation.dnb-height-animation--parallax .dnb-breadcrumb__item {
+.dnb-breadcrumb__multiple.dnb-height-animation--parallax .dnb-breadcrumb__item {
   transform: translateX(0);
 }
+@media screen and (max-width: 60em) {
+  .dnb-breadcrumb__bar .dnb-breadcrumb__multiple {
+    display: none;
+  }
+}
+@media screen and (min-width: 60em) {
+  .dnb-breadcrumb--variant-multiple .dnb-breadcrumb__toggle {
+    display: none;
+  }
+}
 .dnb-breadcrumb__collapse {
   display: flex;
   flex-direction: column;
@@ -2099,6 +2142,9 @@ button.dnb-button::-moz-focus-inner {
   border: none;
 }
 
+/*
+ * Utilities
+ */
 .dnb-card__heading {
   font-size: var(--font-size-basis);
   font-weight: var(--font-weight-medium);
@@ -2106,6 +2152,32 @@ button.dnb-button::-moz-focus-inner {
 .dnb-card + .dnb-card__heading {
   margin-top: var(--spacing-small);
 }
+.dnb-card.dnb-section {
+  background-color: var(--background-color);
+}
+@media screen and (max-width: 40em) {
+  .dnb-card.dnb-section::before {
+    left: -100vw;
+    right: -100vw;
+  }
+}
+@media screen and (max-width: 40em) {
+  .dnb-card + .dnb-card:not([class*=space__top]) {
+    background: linear-gradient(to left, var(--background-color), var(--background-color)) no-repeat 0 var(--outline-width);
+  }
+  .dnb-card + .dnb-card:not([class*=space__top])::before {
+    top: var(--outline-width);
+  }
+}
+@media screen and (max-width: 40em) {
+  .dnb-flex-container.dnb-flex-container--divider-space .dnb-card + .dnb-card {
+    margin-top: 0;
+  }
+  .dnb-flex-container.dnb-flex-container--divider-space .dnb-card + .dnb-card::before {
+    top: var(--outline-width);
+    z-index: 0;
+  }
+}
 
 /*
 * Checkbox component
@@ -3825,13 +3897,16 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
 .dnb-flex-container--wrap {
   flex-wrap: wrap;
 }
-.dnb-flex-container--row-gap-small, .dnb-flex-container--has-size.dnb-flex-container--spacing-small, .dnb-flex-container--wrap.dnb-flex-container--direction-horizontal {
+.dnb-flex-container--row-gap-off {
+  --gap: 0;
+}
+.dnb-flex-container--row-gap-small {
   --gap: var(--spacing-small);
 }
-.dnb-flex-container--row-gap-medium, .dnb-flex-container--has-size.dnb-flex-container--spacing-medium {
+.dnb-flex-container--row-gap-medium {
   --gap: var(--spacing-medium);
 }
-.dnb-flex-container--row-gap-large, .dnb-flex-container--has-size.dnb-flex-container--spacing-large {
+.dnb-flex-container--row-gap-large {
   --gap: var(--spacing-large);
 }
 .dnb-flex-container__hr.dnb-hr {
@@ -4015,21 +4090,6 @@ legend.dnb-form-label {
   --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
-  transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
-}
-.dnb-form-status--hidden {
-  will-change: height, opacity, margin, padding;
-  width: 0;
-  height: 0;
-  opacity: 0;
-}
-.dnb-form-status--is-animating {
-  overflow: hidden;
-  width: auto;
-}
-.dnb-form-status--disappear, .dnb-form-status--hidden {
-  margin: 0 !important;
-  padding: 0 !important;
 }
 .dnb-form-status__shell {
   display: flex;
@@ -4081,9 +4141,6 @@ button .dnb-form-status__text {
 .dnb-form-status[hidden] {
   display: none;
 }
-.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status {
-  transition-duration: 1ms !important;
-}
 
 /*
  * GlobalError component
@@ -4151,30 +4208,20 @@ button .dnb-form-status__text {
 /*
  * Utilities
  */
-.dnb-global-status {
-  --global-status-easing: var(--easing-default);
-}
 .dnb-global-status.dnb-section {
   display: block;
 }
 .dnb-global-status__shell {
   width: 100%;
-  opacity: 1;
-  will-change: height;
-  transition: height 800ms var(--global-status-easing), opacity 600ms var(--global-status-easing);
 }
-.dnb-global-status--hidden .dnb-global-status__shell {
-  height: 0;
-  opacity: 0;
+.dnb-global-status__shell.dnb-height-animation--hidden {
+  overflow-y: clip;
 }
-.dnb-global-status--no-animation .dnb-global-status__shell, html[data-visual-test] .dnb-global-status__shell {
-  transition-duration: 1ms !important;
+.dnb-global-status__shell .dnb-hr, .dnb-spacing .dnb-global-status__shell .dnb-hr:not([class*=dnb-space__bottom]) {
+  margin: 0 0 0 1rem;
 }
-.dnb-global-status, .dnb-global-status--no-animation.dnb-global-status--visible {
-  display: flex;
-}
-.dnb-global-status--no-animation.dnb-global-status--hidden {
-  display: none;
+.dnb-global-status__shell .dnb-hr::after, .dnb-spacing .dnb-global-status__shell .dnb-hr:not([class*=dnb-space__bottom])::after {
+  top: calc(var(--thickness) * -1);
 }
 .dnb-global-status__title {
   position: relative;
@@ -4338,10 +4385,24 @@ button .dnb-form-status__text {
  * Utilities
  */
 .dnb-height-animation {
-  transition: height var(--duration, 400ms) var(--easing-default);
+  --height-animation: height var(--duration, 400ms) var(--easing-default)
+    var(--delay, 0ms);
+  will-change: height;
+  transition: var(--height-animation);
+}
+html[data-visual-test] .dnb-height-animation {
+  transition: none;
 }
 .dnb-height-animation--animating {
-  overflow: hidden;
+  overflow-y: hidden;
+}
+@supports (overflow-y: clip) {
+  .dnb-height-animation--animating {
+    overflow-y: clip;
+  }
+}
+.dnb-height-animation--hidden {
+  display: none;
 }
 .dnb-height-animation--show-overflow {
   overflow: visible;
@@ -5924,6 +5985,7 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
   --left: -100vw;
   --width: 100vw;
   --height: 100%;
+  --color-transparent: transparent;
   color: var(--text-color, black);
   border-radius: var(--rounded-corner, 0);
 }
@@ -7104,8 +7166,6 @@ span.dnb-space--no-collapse > span {
   overflow: hidden;
   justify-content: space-between;
   border-radius: 0.25rem;
-  will-change: height;
-  transition: height 400ms var(--easing-default);
 }
 .dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button .dnb-button__text, .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button .dnb-button__text {
   text-align: left;
@@ -7116,9 +7176,6 @@ span.dnb-space--no-collapse > span {
 .dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button .dnb-button__alignment, .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button .dnb-button__alignment {
   order: 2;
 }
-html[data-visual-test] .dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button, html[data-visual-test] .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button {
-  transition-duration: 1ms !important;
-}
 .dnb-step-indicator-wrapper .dnb-step-indicator__trigger button.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button {
   margin-top: 0.5rem;
 }
@@ -7890,7 +7947,7 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 }
 .dnb-table__tr--has-accordion-content .dnb-table__toggle-button .dnb-icon {
   color: var(--color-sea-green);
-  transition: transform 500ms var(--accordion-easing);
+  transition: transform 500ms var(--easing-default);
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr--no-animation .dnb-table__toggle-button .dnb-icon, html[data-visual-test] .dnb-table__tr--has-accordion-content .dnb-table__toggle-button .dnb-icon {
   transition: none !important;
@@ -8023,17 +8080,20 @@ html:not([data-whatinput=keyboard]) .dnb-table__tr--has-accordion-content.dnb-ta
 .dnb-table__tr__accordion_content__inner {
   overflow: hidden;
   will-change: height;
-  transition: height 400ms var(--accordion-easing);
+  transition: height 400ms var(--easing-default);
   position: relative;
 }
 .dnb-table__tr__accordion_content__inner__spacing {
   padding: 1rem;
   transform: translateY(-10px);
-  transition: transform 500ms var(--accordion-easing);
+  transition: transform 500ms var(--easing-default);
 }
 .dnb-table__tr__accordion_content--parallax .dnb-table__tr__accordion_content__inner__spacing {
   transform: translateY(0);
 }
+html[data-visual-test] .dnb-table__tr__accordion_content--parallax .dnb-table__tr__accordion_content__inner__spacing {
+  transition: none;
+}
 .dnb-table__tr__accordion_content > td.dnb-table__td {
   padding: 0;
 }
@@ -8598,7 +8658,7 @@ html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disa
 .dnb-textarea__inner {
   display: inline-flex;
   flex-direction: column;
-  margin: var(--textarea-padding-width);
+  margin: 0 var(--textarea-padding-width);
 }
 .dnb-textarea__shell {
   display: inline-flex;
@@ -8613,15 +8673,22 @@ html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disa
   bottom: -0.5rem;
   right: -0.5rem;
   background-color: var(--color-white);
-  box-shadow: 0 0 0 0.0625rem var(--color-sea-green);
+  --border-color: var(--textarea-border-color);
+  --border-width: var(--textarea-border-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
   border-radius: 0.25rem;
 }
 .dnb-textarea__row {
   display: inline-flex;
+  margin: var(--textarea-padding-width) 0;
 }
 .dnb-textarea__suffix.dnb-suffix {
   padding-left: 1rem;
 }
+.dnb-textarea .dnb-text-counter {
+  margin-left: -0.5rem;
+}
 .dnb-textarea__textarea {
   position: relative;
   z-index: 2;
@@ -8712,7 +8779,7 @@ html:not([data-visual-test]) .dnb-textarea__textarea {
 }
 .dnb-textarea__inner > .dnb-form-status {
   order: 2;
-  margin: 1rem 0 0 calc(0px - var(--textarea-padding-width));
+  margin: 0.5rem 0 0 calc(0px - var(--textarea-padding-width));
 }
 .dnb-textarea:not(.dnb-textarea--vertical) .dnb-form-label {
   margin-top: 0.5rem;
@@ -10313,27 +10380,9 @@ html:not([data-whatintent=touch]) .dnb-accordion__header--filled:focus-visible:n
  * Utilities
  */
 .dnb-card.dnb-section {
-  --background-color: var(--color-white);
   --outline-color: var(--border-color, var(--color-lavender));
   --outline-width: 0.25rem;
-}
-@media screen and (max-width: 40em) {
-  .dnb-card::before {
-    left: -100%;
-    right: -100%;
-  }
-}
-.dnb-card + .dnb-card:not([class*=space__top])::before {
-  top: var(--outline-width);
-}
-@media screen and (max-width: 40em) {
-  .dnb-flex-container.dnb-flex-container--divider-space .dnb-card + .dnb-card {
-    margin-top: 0;
-  }
-  .dnb-flex-container.dnb-flex-container--divider-space .dnb-card + .dnb-card::before {
-    top: var(--outline-width);
-    z-index: 0;
-  }
+  --background-color: var(--color-white);
 }
 
 /*
@@ -10641,9 +10690,6 @@ html:not([data-whatintent=touch]) .dnb-dropdown__trigger:hover:not([disabled]) {
 /*
  * Utilities
  */
-.dnb-global-status:not(.dnb-global-status--no-animation).dnb-global-status--fade-in.dnb-global-status.dnb-section::after {
-  box-shadow: 99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor, 297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor, 0 0.0625rem 0 0 var(--color-black-80), 100vw 0.0625rem 0 0 var(--color-black-80);
-}
 .dnb-global-status__icon {
   font-size: 1rem;
 }
@@ -11363,6 +11409,13 @@ html[data-visual-test] .dnb-table__container {
 /*
  * Utilities
  */
+.dnb-textarea {
+  --textarea-border-color: var(--color-sea-green);
+  --textarea-border-color--hover: var(--color-emerald-green);
+  --textarea-border-color--disabled: var(--color-black-55);
+  --textarea-border-width: 0.0625rem;
+  --textarea-border-width--hover: 0.125rem;
+}
 .dnb-textarea__textarea {
   color: var(--color-black);
   background-color: var(--textarea-background-color);
@@ -11376,14 +11429,20 @@ html[data-visual-test] .dnb-table__container {
   color: var(--color-black-55);
 }
 .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus ~ .dnb-textarea__state, .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover ~ .dnb-textarea__state {
-  box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
+  --border-color: var(--textarea-border-color--hover);
+  --border-width: var(--textarea-border-width--hover);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
 }
 .dnb-textarea--disabled .dnb-textarea__textarea, .dnb-textarea__textarea[disabled] {
   color: var(--color-black-55);
   background-color: var(--color-black-3);
 }
 .dnb-textarea--disabled .dnb-textarea__state, .dnb-textarea__textarea[disabled] ~ .dnb-textarea__state {
-  box-shadow: 0 0 0 0.0625rem var(--color-black-55);
+  --border-color: var(--textarea-border-color--disabled);
+  --border-width: var(--textarea-border-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
   background-color: var(--color-black-3);
 }
 .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled), .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover {
@@ -11894,6 +11953,13 @@ html[data-whatinput=keyboard] .dnb-drawer-list__option--selected .dnb-drawer-lis
 /*
  * Utilities
  */
+.dnb-text-counter.dnb-p {
+  color: var(--color-black-55);
+}
+.dnb-text-counter--exceeded.dnb-p {
+  color: var(--color-fire-red);
+}
+
 /**
  * ATTENTION: This file is auto generated by using "themeFactory".
  * But you still can change the content of this file on the very top.
@@ -11938,12 +12004,6 @@ html[data-whatinput=keyboard] .dnb-drawer-list__option--selected .dnb-drawer-lis
 /*
  * Utilities
  */
-:root {
-  --forms-field-width--small: 5rem;
-  --forms-field-width--medium: 11rem;
-  --forms-field-width--large: 21rem;
-}
-
 .dnb-forms-field-number {
   --number-control-button-border-color: black;
   --number-control-button-border-color--hover: darkgrey;
@@ -12141,12 +12201,21 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
   max-width: 14ch;
 }
 
+/*
+ * Utilities
+ */
 .dnb-forms-field-postal-code-and-city__fields {
   display: flex;
   flex-flow: row;
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
 }
+@media screen and (max-width: 25em) {
+  .dnb-forms-field-postal-code-and-city__fields {
+    row-gap: var(--spacing-x-small);
+    flex-flow: column;
+  }
+}
 .dnb-forms-field-postal-code-and-city__postal-code {
   flex: 0 5rem;
 }
@@ -12164,15 +12233,22 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
   line-height: 2.5rem;
 }
 
+/*
+ * Utilities
+ */
 :root {
   --forms-field-width--small: 5rem;
   --forms-field-width--medium: 11rem;
   --forms-field-width--large: 21rem;
 }
 
-/*
- * Utilities
- */
+@media screen and (max-width: 15em) {
+  .dnb-forms-field-string .dnb-input__shell,
+  .dnb-forms-field-number .dnb-input__shell {
+    width: 90%;
+  }
+}
+
 fieldset.dnb-forms-field-block {
   padding: 0;
   border: none;
@@ -12190,6 +12266,9 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   margin-left: 0;
 }
 
+.dnb-forms-field-block {
+  width: 100%;
+}
 .dnb-forms-field-block__grid {
   display: grid;
 }
@@ -12213,7 +12292,7 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 .dnb-forms-field-block--width-stretch {
   flex-grow: 1;
 }
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 25em) {
   .dnb-forms-field-block--width-small {
     width: var(--forms-field-width--small);
   }
@@ -12231,16 +12310,23 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   justify-content: space-between;
   align-items: center;
 }
+.dnb-forms-field-block__label-description {
+  margin-left: 0.3em;
+}
 .dnb-forms-field-block__status {
   grid-area: status;
 }
+.dnb-forms-field-block__status .dnb-form-status__shell {
+  margin-top: 0.5rem;
+}
 .dnb-forms-field-block__contents {
   grid-area: contents;
+  width: 100%;
 }
 .dnb-forms-field-block__contents--width-stretch {
   width: 100%;
 }
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 25em) {
   .dnb-forms-field-block__contents--width-small {
     width: var(--forms-field-width--small);
   }
@@ -12301,8 +12387,14 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   -moz-column-gap: var(--spacing-medium);
        column-gap: var(--spacing-medium);
 }
+.dnb-forms-steps-layout--drawer {
+  flex-direction: column;
+  justify-content: stretch;
+  align-items: stretch;
+}
 .dnb-forms-steps-layout__sidebar {
   flex: 0;
+  margin-bottom: 2rem;
 }
 .dnb-forms-steps-layout__contents {
   flex: 1 0 25rem;
@@ -12366,4 +12458,13 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   --number-control-button-color--active: var(--color-sea-green);
   --number-control-button--error: var(--color-fire-red);
   --number-control-button--error-contrast: var(--color-fire-red-8);
+}
+.dnb-forms-field-number__contents--has-controls .dnb-button.dnb-button--size-small {
+  --button-height--small: 2rem;
+  --button-width--small: 2rem;
+}
+
+.dnb-forms-field-block__label-description {
+  color: var(--color-black-55);
+  font-size: var(--font-size-small);
 }