.dui__container {
	min-width: 0;
	width: 100%;
	margin: 0 auto;
	&--fluid {
		min-width: 0;
		max-width: 100%;
		width: 100%;
	}
}

//FLEX GRID UTIL CLASSES
@mixin flexGrid() {
	display: flex;

	@each $name, $option in $spacingOptions {
		&.dui__flex--sx-#{$name} {
			&:not(.dui__flex--no-negative) {
				margin-left: -#{$option};
				margin-right: -#{$option};
			}
			& > .dui__flex__col {
				padding-left: $option;
				padding-right: $option;
			}
		}
		&.dui__flex--sy-#{$name} {
			&:not(.dui__flex--no-negative) {
				margin-top: -#{$option};
				margin-bottom: -#{$option};
			}
			& > .dui__flex__col {
				padding-top: $option;
				padding-bottom: $option;
			}
		}
	}

	@each $breakpointName, $breakpointSize in $breakpoints {
		@each $name, $option in $spacingOptions {
			&.dui__flex--sx-#{$breakpointName}-#{$name} {
				@media all and (min-width: $breakpointSize) {
					&:not(.dui__flex--no-negative) {
						margin-left: -#{$option};
						margin-right: -#{$option};
					}
					& > .dui__flex__col {
						padding-left: $option;
						padding-right: $option;
					}
				}
			}
			&.dui__flex--sy-#{$breakpointName}-#{$name} {
				@media all and (min-width: $breakpointSize) {
					&:not(.dui__flex--no-negative) {
						margin-top: -#{$option};
						margin-bottom: -#{$option};
					}
					& > .dui__flex__col {
						padding-top: $option;
						padding-bottom: $option;
					}
				}
			}
		}
	}
}

@mixin flexGridCol() {
	flex: 1 1 auto;
	max-width: 100%;

	@for $i from 1 through $gridColumns {
		&.col--#{$i} {
			flex: 0 0 $gridColumnWidth * $i;
		}
		&.offset--#{$i} {
			margin-left: $gridColumnWidth * $i;
		}
		&.offsetRight--#{$i} {
			margin-right: $gridColumnWidth * $i;
		}
	}

	&.col--reset {
		flex: 1 1 auto;
	}
	&.col--auto {
		flex: 0 0 auto;
	}
	&.offset--auto {
		margin-left: auto;
	}
	&.offsetRight--auto {
		margin-right: auto;
	}

	@each $breakpointName, $breakpointSize in $breakpoints {
		@for $i from 1 through $gridColumns {
			&.col--#{$breakpointName}--#{$i} {
				@media all and (min-width: $breakpointSize) {
					flex: 0 0 $gridColumnWidth * $i;
				}
			}
			&.offset--#{$breakpointName}--#{$i} {
				@media all and (min-width: $breakpointSize) {
					margin-left: $gridColumnWidth * $i;
				}
			}
			&.offsetRight--#{$breakpointName}--#{$i} {
				@media all and (min-width: $breakpointSize) {
					margin-right: $gridColumnWidth * $i;
				}
			}
		}

		&.col--#{$breakpointName}--reset {
			@media all and (min-width: $breakpointSize) {
				flex: 1 1 auto;
			}
		}
		&.col--#{$breakpointName}--auto {
			@media all and (min-width: $breakpointSize) {
				flex: 0 0 auto;
			}
		}
		&.offset--#{$breakpointName}--auto {
			@media all and (min-width: $breakpointSize) {
				margin-left: auto;
			}
		}
		&.offsetRight--#{$breakpointName}--auto {
			@media all and (min-width: $breakpointSize) {
				margin-right: auto;
			}
		}
	}
}

.dui__flex {
	@include flexGrid();

	&__col {
		@include flexGridCol();
	}
}

//SPACING UTIL CLASSES
$axes: (
	"x": (
		"name": "x",
		"prop1": left,
		"prop2": right,
	),
	"y": (
		"name": "y",
		"prop1": top,
		"prop2": bottom,
	),
);

