/* Defaults: any rule directly in ed-utilities wins (nested layer);
   :where() keeps them at zero specificity as a safety net. */
@layer ed-utilities.defaults {
  [class*='ed-flank'] > * {
    margin-block: 0;
    margin-inline: 0;
  }

  :where([class*='ed-flank']) {
    gap: var(--ed-space-4);
    align-items: center;
    flex-wrap: wrap;
  }
}

@layer ed-utilities {
  [class*='ed-flank'] {
    display: flex;

    --content-percentage: initial;
    --flank-size: initial;
  }

  [class*='ed-flank']:not([class*='\:end']) > :first-child,
  [class*='ed-flank'][class*='\:start'] > :first-child {
    flex-basis: var(--flank-size, auto);
    flex-grow: 1;
  }
  [class*='ed-flank']:not([class*='\:end']) > :last-child,
  [class*='ed-flank'][class*='\:start'] > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--content-percentage, 50%);
  }

  [class*='ed-flank'][class*='\:end'] > :last-child {
    flex-basis: var(--flank-size, auto);
    flex-grow: 1;
  }
  [class*='ed-flank'][class*='\:end'] > :first-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--content-percentage, 50%);
  }
}