metabuilder/scss/global/_position.scss

// Position utility classes - Layout utilities

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.static { position: static; }

// Inset utilities
.inset-0 { inset: 0; }
.inset-auto { inset: auto; }
.inset-x-0 { left: 0; right: 0; }
.inset-y-0 { top: 0; bottom: 0; }

// Individual position
.top-0 { top: 0; }
.top-auto { top: auto; }
.right-0 { right: 0; }
.right-auto { right: auto; }
.bottom-0 { bottom: 0; }
.bottom-auto { bottom: auto; }
.left-0 { left: 0; }
.left-auto { left: auto; }

// Common positioning patterns
.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.absolute-y-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.absolute-x-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

// Cover entire parent
.absolute-fill {
  position: absolute;
  inset: 0;
}

.fixed-fill {
  position: fixed;
  inset: 0;
}

// Z-index utilities
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-auto { z-index: auto; }