/* Defaults: any rule directly in ed-utilities wins (nested layer);
   :where() keeps them at zero specificity as a safety net. */
@layer ed-utilities.defaults {
  /* Not a dialog or popover: the user-agent margin: auto is what centers them. */
  [class*='ed-flank'] > :not(:where(dialog, [popover])) {
    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;

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

  /* The display above beats the user-agent [hidden] rule. until-found hides by content-visibility
     and keeps its box. */
  [class*='ed-flank'][hidden]:not([hidden='until-found' i]) {
    display: none;
  }

  [class*='ed-flank']:not([class*='\:end']) > :first-child,
  [class*='ed-flank'][class*='\:start'] > :first-child {
    flex-basis: var(--ed-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(--ed-flank-content-percentage, 50%);
  }

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