@import '../../../../style/core/utilities.scss';
@import '../../Value/style/value-sizes.scss';

.dnb-forms-summary-list.dnb-dl {
  &:not(.dnb-dl__layout--horizontal) {
    & .dnb-dt,
    & > .dnb-dd > .dnb-dl,
    &:not([class*='dnb-space']) > .dnb-dd > .dnb-dl {
      margin: 0;
    }

    .dnb-dt:empty,
    .dnb-dd:empty {
      display: none;
    }

    &:not(.dnb-dl__layout--grid) > .dnb-dd {
      margin-bottom: var(--spacing-medium);

      // Add support for using animated Form.Visibility in a SummaryList (VisibilityWrapper).
      transition: margin-bottom 300ms var(--easing-default);

      &:last-of-type,
      &:has(~ .dnb-dt:empty ~ .dnb-dd:empty) {
        margin-bottom: 0;
      }
    }
  }
}

.dnb-forms-value-block {
  display: block;
  font-size: var(--font-size-basis);

  &:not(#{&}__composition--horizontal) &__content {
    display: block;
  }

  &--inline:not([class*='__composition']) {
    display: inline-block;
    font-size: inherit;
  }

  &__label,
  &__label strong {
    font-weight: var(--font-weight-medium);
  }
  &__label {
    max-width: var(--forms-value-label-max-width--large);

    & strong:has(+ .dnb-help-button),// To support dt > strong or dt > span > strong
    &__content:has(+ .dnb-help-button) {
      margin-right: 0.5rem;
    }
  }
  &__label:empty {
    // Make it possible to omit labels in a SummaryList with a horizontal/grid layout that has a label
    margin-bottom: 0;
  }

  &__help {
    display: flex;
    flex-flow: column;

    .dnb-card & {
      // Make it possible so that &__help--next-line wraps to a new line
      flex-grow: 1;
    }

    .dnb-section {
      margin-bottom: 0.5rem;

      & > .dnb-p--lead {
        margin-bottom: 0.5rem;
      }
    }
  }

  &__placeholder {
    color: var(--color-black-80);
  }

  &__content#{&}--max-width {
    &-stretch {
      width: 100%;
    }
    @include allAbove(x-small) {
      &-small {
        max-width: var(--forms-value-width--small);
      }
      &-medium {
        max-width: var(--forms-value-width--medium);
      }
      &-large {
        max-width: var(--forms-value-width--large);
      }
    }
  }

  // WHen used in a SummaryList, the height-animation will be a span,
  // so we need display: block or flex to make it work.
  span.dnb-height-animation {
    display: flex;
  }

  // Composition block
  &__composition--horizontal &__content {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    row-gap: var(--row-gap, var(--spacing-medium));
    column-gap: var(--column-gap, 0);

    &--gap-none {
      --column-gap: 0;
    }
    &--gap-xx-small {
      --column-gap: var(--spacing-xx-small);
    }
    &--gap-x-small {
      --column-gap: var(--spacing-x-small);
    }
    &--gap-small {
      --column-gap: var(--spacing-small);
    }
    &--gap-medium {
      --column-gap: var(--spacing-medium);
    }
    &--gap-large {
      --column-gap: var(--spacing-large);
    }

    @include allAbove(x-small) {
      align-items: flex-start;
    }
    @include allBelow(x-small) {
      &:not(:has(.dnb-forms-value-block__label)) {
        --row-gap: var(--spacing-x-small);
        flex-flow: row wrap;
      }
      flex-flow: column;
    }

    /* stylelint-disable */
    & > .dnb-dl,
    &:not([class*='dnb-space']) > .dnb-dl {
      margin: 0;

      & > .dnb-dd {
        margin-bottom: 0;
      }
    }
    & .dnb-dt:empty ~ .dnb-dd {
      // Make it possible to omit labels in a SummaryList with a horizontal/grid layout that has a label
      margin-top: 0;
    }
    /* stylelint-enable */
  }

  // Composition block in a SummaryList
  // Composition block with horizontal layout in a SummaryList and no label
  .dnb-forms-summary-list &__composition--horizontal & {
    // Make it possible to reverse the order of the label and help button
    display: flex;

    &__label {
      &:not(&__content) {
        margin-right: 0.5rem;
      }
    }

    // For a composition block with horizontal layout in a SummaryList and no label,
    // the help button should be on the end of the content.
    &:not(&__label__content):has(
        > .dnb-forms-value-block__label:not(&__content)
      ):has(.dnb-forms-value-block__content) {
      flex-direction: row-reverse;

      > .dnb-forms-value-block__label {
        margin-left: 0.5rem;
      }
    }
  }
  .dnb-forms-summary-list &__composition--horizontal &__content {
    /* stylelint-disable */
    & > .dnb-dl,
    &:not([class*='dnb-space']) > .dnb-dl {
      .dnb-forms-value-block__help .dnb-section {
        margin-top: 0.5rem;
      }

      // To ensure the help button is always on the same line as the label
      & > .dnb-dt {
        display: inline;
      }
      & > .dnb-dd {
        // Ensure help content stretches in width
        width: 100%;
      }
    }
    /* stylelint-enable */
  }

  &__help--next-line {
    display: flex;
    flex-basis: 100%; // Ensure the help content is wrapped to a new line
  }
}