@dnb/eufemia 10.76.1 → 10.77.0

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

@@ -0,0 +1,346 @@
+/*
+* Radio component
+*
+*/
+/*
+ * Utilities
+ */
+.eufemia-scope--10_77_0 {
+  --radio-width--medium: 1.5rem;
+  --radio-height--medium: 1.5rem;
+}
+
+.eufemia-scope--10_77_0 .dnb-radio {
+  --radio-dot--medium: 0.75rem;
+  --radio-dot--large: 1.125rem;
+  --radio-width--large: 2rem;
+  --radio-height--large: 2rem;
+  --radio-border-width: 0.09375rem;
+  --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-border-width--disabled: 0.125rem;
+  --radio-color-dot-on--disabled: lightgrey;
+  --radio-color-background--disabled: white;
+  --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-border-width--hover: 0.125rem;
+  --radio-border-width-on--hover: 0.125rem;
+  --radio-color-dot-on--hover: lightgrey;
+  --radio-color-background-on--hover: lightgrey;
+  --radio-color-background-off--hover: lightgrey;
+  --radio-border-width--focus: 0.125rem;
+  --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-border--error-hover: red;
+  --radio-color-background-off--error-hover: lavenderblush;
+  --radio-color-background-on--error-hover: lavenderblush;
+  --radio-color-dot-on--error-hover: lavenderblush;
+  --radio-focus-ring-width--error: var(--focus-ring-width);
+  --radio-bounding--medium: 1.75, 1.5;
+  --radio-bounding--large: 1.25, 1.12;
+  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 **/
+}
+.eufemia-scope--10_77_0 .dnb-radio__inner {
+  display: inline-flex;
+  flex-direction: column;
+  align-self: center;
+}
+.eufemia-scope--10_77_0 .dnb-radio__shell {
+  position: relative;
+  -webkit-user-select: none;
+          user-select: none;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  justify-content: center;
+  width: var(--radio-width--medium);
+  height: var(--radio-height--medium);
+}
+.eufemia-scope--10_77_0 .dnb-radio__focus, .eufemia-scope--10_77_0 .dnb-radio__button, .eufemia-scope--10_77_0 .dnb-radio__dot {
+  position: absolute;
+  z-index: 4;
+}
+.eufemia-scope--10_77_0 .dnb-radio__button {
+  border: var(--radio-border-width) solid transparent;
+}
+.eufemia-scope--10_77_0 .dnb-radio__focus {
+  display: none;
+  outline: none;
+}
+html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-radio__focus {
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.eufemia-scope--10_77_0 .dnb-radio__focus, .eufemia-scope--10_77_0 .dnb-radio__button {
+  width: calc(var(--radio-width--medium) - 0.25rem);
+  height: calc(var(--radio-height--medium) - 0.25rem);
+  border-radius: 50%;
+}
+.eufemia-scope--10_77_0 .dnb-radio--large .dnb-radio__focus, .eufemia-scope--10_77_0 .dnb-radio--large .dnb-radio__button {
+  width: var(--radio-width--large);
+  height: var(--radio-height--large);
+}
+.eufemia-scope--10_77_0 .dnb-radio__dot {
+  width: var(--radio-dot--medium);
+  height: var(--radio-dot--medium);
+  border-radius: 50%;
+  background-color: var(--radio-color-dot-on);
+  transition: opacity 200ms ease-out, transform 200ms ease-out;
+}
+.eufemia-scope--10_77_0 .dnb-radio--large .dnb-radio__dot {
+  width: var(--radio-dot--large);
+  height: var(--radio-dot--large);
+}
+.eufemia-scope--10_77_0 .dnb-radio__input {
+  opacity: 0;
+  position: absolute;
+  top: auto;
+  left: auto;
+  z-index: 5;
+  width: var(--radio-width--medium);
+  height: var(--radio-height--medium);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  transform: scale(var(--radio-bounding--medium));
+}
+.eufemia-scope--10_77_0 .dnb-radio--large .dnb-radio__input {
+  width: var(--radio-width--large);
+  height: var(--radio-height--large);
+  transform: scale(var(--radio-bounding--large));
+}
+.eufemia-scope--10_77_0 .dnb-radio__input:not([disabled]) {
+  cursor: pointer;
+}
+.eufemia-scope--10_77_0 .dnb-radio__order {
+  display: inline-flex;
+  align-items: baseline;
+}
+.eufemia-scope--10_77_0 .dnb-radio-group--column .dnb-radio__order {
+  display: flex;
+}
+.eufemia-scope--10_77_0 .dnb-radio__row {
+  display: inline-flex;
+}
+.eufemia-scope--10_77_0 .dnb-radio__suffix {
+  order: 3;
+}
+.eufemia-scope--10_77_0 .dnb-radio__suffix .dnb-modal__trigger {
+  margin-top: -0.25rem;
+  margin-bottom: -0.25rem;
+}
+.eufemia-scope--10_77_0 .dnb-radio-group__suffix {
+  font-size: var(--font-size-basis);
+}
+.eufemia-scope--10_77_0 .dnb-radio--large {
+  line-height: var(--radio-height--large);
+}
+.eufemia-scope--10_77_0 .dnb-radio--large .dnb-radio__suffix {
+  line-height: var(--radio-height--large);
+}
+.eufemia-scope--10_77_0 .dnb-radio--large .dnb-radio__shell {
+  width: var(--radio-width--large);
+  height: var(--radio-height--large);
+}
+.eufemia-scope--10_77_0 .dnb-radio .dnb-form-label {
+  margin-right: 0;
+  margin-left: 0;
+  margin-bottom: 0;
+}
+.eufemia-scope--10_77_0 .dnb-radio--label-position-left .dnb-radio__order .dnb-radio__inner {
+  order: 2;
+}
+.eufemia-scope--10_77_0 .dnb-radio--label-position-left .dnb-radio__order .dnb-form-label {
+  order: 1;
+  padding-right: 0.5rem;
+}
+.eufemia-scope--10_77_0 .dnb-radio--label-position-right .dnb-radio__order .dnb-radio__inner {
+  order: 1;
+}
+.eufemia-scope--10_77_0 .dnb-radio--label-position-right .dnb-radio__order .dnb-form-label {
+  order: 2;
+  padding-left: 0.5rem;
+}
+.eufemia-scope--10_77_0 :not(.dnb-radio-group) > .dnb-form-label + .dnb-radio {
+  vertical-align: top;
+}
+.eufemia-scope--10_77_0 .dnb-radio .dnb-form-status {
+  order: 4;
+  margin-top: 0.375rem; /* 6/16 */
+  margin-bottom: 0;
+}
+.eufemia-scope--10_77_0 .dnb-radio + .dnb-form-status {
+  margin-top: 0.5rem;
+  margin-bottom: 1rem;
+}
+.eufemia-scope--10_77_0 .dnb-radio > .dnb-form-status {
+  transform: translateY(0.25rem); /* 4/16 */
+}
+.eufemia-scope--10_77_0 .dnb-radio-group {
+  --radio-group-row-gap: 0.5rem;
+  --radio-group-column-gap: 1rem;
+  display: inline-flex;
+}
+.eufemia-scope--10_77_0 .dnb-radio-group, .eufemia-scope--10_77_0 .dnb-radio-group__fieldset, .eufemia-scope--10_77_0 .dnb-radio-group__shell {
+  flex-grow: 1;
+}
+.eufemia-scope--10_77_0 .dnb-radio-group fieldset {
+  padding: 0;
+  border: none;
+}
+.eufemia-scope--10_77_0 .dnb-radio-group fieldset:not([class*=space__top]) {
+  margin-top: 0;
+}
+.eufemia-scope--10_77_0 .dnb-radio-group fieldset:not([class*=space__bottom]) {
+  margin-bottom: 0;
+}
+.eufemia-scope--10_77_0 .dnb-radio-group fieldset:not([class*=space__left]) {
+  margin-left: 0;
+}
+.eufemia-scope--10_77_0 .dnb-radio-group fieldset:not([class*=space__right]) {
+  margin-right: 0;
+}
+.eufemia-scope--10_77_0 .dnb-radio-group--column .dnb-radio {
+  display: flex;
+  margin-right: 0;
+}
+.eufemia-scope--10_77_0 .dnb-radio-group .dnb-radio:last-of-type {
+  margin-right: 0;
+}
+.eufemia-scope--10_77_0 .dnb-radio-group [role=radiogroup], .eufemia-scope--10_77_0 .dnb-radio-group__shell {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--radio-group-column-gap);
+  row-gap: var(--radio-group-row-gap);
+}
+.eufemia-scope--10_77_0 .dnb-radio-group__shell > .dnb-form-status {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.eufemia-scope--10_77_0 .dnb-radio-group--column .dnb-radio-group__shell {
+  flex-direction: column;
+}
+.eufemia-scope--10_77_0 .dnb-radio__input:checked ~ .dnb-radio__button, .eufemia-scope--10_77_0 .dnb-radio__input[data-checked=true] ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-on);
+  border-color: var(--radio-color-border-on);
+}
+.eufemia-scope--10_77_0 .dnb-radio__input:checked ~ .dnb-radio__dot, .eufemia-scope--10_77_0 .dnb-radio__input[data-checked=true] ~ .dnb-radio__dot {
+  opacity: 1;
+  transform: scale(1);
+}
+.eufemia-scope--10_77_0 .dnb-radio__input:not(:checked):not([data-checked=true]) ~ .dnb-radio__dot {
+  opacity: 0;
+  transform: scale(0.8);
+}
+.eufemia-scope--10_77_0 .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);
+}
+.eufemia-scope--10_77_0 .dnb-radio__input[disabled] ~ .dnb-radio__button {
+  border-width: var(--radio-border-width--disabled);
+}
+.eufemia-scope--10_77_0 .dnb-radio__input[disabled]:checked ~ .dnb-radio__button, .eufemia-scope--10_77_0 .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__button {
+  border-color: var(--radio-color-border-on--disabled);
+  background-color: var(--radio-color-background--disabled);
+}
+.eufemia-scope--10_77_0 .dnb-radio__input[disabled]:checked ~ .dnb-radio__dot, .eufemia-scope--10_77_0 .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__dot {
+  background-color: var(--radio-color-dot-on--disabled);
+}
+.eufemia-scope--10_77_0 .dnb-radio__input[disabled]:not(:checked):not([data-checked=true]) ~ .dnb-radio__button:not(.dnb-skeleton) {
+  border-color: var(--radio-color-border-off--disabled);
+  background-color: var(--radio-color-background--disabled);
+}
+.eufemia-scope--10_77_0 .dnb-radio__input[disabled] ~ .dnb-radio__button.dnb-skeleton {
+  border-color: var(--skeleton-color);
+}
+.eufemia-scope--10_77_0 .dnb-radio__input[disabled] ~ .dnb-radio__button.dnb-skeleton::before {
+  border-radius: 0;
+}
+.eufemia-scope--10_77_0 .dnb-radio__input:not([disabled]):checked:active ~ .dnb-radio__button, .eufemia-scope--10_77_0 .dnb-radio__input:not([disabled])[data-checked=true]:active ~ .dnb-radio__button {
+  border-color: var(--radio-color-border-on--active);
+}
+.eufemia-scope--10_77_0 .dnb-radio__input:not([disabled]):checked:active ~ .dnb-radio__dot, .eufemia-scope--10_77_0 .dnb-radio__input:not([disabled])[data-checked=true]:active ~ .dnb-radio__dot {
+  background-color: var(--radio-color-dot-on--active);
+}
+.eufemia-scope--10_77_0 .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);
+}
+.eufemia-scope--10_77_0 .dnb-radio__input:not([disabled]):not(:focus):checked:hover ~ .dnb-radio__dot, .eufemia-scope--10_77_0 .dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-radio__dot {
+  background-color: var(--radio-color-dot-on--hover);
+}
+.eufemia-scope--10_77_0 .dnb-radio__input:not([disabled]):not(:focus):checked:hover ~ .dnb-radio__button, .eufemia-scope--10_77_0 .dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-on--hover);
+  border-width: var(--radio-border-width-on--hover);
+}
+.eufemia-scope--10_77_0 .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);
+  border-width: var(--radio-border-width--hover);
+}
+html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-radio__input:not([disabled]):focus ~ .dnb-radio__button {
+  border-width: var(--radio-border-width--focus);
+  border: none;
+}
+.eufemia-scope--10_77_0 .dnb-radio__input:not([disabled]):focus ~ .dnb-radio__focus, .eufemia-scope--10_77_0 .dnb-radio__input:not([disabled]):active ~ .dnb-radio__focus {
+  display: block;
+}
+html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus ~ .dnb-radio__button, html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .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] .eufemia-scope--10_77_0 .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus ~ .dnb-radio__dot, html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus ~ .dnb-radio__dot {
+  background-color: var(--radio-color-dot-on--focus, var(--focus-ring-color));
+}
+html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-off--focus);
+}
+.eufemia-scope--10_77_0 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__button {
+  border: none;
+}
+.eufemia-scope--10_77_0 .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(--radio-focus-ring-width--error);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.eufemia-scope--10_77_0 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):hover ~ .dnb-radio__focus {
+  --border-color: var(--radio-color-border--error-hover);
+  --border-width: var(--radio-focus-ring-width--error);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.eufemia-scope--10_77_0 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover):checked ~ .dnb-radio__dot, .eufemia-scope--10_77_0 .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);
+}
+.eufemia-scope--10_77_0 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover ~ .dnb-radio__dot, .eufemia-scope--10_77_0 .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);
+}
+.eufemia-scope--10_77_0 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover ~ .dnb-radio__button, .eufemia-scope--10_77_0 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-on--error-hover);
+}
+.eufemia-scope--10_77_0 .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-hover);
+}

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

