@import '../../../style/core/utilities.scss';

.dnb-card {
  &__heading {
    font-size: var(--font-size-basis);
    font-weight: var(--font-weight-medium);
  }

  & + &__heading {
    margin-top: var(--spacing-small);
  }

  &__title {
    padding-bottom: 1rem;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
  }
  &:not([style*='--space-']) &__title {
    padding: 1rem;
  }

  &.dnb-section {
    // Fallback
    background-color: var(--background-color);
  }

  & .dnb-section {
    z-index: 1;
  }
  @include allAbove(small) {
    // These vars needs to be declared outside of the nested .dnb-section
    --nested-space-l: calc(var(--padding-left, 0px) * -1);
    --nested-space-r: calc(var(--padding-right, 0px) * -1);
    & .dnb-section::after {
      --left: var(--nested-space-l);
      --width: calc(100% - var(--nested-space-r) * 2);
    }
  }

  &--filled#{&}.dnb-section {
    --background-color: var(--outline-color);
  }

  &--responsive {
    @include allBelow(small) {
      &.dnb-section::before {
        left: var(--left);

        --outline: 99vw 0 0 0 var(--background-color),
          198vw 0 0 0 var(--background-color),
          297vw 0 0 0 var(--background-color),
          396vw 0 0 0 var(--background-color),
          0 var(--outline-width) 0 0 var(--outline-color),
          99vw var(--outline-width) 0 0 var(--outline-color),
          0 calc(var(--outline-width) * -1) 0 0 var(--outline-color),
          99vw calc(var(--outline-width) * -1) 0 0 var(--outline-color),
          198vw var(--outline-width) 0 0 var(--outline-color),
          198vw calc(var(--outline-width) * -1) 0 0 var(--outline-color);
      }
    }
  }

  // Show only one border (combined) when stacked
  & + .dnb-card--responsive:not([class*='space__top']) {
    @include allBelow(small) {
      &::before {
        top: var(--outline-width);
      }
      background: linear-gradient(
          to left,
          var(--background-color),
          var(--background-color)
        )
        no-repeat 0 var(--outline-width); // with an offset
    }
  }

  // Combine the two borders to one
  .dnb-flex-container.dnb-flex-container--divider-space
    &
    + .dnb-card--responsive {
    @include allBelow(small) {
      margin-top: 0;

      &::before {
        top: var(--outline-width); // align background and outline
        z-index: 0;
        background-color: transparent; // because we inherit the background-color when "outset" is set – but we don't want that in this case
      }
    }
  }

  // Make the ScrollView scrollable
  & .dnb-flex-container:has(> .dnb-card__title + .dnb-scroll-view) {
    align-items: stretch;
    flex-wrap: nowrap;
  }

  // Make the ScrollView look nice
  &--filled .dnb-scroll-view {
    clip-path: inset(
      0 0 0 0 round var(--rounded-corner) var(--rounded-corner)
        var(--rounded-corner) var(--rounded-corner)
    );
  }

  & > .dnb-flex-container > .dnb-space:has(> .dnb-scroll-view) {
    width: 100%;
  }

  & > .dnb-flex-container--align-stretch > .dnb-button {
    align-self: flex-start;
  }

  &[style*='--outset'] {
    &.dnb-space[style]:not(.dnb-card) {
      padding-left: calc(var(--padding-left) * calc(1 - var(--outset)));
      padding-right: calc(var(--padding-right) * calc(1 - var(--outset)));
    }
    &.dnb-card > .dnb-flex-container {
      margin-left: calc(
        var(--padding-left, var(--spacing-medium)) * -1 * var(--outset)
      );
      margin-right: calc(
        var(--padding-right, var(--spacing-medium)) * -1 * var(--outset)
      );
    }
  }
}

.dnb-card--auto-indent:has(
  + .dnb-card,
  + * + .dnb-card,/* e.g. one paragraph */
  + * + * + .dnb-card,/* e.g. two paragraphs */
  + .dnb-help-button__content + .dnb-section + .dnb-card
) {
  &:not([class*='space__bottom']) {
    margin-bottom: var(--spacing-small);
  }
}

// Deprecated – can be removed in v11 (its handled by the outset prop)
.dnb-card--auto-indent:has(
  + .dnb-card:not([style*='--outset']),
  + * + .dnb-card:not([style*='--outset']),/* e.g. one paragraph */
  + * + * + .dnb-card:not([style*='--outset']),/* e.g. two paragraphs */
  + .dnb-help-button__content + .dnb-section + .dnb-card:not([style*='--outset'])
) {
  &:not([class*='space__left']) {
    @include allAbove(small) {
      margin-left: var(--spacing-medium);
    }
  }
}