src/static/style/_helperClasses.scss
// use these classes for quick styling without writing custom css

.flex { display: flex }
.f-direction-row { flex-direction: row }
.f-direction-column { flex-direction: column }
.f-justify-center { justify-content: center }
.f-align-center { align-items: center }

.w100 { width: 100% }
.h100 { height: 100% }
.wh100 { width: 100%; height: 100% }

.mta { margin-top: auto }
.mra { margin-right: auto }
.mba { margin-top: auto }
.mla { margin-left: auto }
.mlra { margin-left: auto; margin-right: auto }
.mrla { margin-left: auto; margin-right: auto }
.mtba { margin-top: auto; margin-bottom: auto }
.mbta { margin-top: auto; margin-bottom: auto }
.ma { margin: auto }

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

.center-h-alt { margin-left: 50%; transform: translateX(-50%) }
.center-v-alt { margin-top: 50%; transform: translateY(-50%) }
.center-alt { margin-top: 50%; margin-left: 50%; transform: translateX(-50%) translateY(-100%) }

.top0 { top: 0 }
.right0 { right: 0 }
.left0 { left: 0 }
.bottom0 { bottom: 0 }

.hidden { display: none !important }
.hide { display: none !important }

.overflow-hide { overflow: hidden }
.overflow-x-hide { overflow-x: hidden }
.overflow-y-hide { overflow-y: hidden }
.overflow-auto { overflow: auto }
.overflow-x-auto { overflow-x: auto }
.overflow-y-auto { overflow-y: auto }

.no-select { user-select: none }

.aspect-ratio-16-9-wrapper {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;

	> * {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
}

.debug1 { border: 1px dotted lightcoral !important }
.debug2 { border: 1px dotted lightblue !important }
.debug3 { border: 1px dotted lightgreen !important }
.debugPixel {
	--x: 0;
	--y: 0;

	&::after {
		content: "";
		position: absolute;
		left: calc(var(--x) * 1px);
		top: calc(var(--y) * 1px);
		width: 2px;
		height: 2px;
		background: red;
	}
}