@mixin spacingClass($classKey, $name, $dir, $rule, $spacingSize) {
	@each $sizeCode, $size in $spacingSize {
		$axesKeys: map-keys($axes);
		@each $key in $axesKeys {
			$axisName: map-deep-get($axes, $key, "name");
			$prop1: map-deep-get($axes, $key, "prop1");
			$prop2: map-deep-get($axes, $key, "prop2");
			.#{$classKey}#{$axisName}--#{$sizeCode} {
				#{$rule}-#{$prop1}: $size !important;
				#{$rule}-#{$prop2}: $size !important;
			}

			@each $breakpointName, $breakpointSize in $breakpoints {
				.#{$classKey}#{$axisName}--#{$breakpointName}--#{$sizeCode} {
					@media all and (min-width: $breakpointSize) {
						#{$rule}-#{$prop1}: $size !important;
						#{$rule}-#{$prop2}: $size !important;
					}
				}
			}
		}
	}

	@each $sizeCode, $size in $spacingSize {
		.#{$classKey}--#{$sizeCode} {
			#{$rule}: $size !important;
		}
		.#{$classKey}#{$name}--#{$sizeCode} {
			#{$rule}-#{$dir}: $size !important;
		}
	}

	@each $breakpointName, $breakpointSize in $breakpoints {
		@each $sizeCode, $size in $spacingSize {
			.#{$classKey}--#{$breakpointName}--#{$sizeCode} {
				@media all and (min-width: $breakpointSize) {
					#{$rule}: $size !important;
				}
			}
			.#{$classKey}#{$name}--#{$breakpointName}--#{$sizeCode} {
				@media all and (min-width: $breakpointSize) {
					#{$rule}-#{$dir}: $size !important;
				}
			}
		}
	}
}

@each $name, $dir in $spacingDir {
	//padding
	@include spacingClass("p", $name, $dir, padding, $paddingSpacingSize);
	//margin
	@include spacingClass("m", $name, $dir, margin, $marginSpacingSize);
}

//DISPLAY UTIL CLASSES
$display: (
	"block": block,
	"inblock": inline-block,
	"flex": flex,
	"inflex": inline-flex,
	"grid": grid,
	"ingrid": inline-grid,
	"in": inline,
	"table": table,
	"tcell": table-cell,
	"trow": table-cell,
	"initial": initial,
	"unset": unset,
	"none": none,
);

@each $name, $display in $display {
	.d--#{$name} {
		display: $display;
	}
}

@each $breakpointName, $breakpointSize in $breakpoints {
	@each $name, $display in $display {
		.d--#{$breakpointName}--#{$name} {
			@media all and (min-width: $breakpointSize) {
				display: $display;
			}
		}
	}
}

//PIGMENT UTIL CLASSES
$pigmentKeys: map-keys($pigments);
@each $key in $pigmentKeys {
	$name: map-deep-get($pigments, $key, "name");
	$bgColor: map-deep-get($pigments, $key, "bgColor");
	$fontColor: map-deep-get($pigments, $key, "fontColor");
	.bg--#{$name} {
		background: $bgColor !important;
	}
	.bgtext--#{$name} {
		color: $fontColor !important;
	}
	.text--#{$name} {
		color: $bgColor !important;
	}
}

@each $breakpointName, $breakpointSize in $breakpoints {
	@each $key in $pigmentKeys {
		$name: map-deep-get($pigments, $key, "name");
		$bgColor: map-deep-get($pigments, $key, "bgColor");
		$fontColor: map-deep-get($pigments, $key, "fontColor");
		.bg--#{$breakpointName}--#{$name} {
			@media all and (min-width: $breakpointSize) {
				background: $bgColor !important;
			}
		}
		.bgtext--#{$breakpointName}--#{$name} {
			@media all and (min-width: $breakpointSize) {
				color: $fontColor !important;
			}
		}
		.text--#{$breakpointName}--#{$name} {
			@media all and (min-width: $breakpointSize) {
				color: $bgColor !important;
			}
		}
	}
}

//SIZING UTIL CLASSES
$sizing: (
	"0": 0,
	"25": 25%,
	"50": 50%,
	"75": 75%,
	"100": 100%,
	"auto": auto,
);

@each $name, $size in $sizing {
	.w--#{$name} {
		width: $size !important;
	}
	.maxw--#{$name} {
		max-width: $size !important;
	}
	.h--#{$name} {
		height: $size !important;
	}
}

@each $breakpointName, $breakpointSize in $breakpoints {
	@each $name, $size in $sizing {
		.w--#{$breakpointName}--#{$name} {
			@media all and (min-width: $breakpointSize) {
				width: $size !important;
			}
		}
		.maxw--#{$breakpointName}--#{$name} {
			@media all and (min-width: $breakpointSize) {
				max-width: $size !important;
			}
		}
		.h--#{$breakpointName}--#{$name} {
			@media all and (min-width: $breakpointSize) {
				height: $size !important;
			}
		}
	}
}

//OVERFLOW HIDDEN
.no-overflow {
	overflow: hidden !important;
}

//RIPPLE EFFECT
.dui__ripple {
	position: absolute;
	pointer-events: none;
	border-radius: 50%;
	transform: scale(0);
	animation: ripple $rippleTransTime $rippleTransEase;
	background-color: rgba($subFont, 0.2);
}

@keyframes ripple {
	to {
		transform: scale(2.5);
		opacity: 0;
	}
}

//ICON ADJUSTMENTS
.dui__icon {
	height: 1.15em;
	width: 1.15em;
	transform: translateY(0.15em);
}

.clickable {
	cursor: pointer !important;
}