.dnb-forms-section {
  &-block {
    --block-outline-color: var(--token-color-stroke-neutral-subtle);
    --block-outline-width: var(--card-outline-width);

    &--error:has(.dnb-form-status--error):not(#{&}--variant-basic) {
      --block-outline-color: var(--token-color-stroke-error);
      --block-outline-width: 0.0625rem;
    }

    // Because we need to use "keepInDOM"
    &:not(.dnb-height-animation--hidden) {
      display: flex;
      flex-direction: column;
    }

    &__inner {
      flex: 1;
      outline: none; // Because of JavaScript focus management (tabIndex)

      transition:
        transform 400ms var(--easing-default) 50ms,
        box-shadow 0.8s var(--easing-default);
      transform: translateY(-2.5rem);

      .dnb-dl .dnb-dd {
        margin-bottom: 0;
      }
    }

    &--variant-basic {
      --border-color: transparent;
      --block-outline-color: transparent;
    }

    &--variant-filled &__inner {
      --space: var(--spacing-small);
      background-color: var(--token-color-background-neutral-alternative);
    }

    &--no-animation &__inner {
      transform: translateY(0);
    }

    &.dnb-height-animation--is-visible &__inner {
      transform: translateY(-0.5rem);
    }
    &.dnb-height-animation--parallax &__inner {
      transform: translateY(0);
    }

    .dnb-card,
    .dnb-card & .dnb-card {
      --card-outline-color: var(--block-outline-color);
      --card-outline-width: var(--block-outline-width);

      &--filled.dnb-section {
        // Reset the background color to our own color instead of the card's outline color
        --background-color: var(--token-color-background-neutral-subtle);
      }
    }
  }
}