@@ -0,0 +1 @@
+.eufemia-scope--10_77_0{--radio-width--medium:1.5rem;--radio-height--medium:1.5rem}.eufemia-scope--10_77_0 .dnb-radio{--radio-dot--medium:0.75rem;--radio-dot--large:1.125rem;--radio-width--large:2rem;--radio-height--large:2rem;--radio-border-width:0.09375rem;--radio-color-dot-on:#000;--radio-color-background-on:#fff;--radio-color-border-on:#000;--radio-color-background-off:#fff;--radio-color-border-off:#000;--radio-border-width--disabled:0.125rem;--radio-color-dot-on--disabled:#d3d3d3;--radio-color-background--disabled:#fff;--radio-color-border-on--disabled:#d3d3d3;--radio-color-border-off--disabled:#d3d3d3;--radio-color-dot-on--active:#d3d3d3;--radio-color-border-on--active:#d3d3d3;--radio-color-background-off--active:#d3d3d3;--radio-color-border-off--active:transparent;--radio-border-width--hover:0.125rem;--radio-border-width-on--hover:0.125rem;--radio-color-dot-on--hover:#d3d3d3;--radio-color-background-on--hover:#d3d3d3;--radio-color-background-off--hover:#d3d3d3;--radio-border-width--focus:0.125rem;--radio-color-background-on--focus:var(--color-white);--radio-color-background-off--focus:#d3d3d3;--radio-color-dot-on--error:red;--radio-color-border-on--error:red;--radio-color-border--error-hover:red;--radio-color-background-off--error-hover:#fff0f5;--radio-color-background-on--error-hover:#fff0f5;--radio-color-dot-on--error-hover:#fff0f5;--radio-focus-ring-width--error:var(--focus-ring-width);--radio-bounding--medium:1.75,1.5;--radio-bounding--large:1.25,1.12;display:inline-flex;flex-direction:column;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.eufemia-scope--10_77_0 .dnb-radio__inner{align-self:center;display:inline-flex;flex-direction:column}.eufemia-scope--10_77_0 .dnb-radio__shell{align-items:center;display:flex;flex-shrink:0;height:var(--radio-height--medium);justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:var(--radio-width--medium)}.eufemia-scope--10_77_0 .dnb-radio__button,.eufemia-scope--10_77_0 .dnb-radio__dot,.eufemia-scope--10_77_0 .dnb-radio__focus{position:absolute;z-index:4}.eufemia-scope--10_77_0 .dnb-radio__button{border:var(--radio-border-width) solid transparent}.eufemia-scope--10_77_0 .dnb-radio__focus{display:none;outline:none}html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-radio__focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.eufemia-scope--10_77_0 .dnb-radio__button,.eufemia-scope--10_77_0 .dnb-radio__focus{border-radius:50%;height:calc(var(--radio-height--medium) - .25rem);width:calc(var(--radio-width--medium) - .25rem)}.eufemia-scope--10_77_0 .dnb-radio--large .dnb-radio__button,.eufemia-scope--10_77_0 .dnb-radio--large .dnb-radio__focus{height:var(--radio-height--large);width:var(--radio-width--large)}.eufemia-scope--10_77_0 .dnb-radio__dot{background-color:var(--radio-color-dot-on);border-radius:50%;height:var(--radio-dot--medium);transition:opacity .2s ease-out,transform .2s ease-out;width:var(--radio-dot--medium)}.eufemia-scope--10_77_0 .dnb-radio--large .dnb-radio__dot{height:var(--radio-dot--large);width:var(--radio-dot--large)}.eufemia-scope--10_77_0 .dnb-radio__input{border:0;height:var(--radio-height--medium);left:auto;margin:0;opacity:0;padding:0;position:absolute;top:auto;transform:scale(var(--radio-bounding--medium));width:var(--radio-width--medium);z-index:5}.eufemia-scope--10_77_0 .dnb-radio--large .dnb-radio__input{height:var(--radio-height--large);transform:scale(var(--radio-bounding--large));width:var(--radio-width--large)}.eufemia-scope--10_77_0 .dnb-radio__input:not([disabled]){cursor:pointer}.eufemia-scope--10_77_0 .dnb-radio__order{align-items:baseline;display:inline-flex}.eufemia-scope--10_77_0 .dnb-radio-group--column .dnb-radio__order{display:flex}.eufemia-scope--10_77_0 .dnb-radio__row{display:inline-flex}.eufemia-scope--10_77_0 .dnb-radio__suffix{order:3}.eufemia-scope--10_77_0 .dnb-radio__suffix .dnb-modal__trigger{margin-bottom:-.25rem;margin-top:-.25rem}.eufemia-scope--10_77_0 .dnb-radio-group__suffix{font-size:var(--font-size-basis)}.eufemia-scope--10_77_0 .dnb-radio--large,.eufemia-scope--10_77_0 .dnb-radio--large .dnb-radio__suffix{line-height:var(--radio-height--large)}.eufemia-scope--10_77_0 .dnb-radio--large .dnb-radio__shell{height:var(--radio-height--large);width:var(--radio-width--large)}.eufemia-scope--10_77_0 .dnb-radio .dnb-form-label{margin-bottom:0;margin-left:0;margin-right:0}.eufemia-scope--10_77_0 .dnb-radio--label-position-left .dnb-radio__order .dnb-radio__inner{order:2}.eufemia-scope--10_77_0 .dnb-radio--label-position-left .dnb-radio__order .dnb-form-label{order:1;padding-right:.5rem}.eufemia-scope--10_77_0 .dnb-radio--label-position-right .dnb-radio__order .dnb-radio__inner{order:1}.eufemia-scope--10_77_0 .dnb-radio--label-position-right .dnb-radio__order .dnb-form-label{order:2;padding-left:.5rem}.eufemia-scope--10_77_0 :not(.dnb-radio-group)>.dnb-form-label+.dnb-radio{vertical-align:top}.eufemia-scope--10_77_0 .dnb-radio .dnb-form-status{margin-bottom:0;margin-top:.375rem;order:4}.eufemia-scope--10_77_0 .dnb-radio+.dnb-form-status{margin-bottom:1rem;margin-top:.5rem}.eufemia-scope--10_77_0 .dnb-radio>.dnb-form-status{transform:translateY(.25rem)}.eufemia-scope--10_77_0 .dnb-radio-group{--radio-group-row-gap:0.5rem;--radio-group-column-gap:1rem;display:inline-flex}.eufemia-scope--10_77_0 .dnb-radio-group,.eufemia-scope--10_77_0 .dnb-radio-group__fieldset,.eufemia-scope--10_77_0 .dnb-radio-group__shell{flex-grow:1}.eufemia-scope--10_77_0 .dnb-radio-group fieldset{border:none;padding:0}.eufemia-scope--10_77_0 .dnb-radio-group fieldset:not([class*=space__top]){margin-top:0}.eufemia-scope--10_77_0 .dnb-radio-group fieldset:not([class*=space__bottom]){margin-bottom:0}.eufemia-scope--10_77_0 .dnb-radio-group fieldset:not([class*=space__left]){margin-left:0}.eufemia-scope--10_77_0 .dnb-radio-group fieldset:not([class*=space__right]){margin-right:0}.eufemia-scope--10_77_0 .dnb-radio-group--column .dnb-radio{display:flex;margin-right:0}.eufemia-scope--10_77_0 .dnb-radio-group .dnb-radio:last-of-type{margin-right:0}.eufemia-scope--10_77_0 .dnb-radio-group [role=radiogroup],.eufemia-scope--10_77_0 .dnb-radio-group__shell{column-gap:var(--radio-group-column-gap);display:flex;flex-wrap:wrap;row-gap:var(--radio-group-row-gap)}.eufemia-scope--10_77_0 .dnb-radio-group__shell>.dnb-form-status{margin-bottom:0;margin-top:0}.eufemia-scope--10_77_0 .dnb-radio-group--column .dnb-radio-group__shell{flex-direction:column}.eufemia-scope--10_77_0 .dnb-radio__input:checked~.dnb-radio__button,.eufemia-scope--10_77_0 .dnb-radio__input[data-checked=true]~.dnb-radio__button{background-color:var(--radio-color-background-on);border-color:var(--radio-color-border-on)}.eufemia-scope--10_77_0 .dnb-radio__input:checked~.dnb-radio__dot,.eufemia-scope--10_77_0 .dnb-radio__input[data-checked=true]~.dnb-radio__dot{opacity:1;transform:scale(1)}.eufemia-scope--10_77_0 .dnb-radio__input:not(:checked):not([data-checked=true])~.dnb-radio__dot{opacity:0;transform:scale(.8)}.eufemia-scope--10_77_0 .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)}.eufemia-scope--10_77_0 .dnb-radio__input[disabled]~.dnb-radio__button{border-width:var(--radio-border-width--disabled)}.eufemia-scope--10_77_0 .dnb-radio__input[disabled]:checked~.dnb-radio__button,.eufemia-scope--10_77_0 .dnb-radio__input[disabled][data-checked=true]~.dnb-radio__button{background-color:var(--radio-color-background--disabled);border-color:var(--radio-color-border-on--disabled)}.eufemia-scope--10_77_0 .dnb-radio__input[disabled]:checked~.dnb-radio__dot,.eufemia-scope--10_77_0 .dnb-radio__input[disabled][data-checked=true]~.dnb-radio__dot{background-color:var(--radio-color-dot-on--disabled)}.eufemia-scope--10_77_0 .dnb-radio__input[disabled]:not(:checked):not([data-checked=true])~.dnb-radio__button:not(.dnb-skeleton){background-color:var(--radio-color-background--disabled);border-color:var(--radio-color-border-off--disabled)}.eufemia-scope--10_77_0 .dnb-radio__input[disabled]~.dnb-radio__button.dnb-skeleton{border-color:var(--skeleton-color)}.eufemia-scope--10_77_0 .dnb-radio__input[disabled]~.dnb-radio__button.dnb-skeleton:before{border-radius:0}.eufemia-scope--10_77_0 .dnb-radio__input:not([disabled]):checked:active~.dnb-radio__button,.eufemia-scope--10_77_0 .dnb-radio__input:not([disabled])[data-checked=true]:active~.dnb-radio__button{border-color:var(--radio-color-border-on--active)}.eufemia-scope--10_77_0 .dnb-radio__input:not([disabled]):checked:active~.dnb-radio__dot,.eufemia-scope--10_77_0 .dnb-radio__input:not([disabled])[data-checked=true]:active~.dnb-radio__dot{background-color:var(--radio-color-dot-on--active)}.eufemia-scope--10_77_0 .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)}.eufemia-scope--10_77_0 .dnb-radio__input:not([disabled]):not(:focus):checked:hover~.dnb-radio__dot,.eufemia-scope--10_77_0 .dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover~.dnb-radio__dot{background-color:var(--radio-color-dot-on--hover)}.eufemia-scope--10_77_0 .dnb-radio__input:not([disabled]):not(:focus):checked:hover~.dnb-radio__button,.eufemia-scope--10_77_0 .dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover~.dnb-radio__button{background-color:var(--radio-color-background-on--hover);border-width:var(--radio-border-width-on--hover)}.eufemia-scope--10_77_0 .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);border-width:var(--radio-border-width--hover)}html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-radio__input:not([disabled]):focus~.dnb-radio__button{border:none}.eufemia-scope--10_77_0 .dnb-radio__input:not([disabled]):active~.dnb-radio__focus,.eufemia-scope--10_77_0 .dnb-radio__input:not([disabled]):focus~.dnb-radio__focus{display:block}html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus~.dnb-radio__button,html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .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] .eufemia-scope--10_77_0 .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus~.dnb-radio__dot,html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus~.dnb-radio__dot{background-color:var(--radio-color-dot-on--focus,var(--focus-ring-color))}html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus~.dnb-radio__button{background-color:var(--radio-color-background-off--focus)}.eufemia-scope--10_77_0 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)~.dnb-radio__button{border:none}.eufemia-scope--10_77_0 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)~.dnb-radio__focus{--border-color:var(--radio-color-border-on--error);--border-width:var(--radio-focus-ring-width--error);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);display:block}.eufemia-scope--10_77_0 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):hover~.dnb-radio__focus{--border-color:var(--radio-color-border--error-hover);--border-width:var(--radio-focus-ring-width--error);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.eufemia-scope--10_77_0 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover):checked~.dnb-radio__dot,.eufemia-scope--10_77_0 .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)}.eufemia-scope--10_77_0 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover~.dnb-radio__dot,.eufemia-scope--10_77_0 .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)}.eufemia-scope--10_77_0 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover~.dnb-radio__button,.eufemia-scope--10_77_0 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover~.dnb-radio__button{background-color:var(--radio-color-background-on--error-hover)}.eufemia-scope--10_77_0 .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-hover)}

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

@@ -0,0 +1,41 @@
+/*
+* Radio theme for Sbanken
+*
+*/
+.eufemia-scope--10_77_0 .dnb-radio {
+  --radio-dot--medium: 0.875rem;
+  --radio-dot--large: 1.5rem;
+  --radio-border-width: 0.0625rem;
+  --radio-color-dot-on: var(--sb-color-violet);
+  --radio-color-background-on: var(--sb-color-white);
+  --radio-color-border-on: var(--sb-color-violet);
+  --radio-color-background-off: var(--sb-color-white);
+  --radio-color-border-off: var(--sb-color-violet);
+  --radio-border-width--disabled: 0.0625rem;
+  --radio-color-dot-on--disabled: var(--sb-color-gray-dark);
+  --radio-color-background--disabled: var(--sb-color-gray-light);
+  --radio-color-border-on--disabled: var(--sb-color-gray-dark);
+  --radio-color-border-off--disabled: var(--sb-color-gray-dark);
+  --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-border-width-on--hover: 0.0625rem;
+  --radio-color-background-on--hover: var(--sb-color-violet-light-3);
+  --radio-color-background-off--hover: var(--sb-color-violet-light-3);
+  --radio-border-width--focus: 0.1875rem;
+  --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-border--error-hover: var(--sb-color-red);
+  --radio-color-background-off--error-hover: var(
+    --sb-color-magenta-light-2
+  );
+  --radio-color-background-on--error-hover: var(
+    --sb-color-magenta-light-2
+  );
+  --radio-color-dot-on--error-hover: var(--sb-color-red);
+  --radio-focus-ring-width--error: var(--radio-border-width);
+}

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

@@ -0,0 +1,5 @@
+.eufemia-scope--10_77_0 .dnb-radio{--radio-dot--medium:0.875rem;--radio-dot--large:1.5rem;--radio-border-width:0.0625rem;--radio-color-dot-on:var(--sb-color-violet);--radio-color-background-on:var(--sb-color-white);--radio-color-border-on:var(--sb-color-violet);--radio-color-background-off:var(--sb-color-white);--radio-color-border-off:var(--sb-color-violet);--radio-border-width--disabled:0.0625rem;--radio-color-dot-on--disabled:var(--sb-color-gray-dark);--radio-color-background--disabled:var(--sb-color-gray-light);--radio-color-border-on--disabled:var(--sb-color-gray-dark);--radio-color-border-off--disabled:var(--sb-color-gray-dark);--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-border-width-on--hover:0.0625rem;--radio-color-background-on--hover:var(--sb-color-violet-light-3);--radio-color-background-off--hover:var(--sb-color-violet-light-3);--radio-border-width--focus:0.1875rem;--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-border--error-hover:var(--sb-color-red);--radio-color-background-off--error-hover:var(
+    --sb-color-magenta-light-2
+  );--radio-color-background-on--error-hover:var(
+    --sb-color-magenta-light-2
+  );--radio-color-dot-on--error-hover:var(--sb-color-red);--radio-focus-ring-width--error:var(--radio-border-width)}

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

@@ -0,0 +1,31 @@
+/*
+* Radio theme
+*
+*/
+.eufemia-scope--10_77_0 .dnb-radio {
+  --radio-color-dot-on: var(--color-sea-green);
+  --radio-color-background-on: var(--color-white);
+  --radio-color-border-on: var(--color-sea-green);
+  --radio-color-background-off: var(--color-white);
+  --radio-color-border-off: var(--color-sea-green);
+  --radio-color-dot-on--disabled: var(--color-sea-green-30);
+  --radio-color-background--disabled: var(--color-white);
+  --radio-color-border-on--disabled: var(--color-sea-green-30);
+  --radio-color-border-off--disabled: var(--color-mint-green-50);
+  --radio-color-dot-on--active: var(--color-mint-green-50);
+  --radio-color-border-on--active: var(--color-mint-green-50);
+  --radio-color-background-off--active: var(--color-mint-green-50);
+  --radio-color-border-off--active: transparent;
+  --radio-color-dot-on--hover: var(--color-mint-green-50);
+  --radio-color-background-on--hover: var(--color-white);
+  --radio-color-background-off--hover: var(--color-mint-green-50);
+  --radio-color-dot-on--focus: var(--color-sea-green);
+  --radio-color-background-on--focus: var(--color-white);
+  --radio-color-background-off--focus: var(--color-mint-green-50);
+  --radio-color-dot-on--error: var(--color-fire-red);
+  --radio-color-border-on--error: var(--color-fire-red);
+  --radio-color-border--error-hover: var(--radio-color-border-on--error);
+  --radio-color-background-off--error-hover: var(--color-fire-red-8);
+  --radio-color-background-on--error-hover: var(--color-white);
+  --radio-color-dot-on--error-hover: var(--color-fire-red-8);
+}

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

@@ -0,0 +1 @@
+.eufemia-scope--10_77_0 .dnb-radio{--radio-color-dot-on:var(--color-sea-green);--radio-color-background-on:var(--color-white);--radio-color-border-on:var(--color-sea-green);--radio-color-background-off:var(--color-white);--radio-color-border-off:var(--color-sea-green);--radio-color-dot-on--disabled:var(--color-sea-green-30);--radio-color-background--disabled:var(--color-white);--radio-color-border-on--disabled:var(--color-sea-green-30);--radio-color-border-off--disabled:var(--color-mint-green-50);--radio-color-dot-on--active:var(--color-mint-green-50);--radio-color-border-on--active:var(--color-mint-green-50);--radio-color-background-off--active:var(--color-mint-green-50);--radio-color-border-off--active:transparent;--radio-color-dot-on--hover:var(--color-mint-green-50);--radio-color-background-on--hover:var(--color-white);--radio-color-background-off--hover:var(--color-mint-green-50);--radio-color-dot-on--focus:var(--color-sea-green);--radio-color-background-on--focus:var(--color-white);--radio-color-background-off--focus:var(--color-mint-green-50);--radio-color-dot-on--error:var(--color-fire-red);--radio-color-border-on--error:var(--color-fire-red);--radio-color-border--error-hover:var(--radio-color-border-on--error);--radio-color-background-off--error-hover:var(--color-fire-red-8);--radio-color-background-on--error-hover:var(--color-white);--radio-color-dot-on--error-hover:var(--color-fire-red-8)}

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

@@ -0,0 +1,159 @@
+/*
+ * Section component
+ *
+ */
+/*
+ * Utilities
+ */
+.eufemia-scope--10_77_0 .dnb-section {
+  position: relative;
+  display: flow-root;
+  --breakout--on: visible;
+  --breakout--off: hidden;
+  --rounded-corner--value: 0.5rem;
+  --outline: 0 0 0 var(--outline-width, 1px)
+    var(--outline-color, transparent);
+  --outline-none: 0 0 0 0 transparent;
+  --top: 0;
+  --left: -100vw;
+  --width: 100vw;
+  --height: 100%;
+  --color-transparent: transparent;
+  --rounded-corner--small: 0;
+  --rounded-corner--medium: 0;
+  --rounded-corner--large: 0;
+  color: var(--text-color, black);
+  border-radius: var(--rounded-corner, 0);
+}
+.eufemia-scope--10_77_0 .dnb-section[style*="--background-color"] {
+  background-color: var(--background-color, white);
+}
+.eufemia-scope--10_77_0 .dnb-section::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  box-shadow: var(--drop-shadow, var(--outline-none)), var(--outline, var(--outline-none));
+  border-radius: var(--rounded-corner, 0);
+}
+.eufemia-scope--10_77_0 .dnb-section::after {
+  content: "";
+  visibility: var(--breakout, hidden);
+  position: absolute;
+  z-index: -15;
+  left: var(--left);
+  top: var(--top);
+  width: var(--width);
+  height: var(--height);
+  color: var(--background-color, currentcolor);
+  background-color: currentcolor;
+  --box-shadow: 99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor,
+    297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor;
+  box-shadow: var(--box-shadow);
+  border-radius: var(--rounded-corner, 0);
+}
+.eufemia-scope--10_77_0 .dnb-section:not([style*="--breakout"]) {
+  --breakout: var(--breakout--on);
+}
+.eufemia-scope--10_77_0 .dnb-section[style*="--outset"].dnb-space[style]:not(.dnb-card) {
+  padding-left: calc(var(--padding-left) * (1 - var(--outset)));
+  padding-right: calc(var(--padding-right) * (1 - var(--outset)));
+}
+.eufemia-scope--10_77_0 .dnb-section[style*="--outset"]::before {
+  margin-left: calc(var(--outset-left, var(--padding-left)) * -1 * var(--outset));
+  margin-right: calc(var(--outset-right, var(--padding-right)) * -1 * var(--outset));
+  background-color: inherit;
+}
+@media screen and (max-width: 60em) {
+  .eufemia-scope--10_77_0 .dnb-section {
+    --breakout: var(--breakout--small, var(--breakout--fallback));
+    --outset: var(--outset--small, var(--outset--fallback));
+    --background-color--value: var(--background-color--small);
+    --text-color--value: var(--text-color--small);
+    --outline-color: var(--outline-color--small);
+    --drop-shadow: var(--drop-shadow--small);
+    --rounded-corner: var(
+      --rounded-corner--small,
+      var(--rounded-corner--fallback)
+    );
+  }
+}
+@media screen and (max-width: 60em) and (min-width: 40.00625em) {
+  .eufemia-scope--10_77_0 .dnb-section {
+    --breakout: var(--breakout--medium, var(--breakout--fallback));
+    --outset: var(--outset--medium, var(--outset--fallback));
+    --background-color--value: var(--background-color--medium);
+    --text-color--value: var(--text-color--medium);
+    --outline-color: var(--outline-color--medium);
+    --drop-shadow: var(--drop-shadow--medium);
+    --rounded-corner: var(
+      --rounded-corner--medium,
+      var(--rounded-corner--fallback)
+    );
+  }
+}
+@media screen and (min-width: 60.00625em) {
+  .eufemia-scope--10_77_0 .dnb-section {
+    --breakout: var(--breakout--large, var(--breakout--fallback));
+    --outset: var(--outset--large, var(--outset--fallback));
+    --background-color--value: var(--background-color--large);
+    --text-color--value: var(--text-color--large);
+    --outline-color: var(--outline-color--large);
+    --drop-shadow: var(--drop-shadow--large);
+    --rounded-corner: var(
+      --rounded-corner--large,
+      var(--rounded-corner--fallback)
+    );
+  }
+}
+.eufemia-scope--10_77_0 .dnb-section .dnb-section::after {
+  z-index: -14;
+}
+.eufemia-scope--10_77_0 .dnb-section .dnb-section .dnb-section::after {
+  z-index: -13;
+}
+.eufemia-scope--10_77_0 .dnb-section .dnb-section .dnb-section .dnb-section::after {
+  z-index: -12;
+}
+.eufemia-scope--10_77_0 .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
+  z-index: -11;
+}
+.eufemia-scope--10_77_0 .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
+  z-index: -10;
+}
+.eufemia-scope--10_77_0 .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
+  z-index: -9;
+}
+.eufemia-scope--10_77_0 .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
+  z-index: -8;
+}
+.eufemia-scope--10_77_0 .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
+  z-index: -7;
+}
+.eufemia-scope--10_77_0 .dnb-section--spacing-x-small {
+  padding-top: var(--spacing-x-small);
+  padding-bottom: var(--spacing-x-small);
+}
+.eufemia-scope--10_77_0 .dnb-section--spacing-small {
+  padding-top: var(--spacing-small);
+  padding-bottom: var(--spacing-small);
+}
+.eufemia-scope--10_77_0 .dnb-section--spacing-medium {
+  padding-top: var(--spacing-medium);
+  padding-bottom: var(--spacing-medium);
+}
+.eufemia-scope--10_77_0 .dnb-section--spacing, .eufemia-scope--10_77_0 .dnb-section--spacing-large {
+  padding-top: var(--spacing-large);
+  padding-bottom: var(--spacing-large);
+}
+.eufemia-scope--10_77_0 .dnb-section--spacing-x-large {
+  padding-top: var(--spacing-x-large);
+  padding-bottom: var(--spacing-x-large);
+}
+.eufemia-scope--10_77_0 .dnb-section--spacing-xx-large {
+  padding-top: var(--spacing-xx-large);
+  padding-bottom: var(--spacing-xx-large);
+}

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

