.dnb-forms-section {
  &-block {
    --block-outline-color: var(--outline-color, var(--color-lavender));
    &--error:has(.dnb-form-status--error) {
      --block-outline-color: var(--color-fire-red);
    }

    // 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;
      .dnb-card,
      .dnb-card & .dnb-card {
        --card-outline-color: transparent;
      }
    }

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

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

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