/*
*
* Grid modules
*/

//
// Grid demonstration
//
.grid-demonstration {
	$grid-heading: unquote("h5, .heading-5");
	padding: 12px 8px;
	text-align: left;
	color: $gray-1;

	h5 {
		font-family: $font-family-base;
		font-weight: 400;
		letter-spacing: .05em;
		font-size: 20px;
	}

	@include media-breakpoint-down(lg) {
		h5 {
			font-size: 20px;
		}
	}

	@include media-breakpoint-down(xl) {
		[class*='col'] p {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
}

.container-fluid.grid-demonstration {
	@include media-breakpoint-down(md) {
		.row {
			margin-left: 0;
			margin-right: 0;
		}
	}

	[class^='col'] {
		padding: 5px;
		@include media-breakpoint-down(md) {
			p {
				font-size: 14px;
			}

			* + p {
				margin-top: 10px;
			}
		}

		@include media-breakpoint-up(md) {
			padding: 15px 10px;
		}

		@include media-breakpoint-up(lg) {
			padding: 25px 15px;
		}

		@include media-breakpoint-up(xl) {
			padding: 30px 15px 30px 30px;
		}

		@include media-breakpoint-up(xxl) {
			padding: 50px 95px;

			* + p {
				margin-top: 24px;
			}
		}
	}

	.row {
		@include media-breakpoint-up(xxl) {
			margin-left: -70px;
			margin-right: -70px;
		}
	}
}

//
// Grid system bordered
//
.grid-system-bordered {
	[class*='col'] {
		padding-top: 15px;
		padding-bottom: 15px;
	}

	.row + .row {
		margin-top: 0;
	}
	
	.row {
		border-bottom: 1px solid $gray-200;
	}

	@include media-breakpoint-up(md) {
		[class*='col'] {
			padding-top: 25px;
			padding-bottom: 25px;
		}
	}

	@include media-breakpoint-up(xl) {
		[class*='col'] {
			padding-top: 45px;
			padding-bottom: 45px;
		}
	}
}

//
// Grid system outline
//
.grid-system-outline {
	.row {
		border: 1px solid $gray-200;

		&:not(:last-child) {
			border-bottom-width: 0;
		}
	}

	[class*='col']:not(:last-child) {
		border-right: 1px solid $gray-200;
		margin-right: -1px;
	}

	* + .row {
		margin-top: 45px;
	}
	.row + .row {
		margin-top: 0;
	}
}

.row-flex {
	> [class*='col'] {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: stretch;

		> * {
			flex-grow: 1;
			flex-shrink: 0;
		}
	}
}

.row-decoration-1 {
	position: relative;
	
	.col-6 {
		position: relative;
		
		&::after {
			content: '';
			position: absolute;
			right: 0;
			top: 50%;
			transform: translate3d(0, -50%, 0);
			width: 1px;
			height: 100px;
			max-height: 100%;
			background: $gray-10;
		}
	}
	
	@include media-breakpoint-down(sm) {
	   .col-6:nth-child(even) {
			 &::after {
				 display: none;
			 }
		 }
	}
	
	@include media-breakpoint-up(md) {
		.col-6:nth-child(4n) {
			&::after {
				display: none;
			}
		}
	}
}

.row-decoration-1-corner {
	display: none;
}

@include media-breakpoint-up(lg) {
	.row-decoration-1 {
		padding: 45px 0 35px;
	}
	
	.row-decoration-1-corner {
		display: block;
		&::before,
		&::after {
			content: '';
			position: absolute;
			border: 2px solid $gray-10;
			width: 34px;
			height: 34px;
		}

		&_top {
			&::before,
			&::after {
				top: 0;
				border-bottom: 0;
			}

			&::before {
				left: 15px;
				border-right: 0;
			}

			&::after {
				right: 15px;
				border-left: 0;
			}
		}

		&_bottom {
			&::before,
			&::after {
				bottom: 0;
				border-top: 0;
			}

			&::before {
				left: 15px;
				border-right: 0;
			}

			&::after {
				right: 15px;
				border-left: 0;
			}
		}
	} 
}


.row-x-20 {
	margin-left: -10px;
	margin-right: -10px;

	> [class*='col'] {
		padding-left: 10px;
		padding-right: 10px;
	}
}

// Custom Grid
//
// Change $enable-grid-classes-custom: true
// that would generate custom grid (example: 10 columns)

$enable-grid-classes-custom: false;

@mixin make-grid-columns-custom($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
	@each $breakpoint in map-keys($breakpoints) {
		$infix: breakpoint-infix($breakpoint, $breakpoints);

		@include media-breakpoint-up($breakpoint, $breakpoints) {
			@for $i from 1 through $columns {
				.col#{$infix}-#{$i} {
					@include make-col($i, $columns);
				}
			}
		}
	}
}

@if $enable-grid-classes-custom {
	.row-ten {
		@include make-grid-columns-custom(10);
	}

	.row-xl-ten {
		@include make-grid-columns-custom(10, 30px, (xl: map-get($grid-breakpoints, xl), xlg: map-get($grid-breakpoints, xlg), xxl: map-get($grid-breakpoints, xxl)));
	}
}

.container-wide {
	@include media-breakpoint-up(xl) {
		max-width: 100%;
	}
	@media (min-width: 1800px) {
		max-width: 1800px;
	}
}

.container-fluid {
	max-width: 100%;
}

// Custom
.col-bordered {
	@include media-breakpoint-up(xl) {
		position: relative;
		&::before,
		&::after {
			content: '';
			position: absolute;
			top: 12px;
			bottom: 12px;
			width: 1px;
		}

		&::before {
			left: ((-130 + 15)/2)  * 1px;
			border-left: 1px solid $primary;
		}

		&::after {
			right: ((-130 + 15) / 2) * 1px;
			border-right: 1px solid $primary;
		}
	}
}

.bg-gray-31 {
	.col-bordered {
		&::before,
		&::after {
			border-color: $gray-30;
		}
	}
}


//
// Range Grid System
//
.range {
	display: flex;
	flex-wrap: wrap;
}

.cell-inner {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
}

.range > [class*='cell'] {
	position: relative;
	width: 100%;
	min-height: 1px;

	& > .row {
		margin: 0;
	}

	&.container {
		padding: 0;
	}
}

.range > [class*='col'] { padding: 0; }

@mixin cell($breakpoint, $columns, $diff: 0) {
	flex: 0 0 #{grid-parameter($breakpoint, $columns, $diff)};
	max-width: #{grid-parameter($breakpoint, $columns, $diff)};
}

@mixin cell-inner($breakpoint, $columns, $diff: 0) {
	max-width: map-get($container-max-widths, $breakpoint) / 12 * $columns + $diff;
}

@include media-breakpoint-up(sm) {
	.cell-sm-6 {
		@include cell(sm, 6);

		.cell-inner {
			@include cell-inner(sm, 6);
		}
	}

	.range > [class*='cell-sm']:nth-child(odd) {
		.cell-inner { margin-left: auto; }
	}

	.range.flex-sm-row-reverse {
		> [class*='cell-sm'] {
			&:nth-child(odd) .cell-inner { margin-left: 0; }
			&:nth-child(even) .cell-inner { margin-left: auto; }
		}
	}

	.range > [class*='cell-sm'].container {
		margin: 0;
	}
}

@include media-breakpoint-up(md) {
	.range > [class*='cell-md']:nth-child(odd) {
		.cell-inner { margin-left: auto; }
	}

	.range.flex-md-row-reverse {
		> [class*='cell-md'] {
			&:nth-child(odd) .cell-inner { margin-left: 0; }
			&:nth-child(even) .cell-inner { margin-left: auto; }
		}
	}

	.range > [class*='cell-md'].container {
		margin: 0;
	}

	.cell-md-5 {
		@include cell(md, 5);

		.cell-inner {
			@include cell-inner(md, 5);
		}
	}

	.cell-md-6 {
		@include cell(md, 6);

		.cell-inner {
			@include cell-inner(md, 6);
		}
	}
}

@include media-breakpoint-up(lg) {
	[class*='cell-lg'] > .row > [class*='col'] {
		flex-basis: 100%;
	}

	.cell-lg-6 {
		@include cell(lg, 6);

		.cell-inner {
			@include cell-inner(lg, 6);
		}
	}

	.range > [class*='cell-lg']:nth-child(odd) {
		.cell-inner { margin-left: auto; }
	}

	.range > [class*='cell-lg'].container {
		margin: 0;
	}
}

@include media-breakpoint-up(lg) {
	.cell-xl-6_lg {
		@include cell(lg, 6, 30px);

		.cell-inner {
			@include cell-inner(lg, 6, 30px);
		}
	}

	.cell-xl-6_sm {
		@include cell(lg, 6, -30px);
	}
}

@include media-breakpoint-up(xl) {
	.range > [class*='cell-xl'].container {
		margin: 0;
	}

	.range > [class*='cell-xl']:nth-child(odd) {
		.cell-inner { margin-left: auto; }
	}

	.cell-lg-6,
	.cell-xl-6 {
		@include cell(xl, 6);

		.cell-inner {
			@include cell-inner(xl, 6);
		}
	}

	.cell-xl-6_lg {
		@include cell(xl, 6, -70px);

		.cell-inner {
			@include cell-inner(xl, 6, -70px);
		}
	}

	.cell-xl-6_sm {
		@include cell(xl, 6, 70px);
	}
}

@include media-breakpoint-up(xxl) {
	.cell-xl-6_lg {
		@include cell(xl, 6, 15px);

		.cell-inner {
			@include cell-inner(xl, 6, 15px);
		}
	}

	.cell-xl-6_sm {
		@include cell(xl, 6, -15px);
	}
}