@@ -0,0 +1,7 @@
+.eufemia-scope--10_77_0 .dnb-section{--breakout--on:visible;--breakout--off:hidden;--rounded-corner--value:0.5rem;--outline:0 0 0 var(--outline-width,1px) var(--outline-color,transparent);--outline-none:0 0 0 0 transparent;--top:0;--left:-100vw;--width:100vw;--height:100%;--color-transparent:transparent;--rounded-corner--small:0;--rounded-corner--medium:0;--rounded-corner--large:0;border-radius:var(--rounded-corner,0);color:var(--text-color,#000);display:flow-root;position:relative}.eufemia-scope--10_77_0 .dnb-section[style*="--background-color"]{background-color:var(--background-color,#fff)}.eufemia-scope--10_77_0 .dnb-section:before{border-radius:var(--rounded-corner,0);bottom:0;box-shadow:var(--drop-shadow,var(--outline-none)),var(--outline,var(--outline-none));content:"";left:0;position:absolute;right:0;top:0;z-index:-1}.eufemia-scope--10_77_0 .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;background-color:currentcolor;border-radius:var(--rounded-corner,0);box-shadow:var(--box-shadow);color:var(--background-color,currentcolor);content:"";height:var(--height);left:var(--left);position:absolute;top:var(--top);visibility:var(--breakout,hidden);width:var(--width);z-index:-15}.eufemia-scope--10_77_0 .dnb-section:not([style*="--breakout"]){--breakout:var(--breakout--on)}.eufemia-scope--10_77_0 .dnb-section[style*="--outset"].dnb-space[style]:not(.dnb-card){padding-left:calc(var(--padding-left)*(1 - var(--outset)));padding-right:calc(var(--padding-right)*(1 - var(--outset)))}.eufemia-scope--10_77_0 .dnb-section[style*="--outset"]:before{background-color:inherit;margin-left:calc(var(--outset-left, var(--padding-left))*-1*var(--outset));margin-right:calc(var(--outset-right, var(--padding-right))*-1*var(--outset))}@media screen and (max-width:60em){.eufemia-scope--10_77_0 .dnb-section{--breakout:var(--breakout--small,var(--breakout--fallback));--outset:var(--outset--small,var(--outset--fallback));--background-color--value:var(--background-color--small);--text-color--value:var(--text-color--small);--outline-color:var(--outline-color--small);--drop-shadow:var(--drop-shadow--small);--rounded-corner:var(
+      --rounded-corner--small,var(--rounded-corner--fallback)
+    )}}@media screen and (max-width:60em) and (min-width:40.00625em){.eufemia-scope--10_77_0 .dnb-section{--breakout:var(--breakout--medium,var(--breakout--fallback));--outset:var(--outset--medium,var(--outset--fallback));--background-color--value:var(--background-color--medium);--text-color--value:var(--text-color--medium);--outline-color:var(--outline-color--medium);--drop-shadow:var(--drop-shadow--medium);--rounded-corner:var(
+      --rounded-corner--medium,var(--rounded-corner--fallback)
+    )}}@media screen and (min-width:60.00625em){.eufemia-scope--10_77_0 .dnb-section{--breakout:var(--breakout--large,var(--breakout--fallback));--outset:var(--outset--large,var(--outset--fallback));--background-color--value:var(--background-color--large);--text-color--value:var(--text-color--large);--outline-color:var(--outline-color--large);--drop-shadow:var(--drop-shadow--large);--rounded-corner:var(
+      --rounded-corner--large,var(--rounded-corner--fallback)
+    )}}.eufemia-scope--10_77_0 .dnb-section .dnb-section:after{z-index:-14}.eufemia-scope--10_77_0 .dnb-section .dnb-section .dnb-section:after{z-index:-13}.eufemia-scope--10_77_0 .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-12}.eufemia-scope--10_77_0 .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-11}.eufemia-scope--10_77_0 .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-10}.eufemia-scope--10_77_0 .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-9}.eufemia-scope--10_77_0 .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-8}.eufemia-scope--10_77_0 .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-7}.eufemia-scope--10_77_0 .dnb-section--spacing-x-small{padding-bottom:var(--spacing-x-small);padding-top:var(--spacing-x-small)}.eufemia-scope--10_77_0 .dnb-section--spacing-small{padding-bottom:var(--spacing-small);padding-top:var(--spacing-small)}.eufemia-scope--10_77_0 .dnb-section--spacing-medium{padding-bottom:var(--spacing-medium);padding-top:var(--spacing-medium)}.eufemia-scope--10_77_0 .dnb-section--spacing,.eufemia-scope--10_77_0 .dnb-section--spacing-large{padding-bottom:var(--spacing-large);padding-top:var(--spacing-large)}.eufemia-scope--10_77_0 .dnb-section--spacing-x-large{padding-bottom:var(--spacing-x-large);padding-top:var(--spacing-x-large)}.eufemia-scope--10_77_0 .dnb-section--spacing-xx-large{padding-bottom:var(--spacing-xx-large);padding-top:var(--spacing-xx-large)}

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

