@dnb/eufemia/es/extensions/forms/ValueBlock/style/dnb-value-block--isolated.css

DNB Eufemia Design System UI Library

@charset "UTF-8";
/*
 * Utilities
 */
.eufemia-scope--10_104_0 {
  --forms-value-width--small: 30ch;
  --forms-value-width--medium: 40ch;
  --forms-value-width--large: var(--prose-max-width);
  --forms-value-label-max-width--large: var(--prose-max-width);
}

.eufemia-scope--10_104_0 .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) .dnb-dt, .eufemia-scope--10_104_0 .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) > .dnb-dd > .dnb-dl, .eufemia-scope--10_104_0 .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not([class*=dnb-space]) > .dnb-dd > .dnb-dl {
  margin: 0;
}
.eufemia-scope--10_104_0 .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) .dnb-dt:empty,
.eufemia-scope--10_104_0 .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) .dnb-dd:empty {
  display: none;
}
.eufemia-scope--10_104_0 .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid) > .dnb-dd {
  margin-bottom: var(--spacing-medium);
  transition: margin-bottom 300ms var(--easing-default);
}
.eufemia-scope--10_104_0 .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid) > .dnb-dd:last-of-type, .eufemia-scope--10_104_0 .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid) > .dnb-dd:has(~ .dnb-dt:empty ~ .dnb-dd:empty) {
  margin-bottom: 0;
}

.eufemia-scope--10_104_0 .dnb-forms-value-block {
  display: block;
  font-size: var(--font-size-basis);
}
.eufemia-scope--10_104_0 .dnb-forms-value-block:not(.dnb-forms-value-block__composition--horizontal) .dnb-forms-value-block__content {
  display: block;
}
.eufemia-scope--10_104_0 .dnb-forms-value-block--inline:not([class*=__composition]) {
  display: inline-block;
  font-size: inherit;
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__label, .eufemia-scope--10_104_0 .dnb-forms-value-block__label strong {
  font-weight: var(--font-weight-medium);
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__label {
  max-width: var(--forms-value-label-max-width--large);
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__label .dnb-help-button__word-joiner {
  margin-left: 0.45em;
  white-space: nowrap;
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__label .dnb-help-button__word-joiner::before {
  content: "⁠";
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__label:empty {
  margin-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__help {
  display: flex;
  flex-flow: column;
}
.eufemia-scope--10_104_0 .dnb-card .dnb-forms-value-block__help {
  flex-grow: 1;
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__help .dnb-section {
  margin-bottom: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__help .dnb-section > .dnb-p--lead {
  margin-bottom: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__placeholder {
  color: var(--color-black-80);
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__content--max-width-stretch {
  width: 100%;
}
@media screen and (min-width: 25.00625em) {
  .eufemia-scope--10_104_0 .dnb-forms-value-block__content--max-width-small {
    max-width: var(--forms-value-width--small);
  }
  .eufemia-scope--10_104_0 .dnb-forms-value-block__content--max-width-medium {
    max-width: var(--forms-value-width--medium);
  }
  .eufemia-scope--10_104_0 .dnb-forms-value-block__content--max-width-large {
    max-width: var(--forms-value-width--large);
  }
}
.eufemia-scope--10_104_0 .dnb-forms-value-block span.dnb-height-animation {
  display: flex;
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  row-gap: var(--row-gap, var(--spacing-medium));
  column-gap: var(--column-gap, 0);
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-none {
  --column-gap: 0;
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-xx-small {
  --column-gap: var(--spacing-xx-small);
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-x-small {
  --column-gap: var(--spacing-x-small);
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-small {
  --column-gap: var(--spacing-small);
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-medium {
  --column-gap: var(--spacing-medium);
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-large {
  --column-gap: var(--spacing-large);
}
@media screen and (min-width: 25.00625em) {
  .eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content {
    align-items: flex-start;
  }
}
@media screen and (max-width: 25em) {
  .eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not(:has(.dnb-forms-value-block__label)) {
    --row-gap: var(--spacing-x-small);
    flex-flow: row wrap;
  }
  .eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content {
    flex-flow: column;
  }
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content {
  /* stylelint-disable */
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content > .dnb-dl, .eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not([class*=dnb-space]) > .dnb-dl {
  margin: 0;
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content > .dnb-dl > .dnb-dd, .eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not([class*=dnb-space]) > .dnb-dl > .dnb-dd {
  margin-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content .dnb-dt:empty ~ .dnb-dd {
  margin-top: 0;
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content {
  /* stylelint-enable */
}
.eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block {
  display: flex;
}
.eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__label:not(.dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__label__content) {
  margin-right: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block:not(.dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__label__content):has(> .dnb-forms-value-block__label:not(.dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content)):has(.dnb-forms-value-block__content) {
  flex-direction: row-reverse;
}
.eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block:not(.dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__label__content):has(> .dnb-forms-value-block__label:not(.dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content)):has(.dnb-forms-value-block__content) > .dnb-forms-value-block__label {
  margin-left: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content {
  /* stylelint-disable */
}
.eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content > .dnb-dl .dnb-forms-value-block__help .dnb-section, .eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not([class*=dnb-space]) > .dnb-dl .dnb-forms-value-block__help .dnb-section {
  margin-top: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content > .dnb-dl > .dnb-dt, .eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not([class*=dnb-space]) > .dnb-dl > .dnb-dt {
  display: inline;
}
.eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content > .dnb-dl > .dnb-dd, .eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not([class*=dnb-space]) > .dnb-dl > .dnb-dd {
  width: 100%;
}
.eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content {
  /* stylelint-enable */
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__help--next-line {
  display: flex;
  flex-basis: 100%;
}