/*
 * phaedo-util layout primitives.
 *
 * Layout values are passed in as custom properties on the element itself
 * (see Phaedo::Util::GridHelper and Phaedo::Util::FlexHelper) so that the
 * whole system is a handful of rules rather than a generated class per value.
 *
 * Each rule resets the properties it reads to `initial` first. Custom
 * properties inherit, so without this a nested container that was given no
 * options of its own would pick up its ancestor's columns, gap, or direction.
 * An inline style outranks these rules, so the reset only applies to elements
 * that were not given a value.
 */

.ut-grid {
  --ut-grid-cols: initial;
  --ut-grid-rows: initial;
  --ut-gap: initial;
  --ut-gap-sm: initial;
  --ut-gap-x: initial;
  --ut-gap-y: initial;

  display: grid;
  grid-template-columns: var(--ut-grid-cols, none);
  grid-template-rows: var(--ut-grid-rows, none);
  column-gap: var(--ut-gap-x, var(--ut-gap, 0));
  row-gap: var(--ut-gap-y, var(--ut-gap, 0));
}

.ut-flex {
  --ut-flex-direction: initial;
  --ut-flex-wrap: initial;
  --ut-gap: initial;
  --ut-gap-sm: initial;
  --ut-gap-x: initial;
  --ut-gap-y: initial;

  display: flex;
  flex-direction: var(--ut-flex-direction, row);
  flex-wrap: var(--ut-flex-wrap, nowrap);
  column-gap: var(--ut-gap-x, var(--ut-gap, 0));
  row-gap: var(--ut-gap-y, var(--ut-gap, 0));
}

/*
 * Gaps step down at the small breakpoint: --ut-gap carries the roomier
 * small-screen value and --ut-gap-sm the value the caller actually asked for.
 * Explicit column/row gaps are not responsive and win at every width.
 */
@media (min-width: 40rem) {
  .ut-grid,
  .ut-flex {
    column-gap: var(--ut-gap-x, var(--ut-gap-sm, var(--ut-gap, 0)));
    row-gap: var(--ut-gap-y, var(--ut-gap-sm, var(--ut-gap, 0)));
  }
}

/*
 * Only emitted when a grid item is actually placed, so that items without
 * placement options keep whatever the consuming app's own CSS gives them.
 */
.ut-grid-item {
  --ut-col-start: initial;
  --ut-col-end: initial;
  --ut-row-start: initial;
  --ut-row-end: initial;

  grid-column-start: var(--ut-col-start, auto);
  grid-column-end: var(--ut-col-end, auto);
  grid-row-start: var(--ut-row-start, auto);
  grid-row-end: var(--ut-row-end, auto);
}