/* ----------------------------------------------------------------------------
position: manipulate position across breakpoints
---------------------------------------------------------------------------- */

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

.h-screen {
	block-size: 100dvh;
}
.w-full {
	inline-size: 100%;
}
.w-max-content {
	inline-size: max-content;
}

.z-0 {
	z-index: var(--z-0);
}
.z-1 {
	z-index: var(--z-1);
}
.z-2 {
	z-index: var(--z-2);
}
.z-3 {
	z-index: var(--z-3);
}
.z-4 {
	z-index: var(--z-4);
}
.z-5 {
	z-index: var(--z-5);
}

.top-0 {
	inset-block-start: 0;
}
.left-0 {
	inset-inline-start: 0;
}
.right-0 {
	inset-inline-end: 0;
}
.bottom-0 {
	inset-block-end: 0;
}

.top-sm {
	inset-block-start: var(--space-sm);
}
.top-md {
	inset-block-start: var(--space-md);
}
.top-lg {
	inset-block-start: var(--space-lg);
}
.top-xl {
	inset-block-start: var(--space-xl);
}

@media (--sm) {
	.relative\@sm {
		position: relative;
	}
	.absolute\@sm {
		position: absolute;
	}
	.w-full\@sm {
		inline-size: 100%;
	}
}

@media (--md) {
	.relative\@md {
		position: relative;
	}
	.absolute\@md {
		position: absolute;
	}

	.sticky\@md {
		position: sticky;
	}
}
