@import '../../scss/styles.scss';

.render-fields {
  --spacing-field: var(--base);

  &--margins-small {
    --spacing-field: var(--base);
  }

  &--margins-none {
    --spacing-field: 0;
  }

  & > .field-type {
    margin-bottom: var(--spacing-field);

    &[type='hidden'] {
      margin-bottom: 0;
    }

    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  // at the top-level, add extra margins for the following field types
  &:not(.render-fields--margins-small) {
    & > .field-type {
      &.group-field,
      &.blocks-field,
      &.array-field,
      &.collapsible-field,
      &.rich-text {
        margin-top: calc(var(--spacing-field) * 2);
        margin-bottom: calc(var(--spacing-field) * 2);

        &:first-child {
          margin-top: 0;
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  @include small-break {
    --spacing-field: calc(var(--base) / 2);
  }
}
