@layer ed-utilities {
  /* Apply Flexbox with 0 specificity to ensure a gap util produces a visible change */
  :where(
    .ed-gap-0,
    .ed-gap-4xs,
    .ed-gap-3xs,
    .ed-gap-2xs,
    .ed-gap-xs,
    .ed-gap-s,
    .ed-gap-m,
    .ed-gap-l,
    .ed-gap-xl,
    .ed-gap-2xl,
    .ed-gap-3xl,
    .ed-gap-4xl
  ) {
    display: flex;
  }

  .ed-gap-0 {
    gap: 0;
  }
  .ed-gap-4xs {
    gap: var(--ed-space-4xs);
  }
  .ed-gap-3xs {
    gap: var(--ed-space-3xs);
  }
  .ed-gap-2xs {
    gap: var(--ed-space-2xs);
  }
  .ed-gap-xs {
    gap: var(--ed-space-xs);
  }
  .ed-gap-s {
    gap: var(--ed-space-s);
  }
  .ed-gap-m {
    gap: var(--ed-space-m);
  }
  .ed-gap-l {
    gap: var(--ed-space-l);
  }
  .ed-gap-xl {
    gap: var(--ed-space-xl);
  }
  .ed-gap-2xl {
    gap: var(--ed-space-2xl);
  }
  .ed-gap-3xl {
    gap: var(--ed-space-3xl);
  }
  .ed-gap-4xl {
    gap: var(--ed-space-3xl);
  }
}