/**
 * OUTLIER PRIMITIVE
 * Based on Every Layout's Imposter
 * Creates positioned elements that overlay other content
 *
 * Features:
 * - Absolute positioning to center over positioning containers
 * - Transform-based centering (works with unknown dimensions)
 * - Supports fixed positioning via CSS variable
 * - Containment mode with configurable margins
 * - Logical properties for internationalization
 * - Overflow handling for constrained content
 *
 * Usage:
 * .outlier - Basic positioned overlay (centered)
 * .outlier[data-outlier="fixed"] - Fixed to viewport
 * .outlier.contain - Constrain size with overflow handling
 *
 * Example:
 * <div style="position: relative">
 *   <p>Background content</p>
 *   <div class="outlier">
 *     <p>Overlay content</p>
 *   </div>
 * </div>
 */

.outlier {
  position: var(--positioning, absolute);
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}

/* ========================================
   CONTAINMENT VARIANT
 * Constrain size and handle overflow
   ======================================== */

.outlier.contain {
  --margin: 0px;
  overflow: auto;
  max-inline-size: calc(100% - (var(--margin) * 2));
  max-block-size: calc(100% - (var(--margin) * 2));
}

/* ========================================
   DATA ATTRIBUTE VARIANTS
   Positioning configurations
   ======================================== */

/* Fixed positioning - relative to viewport */
.outlier[data-outlier="fixed"] {
  --positioning: fixed;
}

/* Containment with margin - space from edges */
.outlier[data-outlier-margin="tight"] {
  --margin: var(--s-1);
}

.outlier[data-outlier-margin="default"] {
  --margin: var(--s0);
}

.outlier[data-outlier-margin="loose"] {
  --margin: var(--s1);
}