$d-type: (
	flex: flex,
	block: block,
	none: none,
);

$flex-jc: (
	start: flex-start,
	end: flex-end,
	center: center,
	between: space-between,
	around: space-around,
);

$flex-ai: (
	start: flex-start,
	end: flex-end,
	center: center,
	stretch: stretch,
);

//spacing
$spacing-types: (
	m: margin,
	p: padding,
);

$spacing-directions: (
	t: top,
	r: right,
	b: bottom,
	l: left,
);

$spacing-base-size: 5px;

$spacing-sizes: (
	0: 0,
	1: 1,
	2: 2,
	3: 3,
	4: 4,
	5: 5,
);

@each $key, $value in $d-type {
	.d-#{$key} {
		display: $value;
	}
}

.flex-column {
	flex-direction: column;
}

.text-ellipsis {
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.w-100 {
	width: 100%;
}

.h-100 {
	height: 100%;
}

.flex-wrap {
	flex-wrap: wrap;
}

.flex-grow-1 {
	flex: 1;
}

@each $dir in(top, bottom, right, left) {
	.border-#{$dir} {
		border-#{$dir}: 1px solid;
	}
}

@each $key, $value in $flex-jc {
	.jc-#{$key} {
		justify-content: $value;
	}
}

@each $key, $value in $flex-ai {
	.ai-#{$key} {
		align-items: $value;
	}
}
//text
@each $var in (left, center, right) {
	.text-#{$var} {
		text-align: $var !important;
	}
}

@each $typeKey, $type in $spacing-types {
	@each $sizeKey, $size in $spacing-sizes {
		.#{$typeKey}-#{$sizeKey} {
			#{$type}: $size * $spacing-base-size;
		}
	}

	@each $sizeKey, $size in $spacing-sizes {
		.#{$typeKey}x-#{$sizeKey} {
			#{$type}-left: $size * $spacing-base-size;
			#{$type}-right: $size * $spacing-base-size;
		}

		.#{$typeKey}y-#{$sizeKey} {
			#{$type}-top: $size * $spacing-base-size;
			#{$type}-bottom: $size * $spacing-base-size;
		}
	}

	@each $directionKey, $direction in $spacing-directions {
		@each $sizeKey, $size in $spacing-sizes {
			.#{$typeKey}#{$directionKey}-#{$sizeKey} {
				#{$type}-#{$direction}: $size * $spacing-base-size;
			}
		}
	}
}