/* ----------------------------------------------------------------------------------------------------------
Flexbox classes
The spec: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
-------------------------------------------------------------------------------------------------------------
*/

.flex {
	display: flex;
	flex-direction: row;
}
.flex-column {
	display: flex;
  flex-direction: column;
}
.flex-auto { flex: 0 0 auto; }
.flex-1-auto { flex: 1 1 auto; }
.flex1-0 { flex: 1 1 0; }
.flex0 { flex: 0; }
.flex1 { flex: 1; }
.flex2 { flex: 2; }
.flex3 { flex: 3; }
.flex4 { flex: 4; }
.flex5 { flex: 5; }
.flexWrap--wrap { flex-wrap: wrap; }
.flexWrap--noWrap { flex-wrap: nowrap; }

/* use .flex-verticalCenter on the element you want to center */
.flex-verticalCenter::before,
.flex-verticalCenter::after {
	content: '';
	display: block;
	flex: 1;
}
.flex-pseudo-before::before {
	content: '';
	display: block;
	flex: 1;
}
.flex-pseudo-after::after {
	content: '';
	display: block;
	flex: 1;
}

.justifyContent--flexEnd { justify-content: flex-end; }
.justifyContent--flexStart { justify-content: flex-start; }
.justifyContent--center { justify-content: center; }
.justifyContent--spaceBetween { justify-content: space-between; }
.alignItems--center { align-items: center; }
.alignItems--flexEnd { align-items: flex-end; }
.alignItems--flexStart { align-items: flex-start; }

.u-flexMobileReflow,
.u-flexTabletReflow,
.u-flexDesktopReflow {
	display: flex;
	flex-direction: column;
}

@media screen and (min-width: 35.5em) {
	.u-flexMobileReflow { flex-direction: row; }
}

/* ≥ 768px */
@media screen and (min-width: 48em) {
	.u-flexTabletReflow { flex-direction: row; }
	.u-flexTabletReflow.flexDirection--rowReverse { flex-direction: row-reverse }
}

/* ≥ 1024px */
@media screen and (min-width: 64em) {
  .u-flexDesktopReflow { flex-direction: row; }
}