/* ==========================================================================
    GRIDLEX
    Just a Flexbox Grid System - v. 2.4.1
========================================================================== */
@import "gridlex-vars";
// GRID
[#{$gl-attributeName}~="#{$gl-gridName}"],
[#{$gl-attributeName}*="#{$gl-gridName}-"],
[#{$gl-attributeName}*="#{$gl-gridName}_"] {
	box-sizing: border-box;
	display: flex;
	flex-flow: row wrap;
	margin: 0 (-$gl-gutter * 0.5);
}

// COLS
[#{$gl-attributeName}~="#{$gl-colName}"],
[#{$gl-attributeName}*="#{$gl-colName}-"],
[#{$gl-attributeName}*="#{$gl-colName}_"] {
	box-sizing: border-box;
	padding: 0 ($gl-gutter*0.5) $gl-gutter-vertical;
	// gap: ($gl-gutter * 0.5);
	max-width: 100%;
	// @media screen and (max-width: 48em) {
	//     padding: 0 ($gl-gutter*0.25) $gl-gutter-vertical;
	// }
}

// JUST "COL" & "COL_"
[#{$gl-attributeName}~="#{$gl-colName}"],
[#{$gl-attributeName}*="#{$gl-colName}_"] {
	flex: 1 1 0%;
}

// JUST "COL-"
[#{$gl-attributeName}*="#{$gl-colName}-"] {
	flex: none;
}

// COL & GRID
[#{$gl-attributeName}~="#{$gl-gridName}"][#{$gl-attributeName}~="#{$gl-colName}"],
[#{$gl-attributeName}~="#{$gl-gridName}"][#{$gl-attributeName}*="#{$gl-colName}-"],
[#{$gl-attributeName}~="#{$gl-gridName}"][#{$gl-attributeName}*="#{$gl-colName}_"],
[#{$gl-attributeName}*="#{$gl-gridName}-"][#{$gl-attributeName}~="#{$gl-colName}"],
[#{$gl-attributeName}*="#{$gl-gridName}-"][#{$gl-attributeName}*="#{$gl-colName}-"],
[#{$gl-attributeName}*="#{$gl-gridName}-"][#{$gl-attributeName}*="#{$gl-colName}_"],
[#{$gl-attributeName}*="#{$gl-gridName}_"][#{$gl-attributeName}~="#{$gl-colName}"],
[#{$gl-attributeName}*="#{$gl-gridName}_"][#{$gl-attributeName}*="#{$gl-colName}-"],
[#{$gl-attributeName}*="#{$gl-gridName}_"][#{$gl-attributeName}*="#{$gl-colName}_"] {
	margin: 0;
	padding: 0;
}

/************************
    HELPERS SUFFIXES
*************************/
// FOR GRID
[#{$gl-attributeName}*="#{$gl-gridName}-"] {
	// No spacing between cols : noGutter
	&[#{$gl-attributeName}*="-noGutter"] {
		margin: 0;
		> [#{$gl-attributeName}~="#{$gl-colName}"],
		> [#{$gl-attributeName}*="#{$gl-colName}-"] {
			padding: 0;
		}
	}

	// No Wrapping
	&[#{$gl-attributeName}*="-noWrap"] {
		flex-wrap: nowrap;
	}
	// Horizontal alignment on center
	&[#{$gl-attributeName}*="-center"] {
		justify-content: center;
	}
	// Horizontal alignment on right
	&[#{$gl-attributeName}*="-right"] {
		justify-content: flex-end;
		align-self: flex-end;
		margin-left: auto;
	}
	// Vertical alignment on top
	&[#{$gl-attributeName}*="-top"] {
		align-items: flex-start;
	}
	// Vertical alignment on middle
	&[#{$gl-attributeName}*="-middle"] {
		align-items: center;
	}
	// Vertical alignment on bottom
	&[#{$gl-attributeName}*="-bottom"] {
		align-items: flex-end;
	}

	// Orders
	&[#{$gl-attributeName}*="-reverse"] {
		flex-direction: row-reverse;
	}
	&[#{$gl-attributeName}*="-column"] {
		flex-direction: column;
		> [#{$gl-attributeName}*="#{$gl-colName}-"] {
			flex-basis: auto;
		}
	}
	&[#{$gl-attributeName}*="-column-reverse"] {
		flex-direction: column-reverse;
	}

	// Spaces between and around cols
	&[#{$gl-attributeName}*="-spaceBetween"] {
		justify-content: space-between;
	}
	&[#{$gl-attributeName}*="-spaceAround"] {
		justify-content: space-around;
	}

	// Equal heights columns
	&[#{$gl-attributeName}*="-equalHeight"]
		> [#{$gl-attributeName}~="#{$gl-colName}"],
	&[#{$gl-attributeName}*="-equalHeight"]
		> [#{$gl-attributeName}*="#{$gl-colName}-"],
	&[#{$gl-attributeName}*="-equalHeight"]
		> [#{$gl-attributeName}*="#{$gl-colName}_"] {
		align-self: stretch;
		> * {
			height: 100%;
		}
	}
	// Removes the padding-bottom
	&[#{$gl-attributeName}*="-noBottom"]
		> [#{$gl-attributeName}~="#{$gl-colName}"],
	&[#{$gl-attributeName}*="-noBottom"]
		> [#{$gl-attributeName}*="#{$gl-colName}-"],
	&[#{$gl-attributeName}*="-noBottom"]
		> [#{$gl-attributeName}*="#{$gl-colName}_"] {
		padding-bottom: 0;
	}
}

// FOR COL
[#{$gl-attributeName}*="#{$gl-colName}-"] {
	&[#{$gl-attributeName}*="-top"] {
		align-self: flex-start;
	}
	&[#{$gl-attributeName}*="-middle"] {
		align-self: center;
	}
	&[#{$gl-attributeName}*="-bottom"] {
		align-self: flex-end;
	}
	&[#{$gl-attributeName}*="-first"] {
		order: -1;
	}
	&[#{$gl-attributeName}*="-last"] {
		order: 1;
	}
}

/************************
    GRID BY NUMBER
*************************/
@include makeGridByNumber(#{$gl-gridName});
@each $mq-key, $mq-value in $gl-mq-list {
	@media #{$mq-value} {
		@include makeGridByNumber(_#{$mq-key});
	}
}

/************************
    COLS SIZES
*************************/
@include makeCol(#{$gl-colName});
@include makeOff(off);

@each $mq-key, $mq-value in $gl-mq-list {
	@media #{$mq-value} {
		@include makeCol(_#{$mq-key});
		@include makeOff(_#{$mq-key});
		@include makeFirstLast(_#{$mq-key});
	}
}

/************************
    HIDING COLS
*************************/

/*[#{$gl-attributeName}*="#{$gl-colName}-"]:not([#{$gl-attributeName}*="#{$gl-gridName}"]):not([#{$gl-attributeName}*="#{$gl-colName}-0"]) {
  display: block;
}
[#{$gl-attributeName}~="#{$gl-gridName}"][#{$gl-attributeName}*="#{$gl-colName}-"]:not([#{$gl-attributeName}*="#{$gl-colName}-0"]) {
  display: flex;
}*/
[#{$gl-attributeName}*="#{$gl-colName}-"][#{$gl-attributeName}*="#{$gl-colName}-0"] {
	display: none;
}

@each $mq-key, $mq-value in $gl-mq-list {
	@media #{$mq-value} {
		//_#{$mq-key}
		[#{$gl-attributeName}~="#{$gl-gridName}"],
		[#{$gl-attributeName}*="#{$gl-gridName}-"],
		[#{$gl-attributeName}*="#{$gl-gridName}_"] {
			> :not([#{$gl-attributeName}*="_#{$mq-key}-0"]) {
				display: block;
			}
			/*
                  &:not([#{$gl-attributeName}*="_#{$mq-key}-0"]) {
                    display: flex;
                  }*/
			> [#{$gl-attributeName}*="_#{$mq-key}-0"] {
				//&[#{$gl-attributeName}*="-equalHeight"] > [#{$gl-attributeName}*="_#{$mq-key}-0"]{
				display: none;
			}
		}
	}
}
