@dnb/eufemia 10.13.0 → 10.14.0

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

@@ -125,6 +125,19 @@
        column-gap: var(--spacing-small);
 }
 
+:root {
+  --forms-field-width--small: 5rem;
+  --forms-field-width--medium: 11rem;
+  --forms-field-width--large: 21rem;
+}
+
+.dnb-forms-field-expiry {
+  width: var(--forms-field-width--small);
+}
+.dnb-forms-field-expiry .dnb-input__shell {
+  justify-content: center;
+}
+
 /*
  * Utilities
  */

package/cjs/style/themes/theme-eiendom/eiendom-theme-extensions.min.css

@@ -1 +1 @@
-.dnb-forms-button-row{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-spacing .dnb-form-main-heading.dnb-h--large:not([class*=space__]){margin:0}.dnb-form-main-heading[\:has\(\%2B\%20\.dnb-flex-stack\%20\%3E\%20\.dnb-card\,\%20\%2B\%20\.dnb-card\)]:not([class*=space__left]){margin-left:var(--spacing-medium)}.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__left]){margin-left:var(--spacing-medium)}.dnb-form-main-heading[\:has\(\%2B\%20\.dnb-flex-stack\%20\%3E\%20\.dnb-card\,\%20\%2B\%20\.dnb-card\)]:not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-spacing .dnb-form-sub-heading.dnb-h--medium:not([class*=space__]){margin:0}.dnb-form-sub-heading[\:has\(\%2B\%20\.dnb-flex-stack\%20\%3E\%20\.dnb-card\,\%20\%2B\%20\.dnb-card\)]:not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-form-sub-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-forms-field-phone-number__country-code,.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:9rem}.dnb-forms-field-phone-number__number{flex:1}.dnb-forms-field-postal-code-and-city__fields{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-postal-code-and-city--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-postal-code-and-city--width-large{width:var(--forms-field-width--large)}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}.dnb-forms-field-selection--width-large .dnb-dropdown__shell{width:var(--forms-field-width--large)}.dnb-forms-field-selection--width-medium .dnb-dropdown__shell{width:var(--forms-field-width--medium)}.dnb-forms-field-selection--width-small .dnb-dropdown__shell{width:var(--forms-field-width--small)}.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options{grid-row-gap:var(--spacing-x-small);display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap}.dnb-forms-steps-layout{grid-column-gap:var(--spacing-medium);-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}@media (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}}.dnb-forms-steps-layout__sidebar{flex:0;min-width:21rem}.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar{max-width:21rem}.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar .dnb-step-indicator__item{min-width:336px}.dnb-forms-steps-layout__contents{flex:1;min-width:25rem}.dnb-forms-steps-layout__contents .dnb-card{--border-color:var(--color-pistachio)}.dnb-forms-test-element{border:1px dashed grey;border-radius:.5rem;color:#909090;padding:.5rem 1rem}:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}fieldset.dnb-forms-field-block{border:none;padding:0}fieldset.dnb-forms-field-block:not([class*=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}.dnb-forms-field-block__grid{display:grid}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:var(--forms-field-width--medium) auto}@media screen and (min-width:30em){.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__label-description,.dnb-forms-field-block__label-secondary{color:var(--color-black-55);font-size:var(--font-size-small)}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__contents{grid-area:contents}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:30em){.dnb-forms-field-block__contents--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block__contents--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block__contents--width-large{width:var(--forms-field-width--large)}}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline{display:inline-block;font-size:inherit;margin-left:var(--spacing-xx-small);margin-right:var(--spacing-xx-small)}.dnb-forms-value-block__label{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:rgba(0,0,0,.5)}.dnb-payment-card{--color-dark-cyan:#003b47;--dnb-payment-bg-default:linear-gradient(187.2deg,#008484 6.31%,var(--color-sea-green) 82.66%);--dnb-payment-bg-pluss:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);--dnb-payment-bg-white:linear-gradient(184.55deg,var(--color-black-background) 4.63%,var(--color-white) 92.04%);--dnb-payment-bg-gold:linear-gradient(184.55deg,#bfa970 4.63%,#d3bd83 84.57%);--dnb-payment-bg-saga:linear-gradient(187.2deg,#1c1c1c 6.31%,#000 82.66%);--dnb-payment-bg-private:linear-gradient(187.2deg,#1c1c1c 6.31%,#000 82.66%);--dnb-payment-bg-business-no-visa:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);--dnb-payment-bg-business-with-visa:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);margin:0}.dnb-payment-card__card{border-color:currentcolor;border-color:hsla(0,0%,100%,.1) transparent rgba(0,0,0,.2);border-radius:12px;border-style:solid;border-width:1px;box-shadow:var(--shadow-default);color:var(--color-white);height:216px;padding:16px;position:relative;transition:all 225ms cubic-bezier(0,0,.2,1) 0ms;width:343px}.dnb-payment-card__card--design-default{background:var(--dnb-payment-bg-default);color:var(--color-white)}.dnb-payment-card__card--design-pluss{background:var(--dnb-payment-bg-pluss);color:var(--color-white)}.dnb-payment-card__card--design-my-first,.dnb-payment-card__card--design-ung,.dnb-payment-card__card--design-youth{color:var(--color-black-80)}.dnb-payment-card__card--design-gold{background:var(--dnb-payment-bg-gold);color:var(--color-white)}.dnb-payment-card__card--design-saga{background:var(--dnb-payment-bg-saga);color:var(--color-white)}.dnb-payment-card__card--design-private{background:var(--dnb-payment-bg-private);color:var(--color-white)}.dnb-payment-card__card--design-black{background:var(--color-black);color:var(--color-white)}.dnb-payment-card__card--design-business-no-visa{background:var(--dnb-payment-bg-business-no-visa);color:var(--color-white)}.dnb-payment-card__card--design-business-with-visa{background:var(--dnb-payment-bg-business-with-visa);color:var(--color-white)}.dnb-payment-card__card:after{background:radial-gradient(52.39% 52.39% at 50%,at 50%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 100%);background:radial-gradient(52.39% 52.39% at 50% 50%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 100%);border-radius:inherit;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.dnb-payment-card__card__content{display:flex;height:100%;position:relative;width:100%}.dnb-payment-card__card__wrapper{bottom:0;left:0;position:absolute}.dnb-spacing .dnb-payment-card__card .dnb-p{margin-bottom:0!important}.dnb-payment-card__card__holder{font-weight:var(--font-weight-medium);text-align:left;text-transform:uppercase}.dnb-payment-card__card__holder.dnb-p{font-size:.625rem}.dnb-payment-card__card__numbers{font-size:1.5rem!important;font-weight:var(--font-weight-medium)}.dnb-payment-card__card__credit-type{bottom:0;position:absolute;right:0}.dnb-payment-card__card__bank-logo{left:0;position:absolute;top:0}.dnb-payment-card__card__product-type{height:38px;left:70px;position:absolute;top:0}.dnb-payment-card__card__bank-axept{height:45px;position:absolute;right:0;top:0}.dnb-payment-card__blocking__overlay{align-items:center;background:linear-gradient(184.55deg,hsla(0,0%,80%,.5) 4.63%,hsla(0,0%,91%,.5) 84.83%);border-radius:inherit;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.dnb-payment-card__blocking__overlay svg path{stroke:currentcolor}.dnb-payment-card__blocking__center{align-items:center;background:var(--color-black-80);border-radius:4px;color:var(--color-sand-yellow);display:flex;flex-direction:column;justify-content:center;padding:1rem}.dnb-payment-card__blocking svg{shape-rendering:geometricprecision}.dnb-payment-card.dnb-skeleton .dnb-payment-card__card__holder{opacity:1}.dnb-payment-card--compact .dnb-payment-card__card{border-radius:12px 12px 0 0;box-shadow:var(--shadow-default);height:32.8mm;padding:0}.dnb-payment-card--compact .dnb-payment-card__card__top{left:6mm;position:absolute;right:6mm;top:4mm}.dnb-payment-card--compact .dnb-payment-card__card__bottom{background-color:var(--color-white);bottom:0;height:14mm;left:0;position:absolute;right:0}.dnb-payment-card--compact .dnb-payment-card__card__wrapper{color:var(--color-black-80);padding:6px 22px}.dnb-payment-card--compact .dnb-payment-card__card__numbers{font-size:var(--font-size-basis)}.dnb-payment-card--compact .dnb-payment-card__card__credit-type{bottom:auto;right:4px;top:10px}.dnb-payment-card--compact .dnb-payment-card__blocking__center{grid-gap:var(--spacing-x-small);align-items:center;background:rgba(0,0,0,.739);border-radius:inherit;display:flex;flex-direction:row;gap:var(--spacing-x-small);height:100%;justify-content:center;width:100%}
+.dnb-forms-button-row{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-spacing .dnb-form-main-heading.dnb-h--large:not([class*=space__]){margin:0}.dnb-form-main-heading[\:has\(\%2B\%20\.dnb-flex-stack\%20\%3E\%20\.dnb-card\,\%20\%2B\%20\.dnb-card\)]:not([class*=space__left]){margin-left:var(--spacing-medium)}.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__left]){margin-left:var(--spacing-medium)}.dnb-form-main-heading[\:has\(\%2B\%20\.dnb-flex-stack\%20\%3E\%20\.dnb-card\,\%20\%2B\%20\.dnb-card\)]:not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-spacing .dnb-form-sub-heading.dnb-h--medium:not([class*=space__]){margin:0}.dnb-form-sub-heading[\:has\(\%2B\%20\.dnb-flex-stack\%20\%3E\%20\.dnb-card\,\%20\%2B\%20\.dnb-card\)]:not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-form-sub-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-forms-field-phone-number__country-code,.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:9rem}.dnb-forms-field-phone-number__number{flex:1}.dnb-forms-field-postal-code-and-city__fields{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-postal-code-and-city--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-postal-code-and-city--width-large{width:var(--forms-field-width--large)}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}.dnb-forms-field-selection--width-large .dnb-dropdown__shell{width:var(--forms-field-width--large)}.dnb-forms-field-selection--width-medium .dnb-dropdown__shell{width:var(--forms-field-width--medium)}.dnb-forms-field-selection--width-small .dnb-dropdown__shell{width:var(--forms-field-width--small)}.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options{grid-row-gap:var(--spacing-x-small);display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap}.dnb-forms-field-expiry{width:var(--forms-field-width--small)}.dnb-forms-field-expiry .dnb-input__shell{justify-content:center}.dnb-forms-steps-layout{grid-column-gap:var(--spacing-medium);-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}@media (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}}.dnb-forms-steps-layout__sidebar{flex:0;min-width:21rem}.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar{max-width:21rem}.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar .dnb-step-indicator__item{min-width:336px}.dnb-forms-steps-layout__contents{flex:1;min-width:25rem}.dnb-forms-steps-layout__contents .dnb-card{--border-color:var(--color-pistachio)}.dnb-forms-test-element{border:1px dashed grey;border-radius:.5rem;color:#909090;padding:.5rem 1rem}:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}fieldset.dnb-forms-field-block{border:none;padding:0}fieldset.dnb-forms-field-block:not([class*=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}.dnb-forms-field-block__grid{display:grid}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:var(--forms-field-width--medium) auto}@media screen and (min-width:30em){.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__label-description,.dnb-forms-field-block__label-secondary{color:var(--color-black-55);font-size:var(--font-size-small)}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__contents{grid-area:contents}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:30em){.dnb-forms-field-block__contents--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block__contents--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block__contents--width-large{width:var(--forms-field-width--large)}}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline{display:inline-block;font-size:inherit;margin-left:var(--spacing-xx-small);margin-right:var(--spacing-xx-small)}.dnb-forms-value-block__label{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:rgba(0,0,0,.5)}.dnb-payment-card{--color-dark-cyan:#003b47;--dnb-payment-bg-default:linear-gradient(187.2deg,#008484 6.31%,var(--color-sea-green) 82.66%);--dnb-payment-bg-pluss:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);--dnb-payment-bg-white:linear-gradient(184.55deg,var(--color-black-background) 4.63%,var(--color-white) 92.04%);--dnb-payment-bg-gold:linear-gradient(184.55deg,#bfa970 4.63%,#d3bd83 84.57%);--dnb-payment-bg-saga:linear-gradient(187.2deg,#1c1c1c 6.31%,#000 82.66%);--dnb-payment-bg-private:linear-gradient(187.2deg,#1c1c1c 6.31%,#000 82.66%);--dnb-payment-bg-business-no-visa:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);--dnb-payment-bg-business-with-visa:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);margin:0}.dnb-payment-card__card{border-color:currentcolor;border-color:hsla(0,0%,100%,.1) transparent rgba(0,0,0,.2);border-radius:12px;border-style:solid;border-width:1px;box-shadow:var(--shadow-default);color:var(--color-white);height:216px;padding:16px;position:relative;transition:all 225ms cubic-bezier(0,0,.2,1) 0ms;width:343px}.dnb-payment-card__card--design-default{background:var(--dnb-payment-bg-default);color:var(--color-white)}.dnb-payment-card__card--design-pluss{background:var(--dnb-payment-bg-pluss);color:var(--color-white)}.dnb-payment-card__card--design-my-first,.dnb-payment-card__card--design-ung,.dnb-payment-card__card--design-youth{color:var(--color-black-80)}.dnb-payment-card__card--design-gold{background:var(--dnb-payment-bg-gold);color:var(--color-white)}.dnb-payment-card__card--design-saga{background:var(--dnb-payment-bg-saga);color:var(--color-white)}.dnb-payment-card__card--design-private{background:var(--dnb-payment-bg-private);color:var(--color-white)}.dnb-payment-card__card--design-black{background:var(--color-black);color:var(--color-white)}.dnb-payment-card__card--design-business-no-visa{background:var(--dnb-payment-bg-business-no-visa);color:var(--color-white)}.dnb-payment-card__card--design-business-with-visa{background:var(--dnb-payment-bg-business-with-visa);color:var(--color-white)}.dnb-payment-card__card:after{background:radial-gradient(52.39% 52.39% at 50%,at 50%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 100%);background:radial-gradient(52.39% 52.39% at 50% 50%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 100%);border-radius:inherit;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.dnb-payment-card__card__content{display:flex;height:100%;position:relative;width:100%}.dnb-payment-card__card__wrapper{bottom:0;left:0;position:absolute}.dnb-spacing .dnb-payment-card__card .dnb-p{margin-bottom:0!important}.dnb-payment-card__card__holder{font-weight:var(--font-weight-medium);text-align:left;text-transform:uppercase}.dnb-payment-card__card__holder.dnb-p{font-size:.625rem}.dnb-payment-card__card__numbers{font-size:1.5rem!important;font-weight:var(--font-weight-medium)}.dnb-payment-card__card__credit-type{bottom:0;position:absolute;right:0}.dnb-payment-card__card__bank-logo{left:0;position:absolute;top:0}.dnb-payment-card__card__product-type{height:38px;left:70px;position:absolute;top:0}.dnb-payment-card__card__bank-axept{height:45px;position:absolute;right:0;top:0}.dnb-payment-card__blocking__overlay{align-items:center;background:linear-gradient(184.55deg,hsla(0,0%,80%,.5) 4.63%,hsla(0,0%,91%,.5) 84.83%);border-radius:inherit;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.dnb-payment-card__blocking__overlay svg path{stroke:currentcolor}.dnb-payment-card__blocking__center{align-items:center;background:var(--color-black-80);border-radius:4px;color:var(--color-sand-yellow);display:flex;flex-direction:column;justify-content:center;padding:1rem}.dnb-payment-card__blocking svg{shape-rendering:geometricprecision}.dnb-payment-card.dnb-skeleton .dnb-payment-card__card__holder{opacity:1}.dnb-payment-card--compact .dnb-payment-card__card{border-radius:12px 12px 0 0;box-shadow:var(--shadow-default);height:32.8mm;padding:0}.dnb-payment-card--compact .dnb-payment-card__card__top{left:6mm;position:absolute;right:6mm;top:4mm}.dnb-payment-card--compact .dnb-payment-card__card__bottom{background-color:var(--color-white);bottom:0;height:14mm;left:0;position:absolute;right:0}.dnb-payment-card--compact .dnb-payment-card__card__wrapper{color:var(--color-black-80);padding:6px 22px}.dnb-payment-card--compact .dnb-payment-card__card__numbers{font-size:var(--font-size-basis)}.dnb-payment-card--compact .dnb-payment-card__card__credit-type{bottom:auto;right:4px;top:10px}.dnb-payment-card--compact .dnb-payment-card__blocking__center{grid-gap:var(--spacing-x-small);align-items:center;background:rgba(0,0,0,.739);border-radius:inherit;display:flex;flex-direction:row;gap:var(--spacing-x-small);height:100%;justify-content:center;width:100%}

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

@@ -5048,10 +5048,39 @@ html[data-visual-test] .dnb-progress-indicator__bar-transition {
   --radio-width--large: 2rem;
   --radio-height--large: 2rem;
   --radio-border-width: 0.125rem;
+  --radio-color-dot-on: black;
+  --radio-color-background-on: white;
+  --radio-color-border-on: black;
+  --radio-color-background-off: white;
+  --radio-color-border-off: black;
+  --radio-color-dot-on--disabled: lightgrey;
+  --radio-color-border-on--disabled: lightgrey;
+  --radio-color-border-off--disabled: lightgrey;
+  --radio-color-dot-on--active: lightgrey;
+  --radio-color-border-on--active: lightgrey;
+  --radio-color-background-off--active: lightgrey;
+  --radio-color-border-off--active: transparent;
+  --radio-color-dot-on--hover: lightgrey;
+  --radio-color-background-off--hover: lightgrey;
+  --radio-color-background-on--focus: var(--color-white);
+  --radio-color-background-off--focus: lightgrey;
+  --radio-color-dot-on--error: red;
+  --radio-color-border-on--error: red;
+  --radio-color-background-off--error: lavenderblush;
+  --radio-color-dot-on--error-hover: lavenderblush;
   display: inline-flex;
   flex-direction: column;
   font-size: var(--font-size-small);
   line-height: var(--line-height-basis);
+  /*
+   * Color scheme
+   */
+  /** Normal state **/
+  /** Disabled state **/
+  /** Active state **/
+  /** Hover state **/
+  /** Focus state **/
+  /** Error state **/
 }
 .dnb-radio__inner {
   display: inline-flex;
@@ -5099,6 +5128,8 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   width: calc(var(--radio-width--medium) - 0.75rem);
   height: calc(var(--radio-height--medium) - 0.75rem);
   border-radius: 50%;
+  background-color: var(--radio-color-dot-on);
+  transition: opacity 200ms ease-out, transform 200ms ease-out;
 }
 .dnb-radio--large .dnb-radio__dot {
   width: calc(var(--radio-width--large) - 0.875rem);
@@ -5184,6 +5215,9 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   margin-top: 0.5rem;
   margin-bottom: 1rem;
 }
+.dnb-radio > .dnb-form-status {
+  transform: translateY(0.25rem); /* 4/16 */
+}
 .dnb-radio-group {
   --radio-group-margin-bottom: 0.5rem;
   --radio-group-margin-right: 1rem;
@@ -5225,6 +5259,78 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 .dnb-skeleton .dnb-radio__input[disabled] ~ .dnb-radio__button {
   border-color: var(--skeleton-color);
 }
+.dnb-radio__input:checked ~ .dnb-radio__button, .dnb-radio__input[data-checked=true] ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-on);
+  border-color: var(--radio-color-border-on);
+}
+.dnb-radio__input:checked ~ .dnb-radio__dot, .dnb-radio__input[data-checked=true] ~ .dnb-radio__dot {
+  opacity: 1;
+  transform: scale(1);
+}
+.dnb-radio__input:not(:checked):not([data-checked=true]) ~ .dnb-radio__dot {
+  opacity: 0;
+  transform: scale(0.8);
+}
+.dnb-radio__input:not(:checked):not([data-checked=true]) ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-off);
+  border-color: var(--radio-color-border-off);
+}
+.dnb-radio__input[disabled]:checked ~ .dnb-radio__button, .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__button {
+  border-color: var(--radio-color-border-on--disabled);
+}
+.dnb-radio__input[disabled]:checked ~ .dnb-radio__dot, .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__dot {
+  background-color: var(--radio-color-dot-on--disabled);
+}
+.dnb-radio__input[disabled]:not(:checked):not([data-checked=true]) ~ .dnb-radio__button {
+  border-color: var(--radio-color-border-off--disabled);
+}
+.dnb-radio__input:not([disabled]):checked:active ~ .dnb-radio__button, .dnb-radio__input:not([disabled])[data-checked=true]:active ~ .dnb-radio__button {
+  border-color: var(--radio-color-border-on--active);
+}
+.dnb-radio__input:not([disabled]):checked:active ~ .dnb-radio__dot, .dnb-radio__input:not([disabled])[data-checked=true]:active ~ .dnb-radio__dot {
+  background-color: var(--radio-color-dot-on--active);
+}
+.dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):active ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-off--active);
+  border-color: var(--radio-color-border-off--active);
+}
+.dnb-radio__input:not([disabled]):not(:focus):checked:hover ~ .dnb-radio__dot, .dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-radio__dot {
+  background-color: var(--radio-color-dot-on--hover);
+}
+.dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-off--hover);
+}
+html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus ~ .dnb-radio__button {
+  border: none;
+}
+.dnb-radio__input:not([disabled]):focus ~ .dnb-radio__focus, .dnb-radio__input:not([disabled]):active ~ .dnb-radio__focus {
+  display: block;
+}
+.dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus ~ .dnb-radio__button, .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-on--focus);
+}
+html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-off--focus);
+}
+.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__button {
+  border: none;
+}
+.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__focus {
+  display: block;
+  --border-color: var(--radio-color-border-on--error);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover):checked ~ .dnb-radio__dot, .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover)[data-checked=true] ~ .dnb-radio__dot {
+  background-color: var(--radio-color-dot-on--error);
+}
+.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover ~ .dnb-radio__dot, .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover ~ .dnb-radio__dot {
+  background-color: var(--radio-color-dot-on--error-hover);
+}
+.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-off--error);
+}
 
 /*
  * Section component
@@ -9838,6 +9944,33 @@ html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-i
   );
 }
 
+/*
+* Radio theme for Sbanken
+*
+*/
+.dnb-radio {
+  --radio-color-dot-on: var(--sb-color-violet-light);
+  --radio-color-background-on: var(--sb-color-white);
+  --radio-color-border-on: var(--sb-color-gray-dark-2-neutral);
+  --radio-color-background-off: var(--sb-color-white);
+  --radio-color-border-off: var(--sb-color-gray-dark-2-neutral);
+  --radio-color-dot-on--disabled: var(--sb-color-gray-dark-2-neutral);
+  --radio-color-border-on--disabled: var(--sb-color-gray-dark-2-neutral);
+  --radio-color-border-off--disabled: var(--sb-color-gray-dark-2-neutral);
+  --radio-color-dot-on--active: var(--sb-color-violet-light);
+  --radio-color-border-on--active: var(--sb-color-gray-dark-2-neutral);
+  --radio-color-background-off--active: var(--sb-color-white);
+  --radio-color-border-off--active: var(--sb-color-gray);
+  --radio-color-dot-on--hover: var(--sb-color-violet);
+  --radio-color-background-off--hover: var(--sb-color-white);
+  --radio-color-background-on--focus: var(--sb-color-blue-light-3);
+  --radio-color-background-off--focus: var(--sb-color-blue-light-3);
+  --radio-color-dot-on--error: var(--sb-color-magenta);
+  --radio-color-border-on--error: var(--sb-color-magenta);
+  --radio-color-background-off--error: var(--sb-color-white);
+  --radio-color-dot-on--error-hover: var(--sb-color-red);
+}
+
 .dnb-section {
   --background-color: var(--sb-color-white);
   --outline-color--value: var(--sb-color-gray-light-2);
@@ -10636,99 +10769,6 @@ html:not([data-whatintent=touch]) .dnb-date-picker__day--inactive .dnb-button[di
   background-color: var(--modal-overlay-bg);
 }
 
-/*
-* Radio theme
-*
-*/
-/*
- * Utilities
- */
-.dnb-radio {
-  /* stylelint-disable */
-  /* stylelint-enable */
-  /* stylelint-disable */
-  /* stylelint-enable */
-}
-.dnb-radio__dot {
-  background-color: var(--color-sea-green);
-  transition: opacity 200ms ease-out, transform 200ms ease-out;
-}
-.dnb-radio__input:checked ~ .dnb-radio__button, .dnb-radio__input[data-checked=true] ~ .dnb-radio__button {
-  background-color: var(--color-white);
-  border-color: var(--color-sea-green);
-}
-.dnb-radio__input:checked ~ .dnb-radio__dot, .dnb-radio__input[data-checked=true] ~ .dnb-radio__dot {
-  opacity: 1;
-  transform: scale(1);
-}
-.dnb-radio__input:not(:checked):not([data-checked=true]) ~ .dnb-radio__dot {
-  opacity: 0;
-  transform: scale(0.8);
-}
-.dnb-radio__input:not(:checked):not([data-checked=true]) ~ .dnb-radio__button {
-  background-color: var(--color-white);
-  border-color: var(--color-sea-green);
-}
-.dnb-radio__input[disabled]:checked ~ .dnb-radio__button, .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__button {
-  border-color: var(--color-sea-green-30);
-}
-.dnb-radio__input[disabled]:not(:checked):not([data-checked=true]) ~ .dnb-radio__button {
-  border-color: var(--color-mint-green-50);
-}
-.dnb-radio__input[disabled]:checked ~ .dnb-radio__dot, .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__dot {
-  background-color: var(--color-sea-green-30);
-}
-.dnb-radio__input:not([disabled]):checked:active ~ .dnb-radio__button, .dnb-radio__input:not([disabled])[data-checked=true]:active ~ .dnb-radio__button {
-  border-color: var(--color-mint-green-50);
-}
-.dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):active ~ .dnb-radio__button {
-  background-color: var(--color-mint-green-50);
-  border-color: transparent;
-}
-.dnb-radio__input:not([disabled]):checked:active ~ .dnb-radio__dot, .dnb-radio__input:not([disabled])[data-checked=true]:active ~ .dnb-radio__dot {
-  background-color: var(--color-mint-green-50);
-}
-.dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
-  background-color: var(--color-mint-green-50);
-}
-.dnb-radio__input:not([disabled]):not(:focus):checked:hover ~ .dnb-radio__dot, .dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-radio__dot {
-  background-color: var(--color-mint-green-50);
-}
-html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus ~ .dnb-radio__button {
-  background-color: var(--color-mint-green-50);
-}
-html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus ~ .dnb-radio__button {
-  border: none;
-}
-.dnb-radio__input:not([disabled]):focus ~ .dnb-radio__focus, .dnb-radio__input:not([disabled]):active ~ .dnb-radio__focus {
-  display: block;
-}
-.dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus ~ .dnb-radio__button, .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):active ~ .dnb-radio__button {
-  background-color: var(--color-mint-green-50);
-}
-.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__button {
-  border: none;
-}
-.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__focus {
-  display: block;
-  --border-color: var(--color-fire-red);
-  --border-width: var(--focus-ring-width);
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
-  background-color: var(--color-fire-red-8);
-}
-.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover):checked ~ .dnb-radio__dot, .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover)[data-checked=true] ~ .dnb-radio__dot {
-  background-color: var(--color-fire-red);
-}
-.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover ~ .dnb-radio__dot, .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover ~ .dnb-radio__dot {
-  background-color: var(--color-fire-red-8);
-}
-.dnb-radio > .dnb-form-status {
-  transform: translateY(0.25rem); /* 4/16 */
-}
-
 /*
  * Np theme is provided
  *