/**
 * CLUSTER PRIMITIVE
 * Based on Every Layout's Cluster
 * Creates flexible wrapping layouts for groups of elements
 *
 * Features:
 * - Flexbox-based layout with wrapping
 * - Consistent gap spacing between elements
 * - Configurable alignment and justification
 * - Ideal for buttons, tags, and navigation elements
 *
 * Usage:
 * .cluster - Basic cluster with default spacing
 * .cluster[data-cluster="spread"] - Distribute items to edges
 * .cluster[data-cluster="center"] - Center align items
 */

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--space, 1rem));
  justify-content: flex-start;
  align-items: center;
}

/* ========================================
   DATA ATTRIBUTE VARIANTS
   Alignment configurations
   ======================================== */

/* Center alignment - horizontally and vertically */
.cluster[data-cluster="center"] {
  justify-content: center;
  align-items: center;
}

/* Spread items to edges - useful for headers */
.cluster[data-cluster="spread"] {
  justify-content: space-between;
  align-items: center;
}

/* Distribute evenly with space around */
.cluster[data-cluster="distribute"] {
  justify-content: space-around;
  align-items: center;
}

/* Distribute evenly with space evenly */
.cluster[data-cluster="evenly"] {
  justify-content: space-evenly;
  align-items: center;
}

/* Align to start */
.cluster[data-cluster="start"] {
  justify-content: flex-start;
  align-items: flex-start;
}

/* Align to end */
.cluster[data-cluster="end"] {
  justify-content: flex-end;
  align-items: flex-end;
}

/* Baseline alignment for text elements */
.cluster[data-cluster="baseline"] {
  align-items: baseline;
}