@@ -0,0 +1,34 @@
+.eufemia-scope--10_77_0 .dnb-section {
+  --background-color: var(--sb-color-white);
+  --outline-color--value: var(--sb-color-gray-light-2);
+}
+.eufemia-scope--10_77_0 .dnb-section--transparent {
+  --background-color: transparent;
+}
+.eufemia-scope--10_77_0 .dnb-section--default, .eufemia-scope--10_77_0 .dnb-section--divider {
+  --text-color: var(--text-color--value, var(--sb-color-text));
+  --background-color: var(
+    --background-color--value,
+    var(--sb-color-violet-light-4)
+  );
+}
+.eufemia-scope--10_77_0 .dnb-section--white {
+  --text-color: var(--sb-color-text);
+  --background-color: var(--sb-color-white);
+}
+.eufemia-scope--10_77_0 .dnb-section--error {
+  --text-color: var(--sb-color-text);
+  --background-color: var(--sb-color-magenta-light-2);
+}
+.eufemia-scope--10_77_0 .dnb-section--info {
+  --text-color: var(--sb-color-text);
+  --background-color: var(--sb-color-green-light-2);
+}
+.eufemia-scope--10_77_0 .dnb-section--warning {
+  --text-color: var(--sb-color-text);
+  --background-color: var(--sb-color-yellow-light-3);
+}
+.eufemia-scope--10_77_0 .dnb-section--success {
+  --text-color: var(--sb-color-text);
+  --background-color: var(--sb-color-green-light-2);
+}