// flex is technically a layout utility, so we'll allow alternate syntax here
.flex, .l-flex {display: flex !important}

// sets horizonal positioning of items within the flex container
.flex-row {flex-direction: row !important}
.flex-row-reverse {flex-direction: row-reverse !important}
.flex-column {flex-direction: column !important}
.flex-column-reverse {flex-direction: column-reverse !important}

// sets horizontal alignment of content within the flex container
.flex-justify-start {justify-content: flex-start !important}
.flex-justify-end {justify-content: flex-end !important}
.flex-justify-center {justify-content: center !important}
.flex-justify-between {justify-content: space-between !important}
.flex-justify-around {justify-content: space-around !important}
.flex-justify-even {justify-content: space-evenly !important}

// sets vertical alignment of content within the flex container
.flex-align-start {align-items: flex-start !important}
.flex-align-end {align-items: flex-end !important}
.flex-align-center {align-items: center !important}
.flex-align-baseline {align-items: baseline !important}
.flex-align-stretch {align-items: stretch !important}

// set alignment of a single item within the flex container
.flex-align-self-start {align-self: flex-start !important}
.flex-align-self-end {align-self: flex-end !important}
.flex-align-self-center {align-self: center !important}
.flex-align-self-stretch {align-self: stretch !important}
.flex-align-self-between {align-self: space-between !important}
.flex-align-self-around {align-self: space-around !important}

// force flex items to wrap. usually only needed when items used fixed size
.flex-wrap {flex-wrap: wrap !important}
.flex-wrap-reverse {flex-wrap: wrap-reverse !important}
.flex-nowrap {flex-wrap: nowrap !important}

// manually set flex item sizing based on ratios
// e.g. 1-1-2 items will be a 25% 25% 50% row, 1-2 items a 33% 66% row, 1-3 25% 75%
.flex-grow-0 {flex-grow: 0}
.flex-grow-1 {flex-grow: 1}
.flex-grow-2 {flex-grow: 2}
.flex-grow-3 {flex-grow: 3}
.flex-grow-4 {flex-grow: 4}
.flex-grow-5 {flex-grow: 5}
.flex-grow-6 {flex-grow: 6}

// shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0%;
// useful for stretch multiple items vertically so they're all the same height
.flex-1 {flex: 1}

@media screen and (min-width: $medium-breakpoint) {
	.l-flex__m, .flex__m {display: flex !important}

	.flex-row__m {flex-direction: row !important}
	.flex-row-reverse__m {flex-direction: row-reverse !important}
	.flex-column__m {flex-direction: column !important}
	.flex-column-reverse__m {flex-direction: column-reverse !important}

	.flex-justify-start__m {justify-content: flex-start !important}
	.flex-justify-end__m {justify-content: flex-end !important}
	.flex-justify-center__m {justify-content: center !important}
	.flex-justify-between__m {justify-content: space-between !important}
	.flex-justify-around__m {justify-content: space-around !important}
	.flex-justify-even__m {justify-content: space-evenly !important}

	.flex-align-start__m {align-items: flex-start !important}
	.flex-align-end__m {align-items: flex-end !important}
	.flex-align-center__m {align-items: center !important}
	.flex-align-baseline__m {align-items: baseline !important}
	.flex-align-stretch__m {align-items: stretch !important}

	.flex-align-self-start__m {align-self: flex-start !important}
	.flex-align-self-end__m {align-self: flex-end !important}
	.flex-align-self-center__m {align-self: center !important}
	.flex-align-self-stretch__m {align-self: stretch !important}
	.flex-align-self-between__m {align-self: space-between !important}
	.flex-align-self-around__m {align-self: space-around !important}

	.flex-wrap__m {flex-wrap: wrap !important}
	.flex-wrap-reverse__m {flex-wrap: wrap-reverse !important}
	.flex-nowrap__m {flex-wrap: nowrap !important}

	.flex-grow-0__m {flex-grow: 0}
	.flex-grow-1__m {flex-grow: 1}
	.flex-grow-2__m {flex-grow: 2}
	.flex-grow-3__m {flex-grow: 3}
	.flex-grow-4__m {flex-grow: 4}
	.flex-grow-6__m {flex-grow: 6}
	.flex-grow-7__m {flex-grow: 7}
	.flex-grow-8__m {flex-grow: 8}
	.flex-grow-9__m {flex-grow: 9}
	.flex-grow-10__m {flex-grow: 10}
	.flex-grow-11__m {flex-grow: 11}
}


@media screen and (min-width: $large-breakpoint){
	.l-flex__l, .flex__l {display: flex !important}

	.flex-row__l {flex-direction: row !important}
	.flex-row-reverse__l {flex-direction: row-reverse !important}
	.flex-column__l {flex-direction: column !important}
	.flex-column-reverse__l {flex-direction: column-reverse !important}

	.flex-justify-start__l {justify-content: flex-start !important}
	.flex-justify-end__l {justify-content: flex-end !important}
	.flex-justify-center__l {justify-content: center !important}
	.flex-justify-between__l {justify-content: space-between !important}
	.flex-justify-around__l {justify-content: space-around !important}
	.flex-justify-even__l {justify-content: space-evenly !important}

	.flex-align-start__l {align-items: flex-start !important}
	.flex-align-end__l {align-items: flex-end !important}
	.flex-align-center__l {align-items: center !important}
	.flex-align-baseline__l {align-items: baseline !important}
	.flex-align-stretch__l {align-items: stretch !important}

	.flex-align-self-start__l {align-self: flex-start !important}
	.flex-align-self-end__l {align-self: flex-end !important}
	.flex-align-self-center__l {align-self: center !important}
	.flex-align-self-stretch__l {align-self: stretch !important}
	.flex-align-self-between__l {align-self: space-between !important}
	.flex-align-self-around__l {align-self: space-around !important}

	.flex-wrap__l {flex-wrap: wrap !important}
	.flex-wrap-reverse__l {flex-wrap: wrap-reverse !important}
	.flex-nowrap__l {flex-wrap: nowrap !important}

	.flex-grow-0__l {flex-grow: 0}
	.flex-grow-1__l {flex-grow: 1}
	.flex-grow-2__l {flex-grow: 2}
	.flex-grow-3__l {flex-grow: 3}
	.flex-grow-4__l {flex-grow: 4}
	.flex-grow-6__l {flex-grow: 6}
	.flex-grow-7__l {flex-grow: 7}
	.flex-grow-8__l {flex-grow: 8}
	.flex-grow-9__l {flex-grow: 9}
	.flex-grow-10__l {flex-grow: 10}
	.flex-grow-11__l {flex-grow: 11}
}