@dnb/eufemia 10.76.1 → 10.77.0

package/components/help-button/style/dnb-help-button-inline--isolated.min.css

@@ -0,0 +1 @@
+.eufemia-scope--10_77_0 .dnb-help-button.dnb-help-button__inline--open{--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-help-button__inline svg{will-change:transform}.eufemia-scope--10_77_0 .dnb-help-button__inline svg:nth-of-type(2){bottom:0;left:0;margin:auto;opacity:0;position:absolute;right:0;top:0}.eufemia-scope--10_77_0 .dnb-help-button__inline--open svg:first-of-type{opacity:0}.eufemia-scope--10_77_0 .dnb-help-button__inline--open svg:nth-of-type(2){animation:rotate-icon-in .4s var(--easing-default) forwards}.eufemia-scope--10_77_0 .dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:first-of-type{animation:animate-question .4s var(--easing-default) .2s forwards;opacity:0}.eufemia-scope--10_77_0 .dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(2){animation:rotate-icon-out .4s var(--easing-default) forwards}.eufemia-scope--10_77_0 .dnb-help-button__inline:not(.dnb-help-button__inline--user-intent) svg,html[data-visual-test] .eufemia-scope--10_77_0 .dnb-help-button__inline svg{animation-duration:0ms}@keyframes rotate-icon-in{0%{opacity:0;transform:rotate(0deg)}to{opacity:1;transform:rotate(90deg)}}@keyframes rotate-icon-out{0%{opacity:1;transform:rotate(90deg)}30%{opacity:1}to{opacity:0;transform:rotate(0deg)}}@keyframes animate-question{0%{opacity:0;transform:rotate(10deg)}to{opacity:1;transform:rotate(0deg)}}.eufemia-scope--10_77_0 .dnb-help-button__content{--help-button-indent-width:var(--card-outline-width)}.eufemia-scope--10_77_0 .dnb-help-button__content .dnb-section{--background-color:var(--help-button-content-background);--rounded-corner--value:calc(var(--card-outline-width) + 0.5rem)}.eufemia-scope--10_77_0 .dnb-help-button__content .dnb-section .dnb-p{max-width:var(--text-block-max-width);transform:translate3d(0,-.5rem,0);transition:transform .4s var(--easing-default) 40ms}.eufemia-scope--10_77_0 :not(.dnb-card) .dnb-help-button__content .dnb-section{--outset-left:calc(var(--spacing-medium) + var(--help-button-indent-width));--outset-right:calc(var(--spacing-medium) + var(--help-button-indent-width))}.eufemia-scope--10_77_0 .dnb-help-button__content.dnb-height-animation--parallax .dnb-section .dnb-p{transform:translateZ(0)}

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

@@ -0,0 +1,7 @@
+/*
+ * Help button theme for Sbanken
+ *
+ */
+.eufemia-scope--10_77_0 .dnb-help-button__content {
+  --help-button-content-background: var(--sb-color-green);
+}

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

@@ -0,0 +1 @@
+.eufemia-scope--10_77_0 .dnb-help-button__content{--help-button-content-background:var(--sb-color-green)}

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

@@ -0,0 +1,7 @@
+/*
+ * Help button theme for UI
+ *
+ */
+.eufemia-scope--10_77_0 .dnb-help-button__content {
+  --help-button-content-background: var(--color-lavender);
+}

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

@@ -0,0 +1 @@
+.eufemia-scope--10_77_0 .dnb-help-button__content{--help-button-content-background:var(--color-lavender)}

package/components/icon/style/dnb-icon--isolated.css

@@ -0,0 +1,77 @@
+/*
+* Icon component
+*
+*/
+/*
+ * Utilities
+ */
+.eufemia-scope--10_77_0 .dnb-icon {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 1rem;
+  line-height: 1rem;
+  color: inherit;
+  width: 1em;
+  height: 1em;
+}
+.eufemia-scope--10_77_0 .dnb-icon img, .eufemia-scope--10_77_0 :where(.dnb-core-style) .dnb-icon img, .eufemia-scope--10_77_0 .dnb-icon svg, .eufemia-scope--10_77_0 :where(.dnb-core-style) .dnb-icon svg {
+  width: inherit;
+  height: inherit;
+  shape-rendering: geometricprecision;
+  vertical-align: top;
+}
+.eufemia-scope--10_77_0 .dnb-icon svg[width="100%"] {
+  width: inherit;
+}
+.eufemia-scope--10_77_0 .dnb-icon svg[height="100%"] {
+  height: inherit;
+}
+.eufemia-scope--10_77_0 .dnb-icon--inherit-color svg:not([fill]), .eufemia-scope--10_77_0 .dnb-icon--inherit-color svg [fill] {
+  fill: currentcolor;
+}
+.eufemia-scope--10_77_0 .dnb-icon--inherit-color svg [stroke] {
+  stroke: currentcolor;
+}
+.eufemia-scope--10_77_0 .dnb-icon--small {
+  font-size: 0.75rem;
+}
+.eufemia-scope--10_77_0 .dnb-icon--default {
+  font-size: 1rem;
+}
+.eufemia-scope--10_77_0 .dnb-icon--medium {
+  font-size: 1.5rem;
+}
+.eufemia-scope--10_77_0 .dnb-icon--large {
+  font-size: 2rem;
+}
+.eufemia-scope--10_77_0 .dnb-icon--x-large {
+  font-size: 2.5rem;
+}
+.eufemia-scope--10_77_0 .dnb-icon--xx-large {
+  font-size: 3rem;
+}
+.eufemia-scope--10_77_0 .dnb-icon--custom-size {
+  width: auto;
+  height: auto;
+  line-height: 0;
+}
+.eufemia-scope--10_77_0 .dnb-icon--auto {
+  font-size: 1em;
+}
+.eufemia-scope--10_77_0 .dnb-icon--auto > .dnb-icon--wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.eufemia-scope--10_77_0 h1 > .dnb-icon, .eufemia-scope--10_77_0 h2 > .dnb-icon, .eufemia-scope--10_77_0 h3 > .dnb-icon, .eufemia-scope--10_77_0 h4 > .dnb-icon, .eufemia-scope--10_77_0 h5 > .dnb-icon, .eufemia-scope--10_77_0 h6 > .dnb-icon {
+  vertical-align: middle;
+}
+.eufemia-scope--10_77_0 p > .dnb-icon {
+  vertical-align: inherit;
+}
+.eufemia-scope--10_77_0 .dnb-icon.dnb-skeleton {
+  color: var(--skeleton-color) !important;
+}
+.eufemia-scope--10_77_0 .dnb-icon.dnb-skeleton::before, .eufemia-scope--10_77_0 .dnb-icon.dnb-skeleton::after {
+  content: none !important;
+}

package/components/icon/style/dnb-icon--isolated.min.css

@@ -0,0 +1 @@
+.eufemia-scope--10_77_0 .dnb-icon{color:inherit;display:inline-block;font-size:1rem;height:1em;line-height:1rem;vertical-align:middle;width:1em}.eufemia-scope--10_77_0 .dnb-icon img,.eufemia-scope--10_77_0 .dnb-icon svg,.eufemia-scope--10_77_0 :where(.dnb-core-style) .dnb-icon img,.eufemia-scope--10_77_0 :where(.dnb-core-style) .dnb-icon svg{shape-rendering:geometricprecision;height:inherit;vertical-align:top;width:inherit}.eufemia-scope--10_77_0 .dnb-icon svg[width="100%"]{width:inherit}.eufemia-scope--10_77_0 .dnb-icon svg[height="100%"]{height:inherit}.eufemia-scope--10_77_0 .dnb-icon--inherit-color svg [fill],.eufemia-scope--10_77_0 .dnb-icon--inherit-color svg:not([fill]){fill:currentcolor}.eufemia-scope--10_77_0 .dnb-icon--inherit-color svg [stroke]{stroke:currentcolor}.eufemia-scope--10_77_0 .dnb-icon--small{font-size:.75rem}.eufemia-scope--10_77_0 .dnb-icon--default{font-size:1rem}.eufemia-scope--10_77_0 .dnb-icon--medium{font-size:1.5rem}.eufemia-scope--10_77_0 .dnb-icon--large{font-size:2rem}.eufemia-scope--10_77_0 .dnb-icon--x-large{font-size:2.5rem}.eufemia-scope--10_77_0 .dnb-icon--xx-large{font-size:3rem}.eufemia-scope--10_77_0 .dnb-icon--custom-size{height:auto;line-height:0;width:auto}.eufemia-scope--10_77_0 .dnb-icon--auto{font-size:1em}.eufemia-scope--10_77_0 .dnb-icon--auto>.dnb-icon--wrapper{align-items:center;display:inline-flex;justify-content:center}.eufemia-scope--10_77_0 h1>.dnb-icon,.eufemia-scope--10_77_0 h2>.dnb-icon,.eufemia-scope--10_77_0 h3>.dnb-icon,.eufemia-scope--10_77_0 h4>.dnb-icon,.eufemia-scope--10_77_0 h5>.dnb-icon,.eufemia-scope--10_77_0 h6>.dnb-icon{vertical-align:middle}.eufemia-scope--10_77_0 p>.dnb-icon{vertical-align:inherit}.eufemia-scope--10_77_0 .dnb-icon.dnb-skeleton{color:var(--skeleton-color)!important}.eufemia-scope--10_77_0 .dnb-icon.dnb-skeleton:after,.eufemia-scope--10_77_0 .dnb-icon.dnb-skeleton:before{content:none!important}

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

@@ -0,0 +1,23 @@
+/*
+ * Icon theme
+ *
+ */
+.eufemia-scope--10_77_0 .dnb-icon {
+  --icon-border-positioning: var(--icon-border-positioning--default, -25%);
+}
+.eufemia-scope--10_77_0 .dnb-icon--border {
+  position: relative;
+  vertical-align: baseline;
+}
+.eufemia-scope--10_77_0 .dnb-icon--border::after {
+  content: "";
+  position: absolute;
+  left: var(--icon-border-positioning);
+  right: var(--icon-border-positioning);
+  top: var(--icon-border-positioning);
+  bottom: var(--icon-border-positioning);
+  margin: auto;
+  border-radius: 50%;
+  border: 0.0875rem solid;
+  border-color: currentcolor;
+}

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

@@ -0,0 +1 @@
+.eufemia-scope--10_77_0 .dnb-icon{--icon-border-positioning:var(--icon-border-positioning--default,-25%)}.eufemia-scope--10_77_0 .dnb-icon--border{position:relative;vertical-align:baseline}.eufemia-scope--10_77_0 .dnb-icon--border:after{border:.0875rem solid;border-radius:50%;bottom:var(--icon-border-positioning);content:"";left:var(--icon-border-positioning);margin:auto;position:absolute;right:var(--icon-border-positioning);top:var(--icon-border-positioning)}

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

@@ -0,0 +1,65 @@
+/*
+* InfoCard component
+*
+*/
+/*
+ * Utilities
+ */
+.eufemia-scope--10_77_0 .dnb-info-card {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  padding: 1rem;
+  overflow: hidden;
+  background: var(--color-white);
+}
+.eufemia-scope--10_77_0 .dnb-info-card::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  border: 1px solid var(--color-black-8);
+}
+.eufemia-scope--10_77_0 .dnb-info-card, .eufemia-scope--10_77_0 .dnb-info-card::after {
+  border-radius: 0.25rem;
+}
+.eufemia-scope--10_77_0 .dnb-info-card--centered {
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+.eufemia-scope--10_77_0 .dnb-info-card--centered:not(.dnb-info-card--stretch) {
+  margin: auto;
+}
+.eufemia-scope--10_77_0 .dnb-info-card--shadow {
+  box-shadow: var(--shadow-default);
+}
+.eufemia-scope--10_77_0 .dnb-info-card__content {
+  flex-direction: column;
+  margin-top: 0.1875rem;
+}
+.eufemia-scope--10_77_0 .dnb-info-card:not(.dnb-info-card--stretch), .eufemia-scope--10_77_0 .dnb-info-card__content {
+  max-width: var(--text-block-max-width);
+}
+.eufemia-scope--10_77_0 .dnb-info-card--centered .dnb-info-card__content {
+  margin-top: 0;
+}
+.eufemia-scope--10_77_0 .dnb-info-card__icon {
+  color: var(--color-emerald-green);
+}
+.eufemia-scope--10_77_0 .dnb-info-card__image {
+  height: 4rem;
+  width: 4rem;
+}
+.eufemia-scope--10_77_0 .dnb-info-card__buttons {
+  display: flex;
+  flex-flow: row wrap;
+}
+.eufemia-scope--10_77_0 .dnb-info-card--centered .dnb-info-card__buttons {
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}

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

@@ -0,0 +1 @@
+.eufemia-scope--10_77_0 .dnb-info-card{background:var(--color-white);display:flex;flex-direction:row;overflow:hidden;padding:1rem;position:relative}.eufemia-scope--10_77_0 .dnb-info-card:after{border:1px solid var(--color-black-8);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.eufemia-scope--10_77_0 .dnb-info-card,.eufemia-scope--10_77_0 .dnb-info-card:after{border-radius:.25rem}.eufemia-scope--10_77_0 .dnb-info-card--centered{align-items:center;flex-direction:column;text-align:center}.eufemia-scope--10_77_0 .dnb-info-card--centered:not(.dnb-info-card--stretch){margin:auto}.eufemia-scope--10_77_0 .dnb-info-card--shadow{box-shadow:var(--shadow-default)}.eufemia-scope--10_77_0 .dnb-info-card__content{flex-direction:column;margin-top:.1875rem}.eufemia-scope--10_77_0 .dnb-info-card:not(.dnb-info-card--stretch),.eufemia-scope--10_77_0 .dnb-info-card__content{max-width:var(--text-block-max-width)}.eufemia-scope--10_77_0 .dnb-info-card--centered .dnb-info-card__content{margin-top:0}.eufemia-scope--10_77_0 .dnb-info-card__icon{color:var(--color-emerald-green)}.eufemia-scope--10_77_0 .dnb-info-card__image{height:4rem;width:4rem}.eufemia-scope--10_77_0 .dnb-info-card__buttons{display:flex;flex-flow:row wrap}.eufemia-scope--10_77_0 .dnb-info-card--centered .dnb-info-card__buttons{align-items:center;flex-direction:column;text-align:center}

package/components/input/style/dnb-input--isolated.css

@@ -0,0 +1,417 @@
+/*
+* Input component
+*
+*/
+/*
+ * Utilities
+ */
+.eufemia-scope--10_77_0 .dnb-input {
+  --input-font-size: var(--font-size-basis);
+  --input-font-size--small: var(--font-size-basis);
+  --input-font-size--medium: var(--font-size-basis);
+  --input-font-size--large: var(--font-size-medium);
+  --input-padding: 1rem;
+  --input-padding--small: 1rem;
+  --input-padding--medium: 1rem;
+  --input-padding--large: 1rem;
+  --input-height: 2rem;
+  --input-height--small: 1.5rem;
+  --input-height--medium: 2.5rem;
+  --input-height--large: 3rem;
+  --input-background-color: var(--color-white);
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--input-font-small);
+  line-height: var(--input-height);
+  text-align: left;
+}
+.eufemia-scope--10_77_0 .dnb-input__inner {
+  display: inline-flex;
+  flex-direction: column;
+  width: auto;
+}
+.eufemia-scope--10_77_0 .dnb-input__shell {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border: var(--input-border-width) solid var(--color-sea-green);
+}
+.eufemia-scope--10_77_0 .dnb-input__row {
+  display: inline-flex;
+  align-items: center;
+}
+.eufemia-scope--10_77_0 .dnb-input__input {
+  border: none;
+  outline: none;
+  word-break: normal;
+  position: relative;
+  z-index: 2;
+}
+.eufemia-scope--10_77_0 .dnb-input__input[disabled] {
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: 1;
+}
+.eufemia-scope--10_77_0 .dnb-input__shell, .eufemia-scope--10_77_0 .dnb-input__input {
+  height: var(--input-height);
+  border-radius: var(--input-border-radius);
+}
+.eufemia-scope--10_77_0 .dnb-input__placeholder, .eufemia-scope--10_77_0 .dnb-input__input {
+  width: 100%;
+  padding-left: var(--input-padding);
+  padding-right: var(--input-padding);
+}
+.eufemia-scope--10_77_0 .dnb-input__placeholder, .eufemia-scope--10_77_0 .dnb-input__input, .eufemia-scope--10_77_0 .dnb-input input.dnb-input__input {
+  padding-top: 0;
+  padding-bottom: 0;
+  color: inherit;
+  background-color: transparent;
+  font-size: var(--input-font-size);
+  line-height: inherit;
+}
+.eufemia-scope--10_77_0 .dnb-input__placeholder {
+  pointer-events: none;
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.eufemia-scope--10_77_0 .dnb-input__border {
+  display: flex;
+  border-radius: var(--b-radius, var(--input-border-radius));
+  --border-color: var(--b-color, var(--input-border-color));
+  --border-width: var(--b-width, var(--input-border-width));
+  box-shadow: var(--b-inset, var(--input-border-inset, inset)) 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.eufemia-scope--10_77_0 .dnb-input--disabled .dnb-input__border {
+  --border-color: var(--input-border-color--disabled);
+  --border-width: var(--input-border-width--disabled);
+  box-shadow: var(--input-border-inset--disabled, inset) 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.eufemia-scope--10_77_0 .dnb-input__border:focus-within {
+  --b-color: var(--input-border-color--active);
+  --b-width: var(--input-border-width--active);
+  --b-inset: var(--input-border-inset--active);
+  --b-radius: var(--input-border-radius--active);
+}
+.eufemia-scope--10_77_0 .dnb-input__border:hover, .eufemia-scope--10_77_0 .dnb-input__border.hover {
+  --b-color: var(--input-border-color--hover);
+  --b-width: var(--input-border-width--hover);
+  --b-inset: var(--input-border-inset--hover);
+}
+.eufemia-scope--10_77_0 .dnb-input__status--error .dnb-input__border {
+  --b-color: var(--input-border-color__error);
+  --b-width: var(--input-border-width__error);
+}
+.eufemia-scope--10_77_0 .dnb-input__status--error .dnb-input__border:focus-within {
+  --b-color: var(--input-border-color__error);
+  --b-width: var(--input-border-width__error--active);
+  --b-inset: var(--input-border-inset--active);
+  --b-radius: var(--input-border-radius--active);
+}
+.eufemia-scope--10_77_0 .dnb-input__status--error .dnb-input__border:hover, .eufemia-scope--10_77_0 .dnb-input__status--error .dnb-input__border.hover {
+  --b-color: var(--input-border-color__error);
+  --b-width: var(--input-border-width__error--hover);
+  --b-inset: var(--input-border-inset--hover);
+}
+html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-input__border:focus-within {
+  --b-color: var(--input-border-color--focus);
+  --b-width: var(--input-border-width--focus);
+  --b-inset: var(--input-border-inset--focus);
+  --b-radius: var(--input-border-radius--focus);
+}
+html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-input__status--error .dnb-input__border:focus-within {
+  --b-color: var(--input-border-color__error--focus);
+  --b-width: var(--input-border-width--focus);
+  --b-inset: var(--input-border-inset--focus);
+  --b-radius: var(--input-border-radius--focus);
+}
+.eufemia-scope--10_77_0 .dnb-input input.dnb-input__input[type=file] {
+  line-height: calc(var(--input-height) - 2px);
+}
+.eufemia-scope--10_77_0 .dnb-input__input::-webkit-search-cancel-button {
+  display: none;
+}
+.eufemia-scope--10_77_0 .dnb-input__input::-ms-clear {
+  display: none;
+}
+.eufemia-scope--10_77_0 .dnb-input ::-webkit-file-upload-button {
+  cursor: pointer;
+  outline: none;
+  color: var(--color-sea-green);
+}
+.eufemia-scope--10_77_0 .dnb-input ::-webkit-file-upload-button:active, .eufemia-scope--10_77_0 .dnb-input ::-webkit-file-upload-button:hover {
+  color: var(--color-emerald-green);
+}
+.eufemia-scope--10_77_0 .dnb-input--has-submit-element .dnb-input__placeholder, .eufemia-scope--10_77_0 .dnb-input--has-submit-element .dnb-input__input, .eufemia-scope--10_77_0 .dnb-input--has-clear-button .dnb-input__placeholder, .eufemia-scope--10_77_0 .dnb-input--has-clear-button .dnb-input__input {
+  padding-right: calc(var(--input-padding) * 2.5);
+}
+.eufemia-scope--10_77_0 .dnb-input--password .dnb-input__placeholder, .eufemia-scope--10_77_0 .dnb-input--password .dnb-input__input {
+  margin-right: 2.5rem;
+  padding-right: 0;
+}
+.eufemia-scope--10_77_0 .dnb-input--password .dnb-input__placeholder::-ms-clear, .eufemia-scope--10_77_0 .dnb-input--password .dnb-input__input::-ms-clear {
+  display: none;
+}
+.eufemia-scope--10_77_0 .dnb-input--password .dnb-input__placeholder::-ms-reveal, .eufemia-scope--10_77_0 .dnb-input--password .dnb-input__input::-ms-reveal {
+  display: none;
+}
+.eufemia-scope--10_77_0 .dnb-input--password .dnb-input__placeholder {
+  padding-right: 4rem;
+}
+.eufemia-scope--10_77_0 .dnb-input--password .dnb-input__input {
+  font-family: var(--font-family-monospace);
+}
+.eufemia-scope--10_77_0 .dnb-input__input:-webkit-autofill {
+  box-shadow: 0 0 0 var(--input-border-width) var(--input-border-color) var(--autofill-inset, inset), 0 0 0 10em var(--input-background-color) inset;
+}
+.eufemia-scope--10_77_0 .dnb-input__input:autofill {
+  box-shadow: 0 0 0 var(--input-border-width) var(--input-border-color) var(--autofill-inset, inset), 0 0 0 10em var(--input-background-color) inset;
+}
+.eufemia-scope--10_77_0 .dnb-input__suffix {
+  color: inherit;
+}
+.eufemia-scope--10_77_0 .dnb-input__submit-element {
+  z-index: 3;
+  margin-left: calc(var(--input-height) * -1);
+  line-height: var(--line-height-basis);
+}
+.eufemia-scope--10_77_0 .dnb-input__submit-element .dnb-button--input-button {
+  width: var(--input-height);
+  height: var(--input-height);
+  line-height: var(--input-height);
+}
+.eufemia-scope--10_77_0 .dnb-input__submit-button {
+  position: relative;
+  align-self: center; /* IE needs this to stay centered */
+}
+.eufemia-scope--10_77_0 .dnb-input__submit-button__button {
+  border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;
+}
+.eufemia-scope--10_77_0 .dnb-input > .dnb-form-label {
+  line-height: var(--line-height-basis);
+}
+@media screen and (max-width: 40em) {
+  .eufemia-scope--10_77_0 .dnb-input {
+    flex-wrap: wrap;
+  }
+  .eufemia-scope--10_77_0 .dnb-input > .dnb-form-label {
+    margin-bottom: 0.5rem;
+    margin-top: 0.5rem;
+  }
+}
+.eufemia-scope--10_77_0 .dnb-input:not(.dnb-input--vertical)[class*=__status] {
+  align-items: flex-start;
+}
+.eufemia-scope--10_77_0 .dnb-input:not(.dnb-input--vertical)[class*=__status] > .dnb-form-label {
+  margin-top: 0.25rem;
+}
+.eufemia-scope--10_77_0 .dnb-input--small {
+  line-height: var(--input-height--small);
+}
+.eufemia-scope--10_77_0 .dnb-input--small .dnb-input__shell,
+.eufemia-scope--10_77_0 .dnb-input--small .dnb-input__input {
+  height: var(--input-height--small);
+}
+.eufemia-scope--10_77_0 .dnb-input--small .dnb-input__placeholder,
+.eufemia-scope--10_77_0 .dnb-input--small .dnb-input__input {
+  padding-left: var(--input-padding--small);
+  padding-right: var(--input-padding--small);
+  font-size: var(--input-font-size--small);
+}
+.eufemia-scope--10_77_0 .dnb-input--small .dnb-input__submit-element {
+  margin-left: calc(var(--input-height--small) * -1);
+}
+.eufemia-scope--10_77_0 .dnb-input--small .dnb-input__submit-element .dnb-button--input-button {
+  width: var(--input-height--small);
+  height: var(--input-height--small);
+  line-height: var(--input-height--small);
+}
+.eufemia-scope--10_77_0 .dnb-input--small.dnb-input--has-submit-element .dnb-input__placeholder, .eufemia-scope--10_77_0 .dnb-input--small.dnb-input--has-submit-element .dnb-input__input, .eufemia-scope--10_77_0 .dnb-input--small.dnb-input--has-clear-button .dnb-input__placeholder, .eufemia-scope--10_77_0 .dnb-input--small.dnb-input--has-clear-button .dnb-input__input {
+  padding-right: calc(var(--input-padding--small) * 2);
+}
+.eufemia-scope--10_77_0 .dnb-input--medium {
+  line-height: var(--input-height--medium);
+}
+.eufemia-scope--10_77_0 .dnb-input--medium .dnb-input__shell,
+.eufemia-scope--10_77_0 .dnb-input--medium .dnb-input__input {
+  height: var(--input-height--medium);
+}
+.eufemia-scope--10_77_0 .dnb-input--medium .dnb-input__placeholder,
+.eufemia-scope--10_77_0 .dnb-input--medium .dnb-input__input {
+  padding-left: var(--input-padding--medium);
+  padding-right: var(--input-padding--medium);
+  font-size: var(--input-font-size--medium);
+}
+.eufemia-scope--10_77_0 .dnb-input--medium .dnb-input__submit-element {
+  margin-left: calc(var(--input-height--medium) * -1);
+}
+.eufemia-scope--10_77_0 .dnb-input--medium .dnb-input__submit-element .dnb-button--input-button {
+  width: var(--input-height--medium);
+  height: var(--input-height--medium);
+  line-height: var(--input-height--medium);
+}
+.eufemia-scope--10_77_0 .dnb-input--medium.dnb-input--has-submit-element .dnb-input__placeholder, .eufemia-scope--10_77_0 .dnb-input--medium.dnb-input--has-submit-element .dnb-input__input, .eufemia-scope--10_77_0 .dnb-input--medium.dnb-input--has-clear-button .dnb-input__placeholder, .eufemia-scope--10_77_0 .dnb-input--medium.dnb-input--has-clear-button .dnb-input__input {
+  padding-right: calc(var(--input-padding--medium) * 3);
+}
+.eufemia-scope--10_77_0 .dnb-input--large {
+  line-height: var(--input-height--large);
+}
+.eufemia-scope--10_77_0 .dnb-input--large .dnb-input__shell,
+.eufemia-scope--10_77_0 .dnb-input--large .dnb-input__input {
+  height: var(--input-height--large);
+}
+.eufemia-scope--10_77_0 .dnb-input--large .dnb-input__placeholder,
+.eufemia-scope--10_77_0 .dnb-input--large .dnb-input__input {
+  padding-left: var(--input-padding--large);
+  padding-right: var(--input-padding--large);
+  font-size: var(--input-font-size--large);
+}
+.eufemia-scope--10_77_0 .dnb-input--large .dnb-input__submit-element {
+  margin-left: calc(var(--input-height--large) * -1);
+}
+.eufemia-scope--10_77_0 .dnb-input--large .dnb-input__submit-element .dnb-button--input-button {
+  width: var(--input-height--large);
+  height: var(--input-height--large);
+  line-height: var(--input-height--large);
+}
+.eufemia-scope--10_77_0 .dnb-input--large.dnb-input--has-submit-element .dnb-input__placeholder, .eufemia-scope--10_77_0 .dnb-input--large.dnb-input--has-submit-element .dnb-input__input, .eufemia-scope--10_77_0 .dnb-input--large.dnb-input--has-clear-button .dnb-input__placeholder, .eufemia-scope--10_77_0 .dnb-input--large.dnb-input--has-clear-button .dnb-input__input {
+  padding-right: calc(var(--input-padding--large) * 3.5);
+}
+.eufemia-scope--10_77_0 .dnb-input--large.dnb-input--has-clear-button:not(.dnb-input--has-submit-element) .dnb-input__submit-element {
+  margin-left: calc(var(--input-height--large) - 0.5rem);
+}
+.eufemia-scope--10_77_0 .dnb-input__align--center .dnb-input__placeholder, .eufemia-scope--10_77_0 .dnb-input__align--center .dnb-input__input {
+  text-align: center;
+}
+.eufemia-scope--10_77_0 .dnb-input__align--right .dnb-input__placeholder, .eufemia-scope--10_77_0 .dnb-input__align--right .dnb-input__input {
+  text-align: right;
+}
+.eufemia-scope--10_77_0 .dnb-input--clear.dnb-input__submit-element {
+  opacity: 0;
+  transition: opacity 200ms ease-in-out;
+}
+.eufemia-scope--10_77_0 .dnb-input--clear.dnb-input__submit-element .dnb-button {
+  width: var(--input-height--small);
+  height: var(--input-height--small);
+  border-radius: var(--button-border-radius);
+}
+.eufemia-scope--10_77_0 .dnb-input--clear.dnb-input__submit-element .dnb-button .dnb-button__icon {
+  margin: auto;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-input--clear.dnb-input__submit-element .dnb-button:not(.dnb-button--has-text):hover[disabled] {
+  cursor: default;
+}
+.eufemia-scope--10_77_0 .dnb-input--small .dnb-input--clear.dnb-input__submit-element .dnb-button {
+  width: 1rem;
+  height: 1rem;
+}
+.eufemia-scope--10_77_0 .dnb-input--medium .dnb-input--clear.dnb-input__submit-element .dnb-button, .eufemia-scope--10_77_0 .dnb-input--large .dnb-input--clear.dnb-input__submit-element .dnb-button {
+  width: var(--input-height--small);
+  height: var(--input-height--small);
+}
+.eufemia-scope--10_77_0 .dnb-input[data-has-content=true] .dnb-input--clear {
+  opacity: 1;
+}
+.eufemia-scope--10_77_0 .dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element {
+  margin-right: 2.5rem;
+}
+.eufemia-scope--10_77_0 .dnb-input--small.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element {
+  margin-right: 2rem;
+}
+.eufemia-scope--10_77_0 .dnb-input--medium.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element {
+  margin-right: 3rem;
+}
+.eufemia-scope--10_77_0 .dnb-input--large.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element {
+  margin-right: 3.5rem;
+}
+.eufemia-scope--10_77_0 .dnb-input__inner > .dnb-form-status {
+  order: 2;
+  margin-top: 0.5rem;
+}
+.eufemia-scope--10_77_0 .dnb-input--vertical {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.eufemia-scope--10_77_0 .dnb-input--stretch {
+  display: flex;
+  flex-grow: 1;
+}
+.eufemia-scope--10_77_0 .dnb-input--stretch .dnb-input__inner {
+  flex-grow: 1;
+}
+.eufemia-scope--10_77_0 .dnb-input--stretch .dnb-input__inner, .eufemia-scope--10_77_0 .dnb-input--stretch .dnb-input__shell {
+  width: 100%;
+}
+.eufemia-scope--10_77_0 .dnb-input--stretch .dnb-form-label + .dnb-input__inner {
+  width: auto;
+}
+.eufemia-scope--10_77_0 .dnb-input--vertical.dnb-input--stretch .dnb-input__inner {
+  width: 100%;
+}
+.eufemia-scope--10_77_0 .dnb-form-row--horizontal .dnb-input--stretch {
+  width: 100%;
+}
+.eufemia-scope--10_77_0 .dnb-input__icon {
+  order: 0;
+  position: absolute;
+  z-index: 2;
+  left: 1rem;
+  right: auto;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+}
+.eufemia-scope--10_77_0 .dnb-input--icon-position-right .dnb-input__icon {
+  order: 1;
+  left: auto;
+  right: 1rem;
+}
+.eufemia-scope--10_77_0 .dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input, .eufemia-scope--10_77_0 .dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder {
+  padding-left: 2.5rem;
+}
+.eufemia-scope--10_77_0 .dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input, .eufemia-scope--10_77_0 .dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder {
+  padding-right: 2.5rem;
+}
+.eufemia-scope--10_77_0 .dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input, .eufemia-scope--10_77_0 .dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder {
+  padding-left: 3rem;
+}
+.eufemia-scope--10_77_0 .dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input, .eufemia-scope--10_77_0 .dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder {
+  padding-right: 3rem;
+}
+html[data-visual-test] .eufemia-scope--10_77_0 .dnb-input__input {
+  caret-color: var(--color-white);
+}
+.eufemia-scope--10_77_0 .dnb-input[data-has-content=false] .dnb-input__input:focus:-webkit-autofill {
+  --autofill-inset: none;
+}
+.eufemia-scope--10_77_0 .dnb-input[data-has-content=false] .dnb-input__input:focus:autofill {
+  --autofill-inset: none;
+}
+.eufemia-scope--10_77_0 .dnb-input[data-input-state=focus] .dnb-input__placeholder {
+  display: none;
+}
+.eufemia-scope--10_77_0 .dnb-input--keep-placeholder[data-input-state=focus] .dnb-input__placeholder {
+  display: block;
+  color: var(--color-black-20);
+}
+@media screen and (max-width: 40em) {
+  .eufemia-scope--10_77_0 .dnb-responsive-component .dnb-input {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-bottom: 0.5rem;
+  }
+  .eufemia-scope--10_77_0 .dnb-responsive-component .dnb-input__row {
+    align-items: flex-start;
+  }
+  .eufemia-scope--10_77_0 .dnb-responsive-component .dnb-input > .dnb-form-label {
+    margin-bottom: 0.5rem;
+  }
+}

package/components/input/style/dnb-input--isolated.min.css

@@ -0,0 +1 @@
+.eufemia-scope--10_77_0 .dnb-input{--input-font-size:var(--font-size-basis);--input-font-size--small:var(--font-size-basis);--input-font-size--medium:var(--font-size-basis);--input-font-size--large:var(--font-size-medium);--input-padding:1rem;--input-padding--small:1rem;--input-padding--medium:1rem;--input-padding--large:1rem;--input-height:2rem;--input-height--small:1.5rem;--input-height--medium:2.5rem;--input-height--large:3rem;--input-background-color:var(--color-white);align-items:center;display:inline-flex;font-size:var(--input-font-small);line-height:var(--input-height);text-align:left}.eufemia-scope--10_77_0 .dnb-input__inner{display:inline-flex;flex-direction:column;width:auto}.eufemia-scope--10_77_0 .dnb-input__shell{align-items:center;border:var(--input-border-width) solid var(--color-sea-green);display:flex;position:relative}.eufemia-scope--10_77_0 .dnb-input__row{align-items:center;display:inline-flex}.eufemia-scope--10_77_0 .dnb-input__input{border:none;outline:none;position:relative;word-break:normal;z-index:2}.eufemia-scope--10_77_0 .dnb-input__input[disabled]{opacity:1;-webkit-user-select:none;user-select:none}.eufemia-scope--10_77_0 .dnb-input__input,.eufemia-scope--10_77_0 .dnb-input__shell{border-radius:var(--input-border-radius);height:var(--input-height)}.eufemia-scope--10_77_0 .dnb-input__input,.eufemia-scope--10_77_0 .dnb-input__placeholder{padding-left:var(--input-padding);padding-right:var(--input-padding);width:100%}.eufemia-scope--10_77_0 .dnb-input input.dnb-input__input,.eufemia-scope--10_77_0 .dnb-input__input,.eufemia-scope--10_77_0 .dnb-input__placeholder{background-color:transparent;color:inherit;font-size:var(--input-font-size);line-height:inherit;padding-bottom:0;padding-top:0}.eufemia-scope--10_77_0 .dnb-input__placeholder{left:0;overflow:hidden;pointer-events:none;position:absolute;text-overflow:ellipsis;top:0;white-space:nowrap;z-index:1}.eufemia-scope--10_77_0 .dnb-input__border{--border-color:var(--b-color,var(--input-border-color));--border-width:var(--b-width,var(--input-border-width));border-color:transparent;border-radius:var(--b-radius,var(--input-border-radius));box-shadow:var(--b-inset,var(--input-border-inset,inset)) 0 0 0 var(--border-width) var(--border-color);display:flex}.eufemia-scope--10_77_0 .dnb-input--disabled .dnb-input__border{--border-color:var(--input-border-color--disabled);--border-width:var(--input-border-width--disabled);border-color:transparent;box-shadow:var(--input-border-inset--disabled,inset) 0 0 0 var(--border-width) var(--border-color)}.eufemia-scope--10_77_0 .dnb-input__border:focus-within{--b-color:var(--input-border-color--active);--b-width:var(--input-border-width--active);--b-inset:var(--input-border-inset--active);--b-radius:var(--input-border-radius--active)}.eufemia-scope--10_77_0 .dnb-input__border.hover,.eufemia-scope--10_77_0 .dnb-input__border:hover{--b-color:var(--input-border-color--hover);--b-width:var(--input-border-width--hover);--b-inset:var(--input-border-inset--hover)}.eufemia-scope--10_77_0 .dnb-input__status--error .dnb-input__border{--b-color:var(--input-border-color__error);--b-width:var(--input-border-width__error)}.eufemia-scope--10_77_0 .dnb-input__status--error .dnb-input__border:focus-within{--b-color:var(--input-border-color__error);--b-width:var(--input-border-width__error--active);--b-inset:var(--input-border-inset--active);--b-radius:var(--input-border-radius--active)}.eufemia-scope--10_77_0 .dnb-input__status--error .dnb-input__border.hover,.eufemia-scope--10_77_0 .dnb-input__status--error .dnb-input__border:hover{--b-color:var(--input-border-color__error);--b-width:var(--input-border-width__error--hover);--b-inset:var(--input-border-inset--hover)}html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-input__border:focus-within{--b-color:var(--input-border-color--focus);--b-width:var(--input-border-width--focus);--b-inset:var(--input-border-inset--focus);--b-radius:var(--input-border-radius--focus)}html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-input__status--error .dnb-input__border:focus-within{--b-color:var(--input-border-color__error--focus);--b-width:var(--input-border-width--focus);--b-inset:var(--input-border-inset--focus);--b-radius:var(--input-border-radius--focus)}.eufemia-scope--10_77_0 .dnb-input input.dnb-input__input[type=file]{line-height:calc(var(--input-height) - 2px)}.eufemia-scope--10_77_0 .dnb-input__input::-webkit-search-cancel-button{display:none}.eufemia-scope--10_77_0 .dnb-input__input::-ms-clear{display:none}.eufemia-scope--10_77_0 .dnb-input ::-webkit-file-upload-button{color:var(--color-sea-green);cursor:pointer;outline:none}.eufemia-scope--10_77_0 .dnb-input ::-webkit-file-upload-button:active,.eufemia-scope--10_77_0 .dnb-input ::-webkit-file-upload-button:hover{color:var(--color-emerald-green)}.eufemia-scope--10_77_0 .dnb-input--has-clear-button .dnb-input__input,.eufemia-scope--10_77_0 .dnb-input--has-clear-button .dnb-input__placeholder,.eufemia-scope--10_77_0 .dnb-input--has-submit-element .dnb-input__input,.eufemia-scope--10_77_0 .dnb-input--has-submit-element .dnb-input__placeholder{padding-right:calc(var(--input-padding)*2.5)}.eufemia-scope--10_77_0 .dnb-input--password .dnb-input__input,.eufemia-scope--10_77_0 .dnb-input--password .dnb-input__placeholder{margin-right:2.5rem;padding-right:0}.eufemia-scope--10_77_0 .dnb-input--password .dnb-input__input::-ms-clear,.eufemia-scope--10_77_0 .dnb-input--password .dnb-input__input::-ms-reveal,.eufemia-scope--10_77_0 .dnb-input--password .dnb-input__placeholder::-ms-clear,.eufemia-scope--10_77_0 .dnb-input--password .dnb-input__placeholder::-ms-reveal{display:none}.eufemia-scope--10_77_0 .dnb-input--password .dnb-input__placeholder{padding-right:4rem}.eufemia-scope--10_77_0 .dnb-input--password .dnb-input__input{font-family:var(--font-family-monospace)}.eufemia-scope--10_77_0 .dnb-input__input:-webkit-autofill{box-shadow:0 0 0 var(--input-border-width) var(--input-border-color) var(--autofill-inset,inset),0 0 0 10em var(--input-background-color) inset}.eufemia-scope--10_77_0 .dnb-input__input:autofill{box-shadow:0 0 0 var(--input-border-width) var(--input-border-color) var(--autofill-inset,inset),0 0 0 10em var(--input-background-color) inset}.eufemia-scope--10_77_0 .dnb-input__suffix{color:inherit}.eufemia-scope--10_77_0 .dnb-input__submit-element{line-height:var(--line-height-basis);margin-left:calc(var(--input-height)*-1);z-index:3}.eufemia-scope--10_77_0 .dnb-input__submit-element .dnb-button--input-button{height:var(--input-height);line-height:var(--input-height);width:var(--input-height)}.eufemia-scope--10_77_0 .dnb-input__submit-button{align-self:center;position:relative}.eufemia-scope--10_77_0 .dnb-input__submit-button__button{border-radius:0 var(--input-border-radius) var(--input-border-radius) 0}.eufemia-scope--10_77_0 .dnb-input>.dnb-form-label{line-height:var(--line-height-basis)}@media screen and (max-width:40em){.eufemia-scope--10_77_0 .dnb-input{flex-wrap:wrap}.eufemia-scope--10_77_0 .dnb-input>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.eufemia-scope--10_77_0 .dnb-input:not(.dnb-input--vertical)[class*=__status]{align-items:flex-start}.eufemia-scope--10_77_0 .dnb-input:not(.dnb-input--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}.eufemia-scope--10_77_0 .dnb-input--small{line-height:var(--input-height--small)}.eufemia-scope--10_77_0 .dnb-input--small .dnb-input__input,.eufemia-scope--10_77_0 .dnb-input--small .dnb-input__shell{height:var(--input-height--small)}.eufemia-scope--10_77_0 .dnb-input--small .dnb-input__input,.eufemia-scope--10_77_0 .dnb-input--small .dnb-input__placeholder{font-size:var(--input-font-size--small);padding-left:var(--input-padding--small);padding-right:var(--input-padding--small)}.eufemia-scope--10_77_0 .dnb-input--small .dnb-input__submit-element{margin-left:calc(var(--input-height--small)*-1)}.eufemia-scope--10_77_0 .dnb-input--small .dnb-input__submit-element .dnb-button--input-button{height:var(--input-height--small);line-height:var(--input-height--small);width:var(--input-height--small)}.eufemia-scope--10_77_0 .dnb-input--small.dnb-input--has-clear-button .dnb-input__input,.eufemia-scope--10_77_0 .dnb-input--small.dnb-input--has-clear-button .dnb-input__placeholder,.eufemia-scope--10_77_0 .dnb-input--small.dnb-input--has-submit-element .dnb-input__input,.eufemia-scope--10_77_0 .dnb-input--small.dnb-input--has-submit-element .dnb-input__placeholder{padding-right:calc(var(--input-padding--small)*2)}.eufemia-scope--10_77_0 .dnb-input--medium{line-height:var(--input-height--medium)}.eufemia-scope--10_77_0 .dnb-input--medium .dnb-input__input,.eufemia-scope--10_77_0 .dnb-input--medium .dnb-input__shell{height:var(--input-height--medium)}.eufemia-scope--10_77_0 .dnb-input--medium .dnb-input__input,.eufemia-scope--10_77_0 .dnb-input--medium .dnb-input__placeholder{font-size:var(--input-font-size--medium);padding-left:var(--input-padding--medium);padding-right:var(--input-padding--medium)}.eufemia-scope--10_77_0 .dnb-input--medium .dnb-input__submit-element{margin-left:calc(var(--input-height--medium)*-1)}.eufemia-scope--10_77_0 .dnb-input--medium .dnb-input__submit-element .dnb-button--input-button{height:var(--input-height--medium);line-height:var(--input-height--medium);width:var(--input-height--medium)}.eufemia-scope--10_77_0 .dnb-input--medium.dnb-input--has-clear-button .dnb-input__input,.eufemia-scope--10_77_0 .dnb-input--medium.dnb-input--has-clear-button .dnb-input__placeholder,.eufemia-scope--10_77_0 .dnb-input--medium.dnb-input--has-submit-element .dnb-input__input,.eufemia-scope--10_77_0 .dnb-input--medium.dnb-input--has-submit-element .dnb-input__placeholder{padding-right:calc(var(--input-padding--medium)*3)}.eufemia-scope--10_77_0 .dnb-input--large{line-height:var(--input-height--large)}.eufemia-scope--10_77_0 .dnb-input--large .dnb-input__input,.eufemia-scope--10_77_0 .dnb-input--large .dnb-input__shell{height:var(--input-height--large)}.eufemia-scope--10_77_0 .dnb-input--large .dnb-input__input,.eufemia-scope--10_77_0 .dnb-input--large .dnb-input__placeholder{font-size:var(--input-font-size--large);padding-left:var(--input-padding--large);padding-right:var(--input-padding--large)}.eufemia-scope--10_77_0 .dnb-input--large .dnb-input__submit-element{margin-left:calc(var(--input-height--large)*-1)}.eufemia-scope--10_77_0 .dnb-input--large .dnb-input__submit-element .dnb-button--input-button{height:var(--input-height--large);line-height:var(--input-height--large);width:var(--input-height--large)}.eufemia-scope--10_77_0 .dnb-input--large.dnb-input--has-clear-button .dnb-input__input,.eufemia-scope--10_77_0 .dnb-input--large.dnb-input--has-clear-button .dnb-input__placeholder,.eufemia-scope--10_77_0 .dnb-input--large.dnb-input--has-submit-element .dnb-input__input,.eufemia-scope--10_77_0 .dnb-input--large.dnb-input--has-submit-element .dnb-input__placeholder{padding-right:calc(var(--input-padding--large)*3.5)}.eufemia-scope--10_77_0 .dnb-input--large.dnb-input--has-clear-button:not(.dnb-input--has-submit-element) .dnb-input__submit-element{margin-left:calc(var(--input-height--large) - .5rem)}.eufemia-scope--10_77_0 .dnb-input__align--center .dnb-input__input,.eufemia-scope--10_77_0 .dnb-input__align--center .dnb-input__placeholder{text-align:center}.eufemia-scope--10_77_0 .dnb-input__align--right .dnb-input__input,.eufemia-scope--10_77_0 .dnb-input__align--right .dnb-input__placeholder{text-align:right}.eufemia-scope--10_77_0 .dnb-input--clear.dnb-input__submit-element{opacity:0;transition:opacity .2s ease-in-out}.eufemia-scope--10_77_0 .dnb-input--clear.dnb-input__submit-element .dnb-button{border-radius:var(--button-border-radius);height:var(--input-height--small);width:var(--input-height--small)}.eufemia-scope--10_77_0 .dnb-input--clear.dnb-input__submit-element .dnb-button .dnb-button__icon{margin:auto}html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-input--clear.dnb-input__submit-element .dnb-button:not(.dnb-button--has-text):hover[disabled]{cursor:default}.eufemia-scope--10_77_0 .dnb-input--small .dnb-input--clear.dnb-input__submit-element .dnb-button{height:1rem;width:1rem}.eufemia-scope--10_77_0 .dnb-input--large .dnb-input--clear.dnb-input__submit-element .dnb-button,.eufemia-scope--10_77_0 .dnb-input--medium .dnb-input--clear.dnb-input__submit-element .dnb-button{height:var(--input-height--small);width:var(--input-height--small)}.eufemia-scope--10_77_0 .dnb-input[data-has-content=true] .dnb-input--clear{opacity:1}.eufemia-scope--10_77_0 .dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element{margin-right:2.5rem}.eufemia-scope--10_77_0 .dnb-input--small.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element{margin-right:2rem}.eufemia-scope--10_77_0 .dnb-input--medium.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element{margin-right:3rem}.eufemia-scope--10_77_0 .dnb-input--large.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element{margin-right:3.5rem}.eufemia-scope--10_77_0 .dnb-input__inner>.dnb-form-status{margin-top:.5rem;order:2}.eufemia-scope--10_77_0 .dnb-input--vertical{align-items:flex-start;display:flex;flex-direction:column}.eufemia-scope--10_77_0 .dnb-input--stretch{display:flex;flex-grow:1}.eufemia-scope--10_77_0 .dnb-input--stretch .dnb-input__inner{flex-grow:1}.eufemia-scope--10_77_0 .dnb-input--stretch .dnb-input__inner,.eufemia-scope--10_77_0 .dnb-input--stretch .dnb-input__shell{width:100%}.eufemia-scope--10_77_0 .dnb-input--stretch .dnb-form-label+.dnb-input__inner{width:auto}.eufemia-scope--10_77_0 .dnb-form-row--horizontal .dnb-input--stretch,.eufemia-scope--10_77_0 .dnb-input--vertical.dnb-input--stretch .dnb-input__inner{width:100%}.eufemia-scope--10_77_0 .dnb-input__icon{bottom:0;left:1rem;margin:auto;order:0;position:absolute;right:auto;top:0;z-index:2}.eufemia-scope--10_77_0 .dnb-input--icon-position-right .dnb-input__icon{left:auto;order:1;right:1rem}.eufemia-scope--10_77_0 .dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input,.eufemia-scope--10_77_0 .dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder{padding-left:2.5rem}.eufemia-scope--10_77_0 .dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input,.eufemia-scope--10_77_0 .dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder{padding-right:2.5rem}.eufemia-scope--10_77_0 .dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input,.eufemia-scope--10_77_0 .dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder{padding-left:3rem}.eufemia-scope--10_77_0 .dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input,.eufemia-scope--10_77_0 .dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder{padding-right:3rem}html[data-visual-test] .eufemia-scope--10_77_0 .dnb-input__input{caret-color:var(--color-white)}.eufemia-scope--10_77_0 .dnb-input[data-has-content=false] .dnb-input__input:focus:-webkit-autofill{--autofill-inset:none}.eufemia-scope--10_77_0 .dnb-input[data-has-content=false] .dnb-input__input:focus:autofill{--autofill-inset:none}.eufemia-scope--10_77_0 .dnb-input[data-input-state=focus] .dnb-input__placeholder{display:none}.eufemia-scope--10_77_0 .dnb-input--keep-placeholder[data-input-state=focus] .dnb-input__placeholder{color:var(--color-black-20);display:block}@media screen and (max-width:40em){.eufemia-scope--10_77_0 .dnb-responsive-component .dnb-input{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.eufemia-scope--10_77_0 .dnb-responsive-component .dnb-input__row{align-items:flex-start}.eufemia-scope--10_77_0 .dnb-responsive-component .dnb-input>.dnb-form-label{margin-bottom:.5rem}}