@use "../../core/functions" as function;
@use "../../core/mixin" as mixin;

// Breakpoints
$alignment: (
	//flex position
	jcfs:
		(
			justify-content: flex-start,
		),
	jcfe: (
		justify-content: flex-end,
	),
	aifs: (
		align-items: flex-start,
	),
	acfs: (
		align-content: flex-start,
	),
	asfs: (
		align-self: flex-start,
	),
	aife: (
		align-items: flex-end,
	),
	acfe: (
		align-content: flex-end,
	),
	asfe: (
		align-self: flex-end,
	),
	//grid and flex position
	jcc:
		(
			justify-content: center,
		),
	jcsb: (
		justify-content: space-between,
	),
	jcse: (
		justify-content: space-evenly,
	),
	jcsa: (
		justify-content: space-around,
	),
	aibas: (
		align-items: baseline,
	),
	acbas: (
		align-content: baseline,
	),
	ais: (
		align-items: start,
	),
	acs: (
		align-content: start,
	),
	ass: (
		align-self: start,
	),
	aie: (
		align-items: end,
	),
	ace: (
		align-content: end,
	),
	ase: (
		align-self: end,
	),
	aic: (
		align-items: center,
	),
	acc: (
		align-content: center,
	),
	asc: (
		align-self: center,
	),
	//grid position
	jcs:
		(
			justify-content: start,
		),
	jce: (
		justify-content: end,
	),
	jsc: (
		justify-self: center,
	),
	jss: (
		justify-self: start,
	),
	jse: (
		justify-self: end,
	),
	jic: (
		justify-items: center,
	),
	jis: (
		justify-items: start,
	),
	jie: (
		justify-items: end,
	),
	//center text
	text-center:
		(
			text-align: center,
		),
	text-right: (
		text-align: end,
	),
	text-left: (
		text-align: start,
	),
	//center box
	center-cross:
		(
			margin-left: auto,
			margin-right: auto,
			width: max-content,
			display: block,
		),
	center-vertical: (
		// margin-top: auto,
		// margin-bottom: auto,
		position: relative,
		top: 50%,
		transform: translateY(-50%),
		/* or try 50% */
	),
	center-full: (
		margin-left: auto,
		margin-right: auto,
		width: max-content,
		position: relative,
		top: 50%,
		transform: translateY(-50%),
	),
	center-flex: (
		display: flex,
		justify-content: center,
		align-items: center,
	),
	center-grid: (
		display: grid,
		justify-content: center,
		align-items: center,
	)
);


@each $size in function.$sizes {
	@include mixin.from($size) {
		// @if $size !=s {
		// Recorre el mapa de selectores

		// Recorre el mapa de selectores
		@each $selector, $property in $alignment {
			// Construye el selector
			.#{$selector}-#{$size} {
				// Recorre el submapa de propiedades y valores
				@each $prop, $value in $property {
					// Imprime cada propiedad y valor
					#{$prop}: $value;
				}
			}
		}
	}
}

// Recorre el mapa de selectores
@each $selector, $property in $alignment {
	// Construye el selector
	.#{$selector} {
		// Recorre el submapa de propiedades y valores
		@each $prop, $value in $property {
			// Imprime cada propiedad y valor
			#{$prop}: $value;
		}
	}
}
// }