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

@layer payload-default {
  .field-type.row {
    margin-bottom: 0;

    .row__fields {
      display: flex;
      flex-wrap: wrap;
      row-gap: calc(var(--base) * 0.8);

      > * {
        flex: 0 1 var(--field-width);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
      }

      // add margin if the row has children
      &:has(> *:nth-child(1)) {
        margin-bottom: var(--base);
      }

      // If there is more than one child, add inline-margins to space them out.
      &:has(> *:nth-child(2)) {
        margin-inline: calc(var(--base) / -4); // add negative margin to counteract the gap.

        > * {
          flex: 0 1 calc(var(--field-width) - var(--base) * 0.5);
          margin-inline: calc(var(--base) / 4);
        }
      }
    }

    @include mid-break {
      .row__fields {
        display: block;
        margin-left: 0;
        margin-right: 0;
        width: 100%;

        > * {
          margin-left: 0;
          margin-right: 0;
          width: 100% !important;
          padding-left: 0;
          padding-right: 0;
        }
      }
    }
  }
}