@import "variables";
@import "breakpoints";
@import "mixins";

// Container widths
.container {
	@include make-container();
	@include make-container-max-widths();
}

// Fluid container
.container-fluid {
	@include make-container();

	// FIX conflict from float grid-system
	&:before,
	&:after {
		content: none;
	}
}

// Row
.row {
	@include make-row();

	// FIX conflict from float grid-system
	&:before,
	&:after {
		content: none;
	}
}

// Columns
@include make-grid-columns();

// Flex column reordering
@each $breakpoint in map-keys($grid-breakpoints) {
	@include media-breakpoint-up($breakpoint) {
		.col-#{$breakpoint}-first { order: -1; }
		.col-#{$breakpoint}-last { order: 1; }
	}
}

// Alignment for every column in row
@each $breakpoint in map-keys($grid-breakpoints) {
	@include media-breakpoint-up($breakpoint) {
		.row-#{$breakpoint}-top { align-items: flex-start; }
		.row-#{$breakpoint}-center { align-items: center; }
		.row-#{$breakpoint}-bottom { align-items: flex-end; }
	}
}

// Alignment per column
@each $breakpoint in map-keys($grid-breakpoints) {
	@include media-breakpoint-up($breakpoint) {
		.col-#{$breakpoint}-top { align-self: flex-start; }
		.col-#{$breakpoint}-center { align-self: center; }
		.col-#{$breakpoint}-bottom { align-self: flex-end; }
	}
}