@layer ed-utilities {
  /* Apply Flexbox with 0 specificity to ensure an align-items util produces a visible change */
  :where(
    .ed-align-items-start,
    .ed-align-items-end,
    .ed-align-items-center,
    .ed-align-items-stretch,
    .ed-align-items-baseline
  ) {
    display: flex;
  }

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

  .ed-align-items-start {
    align-items: flex-start;
  }
  .ed-align-items-end {
    align-items: flex-end;
  }
  .ed-align-items-center {
    align-items: center;
  }
  .ed-align-items-stretch {
    align-items: stretch;
  }
  .ed-align-items-baseline {
    align-items: baseline;
  }
  .ed-align-self-start {
    align-self: flex-start;
  }
  .ed-align-self-end {
    align-self: flex-end;
  }
  .ed-align-self-center {
    align-self: center;
  }
  .ed-align-self-stretch {
    align-self: stretch;
  }
  .ed-align-self-baseline {
    align-self: baseline;
  }
}