/*
 * 1.1 - Layout Flexbox
 */

// Block-level

.row-container,
.rc {
	display: flex;
	flex-direction: row;
}

.col-container,
.cc {
	display: flex;
	flex-direction: column;
}

.row-container_reverse,
.rc_r {
	display: flex;
	flex-direction: row-reverse;
}

.col-container_reverse,
.cc_r {
	display: flex;
	flex-direction: column-reverse;
}

// Inline-level

.row-container_inline,
.rc_inline {
	display: inline-flex;
	flex-direction: row;
}

.col-container_inline,
.cc_inline {
	display: inline-flex;
	flex-direction: column;
}

.col-container_reverse_inline,
.cc_r_inline {
	display: inline-flex;
	flex-direction: column-reverse;
}

.row-container_reverse_inline,
.rc_r_inline {
	display: inline-flex;
	flex-direction: row-reverse;
}

// Flex Line Wrapping

// Value:	nowrap | wrap | wrap-reverse
// Initial:	nowrap
// Applies to: flex containers

.flex_wrap {
	flex-wrap: wrap;
}

.flex_nowrap {
	flex-wrap: nowrap;
}

.flex_wrap-reverse {
	flex-wrap: wrap-reverse;
}

// Axis Alignment

// Value:	flex-start | flex-end | center | space-between | space-around
// Initial:	flex-start
// Applies to: flex containers

.justify-content_flex-start,
.jc_fs {
	justify-content: flex-start;
}

.justify-content_flex-end,
.jc_fe {
	justify-content: flex-end;
}

.justify-content_center,
.jc_c {
	justify-content: center;
}

.justify-content_space-between,
.jc_sb {
	justify-content: space-between;
}

.justify-content_space-around,
.jc_sa {
	justify-content: space-around;
}

// Cross-axis Alignment

//Value: flex-start | flex-end | center | baseline | stretch
//Initial: stretch
//Applies to: flex containers

.align-items_flex-start,
.ai_fs {
	align-items: flex-start;
}

.align-items_flex-end,
.ai_fe {
	align-items: flex-end;
}

.align-items_center,
.ai_c {
	align-items: center;
}

.align-items_baseline,
.ai_baseline {
	align-items: baseline;
}

.align-items_stretch,
.ai_stretch {
	align-items: stretch;
}

// Value:	auto | flex-start | flex-end | center | baseline | stretch
// Initial:	auto
// Applies to: flex items

.align-self_auto,
.as_auto {
	align-self: auto;
}

.align-self_flex-start,
.as_fs {
	align-self: flex-start;
}

.align-self_flex-end,
.as_fe {
	align-self: flex-end;
}

.align-self_center,
.as_c {
	align-self: center;
}

.align-self_baseline,
.as_baseline {
	align-self: baseline;
}

.align-self_stretch,
.as_stretch {
	align-self: stretch;
}

// Packing Flex Lines
// Value:	flex-start | flex-end | center | space-between | space-around | stretch
// Initial:	stretch
// Applies to: multi-line | flex containers

.align-content_flex-start,
.ac_fs {
	align-content: flex-start;
}

.align-content_flex-end,
.ac_fe {
	align-content: flex-end;
}

.align-content_center,
.ac_c {
	align-content: center;
}

.align-content_space-between,
.ac_sb {
	align-content: space-between;
}

.align-content_space-around,
.ac_sa {
	align-content: space-around;
}

.align-content_stretch,
.ac_stretch {
	align-content: stretch;
}

// none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]
// Initial:	0 1 auto
// Applies to:	flex items
// Flex: This is a shorthand property that sets flex-grow, flex-shrink, and flex-basis.
// none: This keyword computes to 0 0 auto.
// flex-grow: Defines the flex-grow of the flex item. Negative values are considered invalid. Defaults to 1 when omitted.
// flex-shrink: Defines the flex-shrink of the flex item. Negative values are considered invalid. Defaults to 1 when omitted.
// flex-basis: Defines the flex-basis of the flex item. Any value valid for width and height properties are accepted. A preferred size of 0 must have a unit to avoid being interpreted as a flexibility. Defaults to 0 when omitted.

.flex_auto {
	flex: 1 0 auto;
}

@for $i from 1 through 100 {
	.flex_#{$i} {
		flex: 1 0 #{$i + '%'};
	}
}

.flex_shrink_auto {
	flex: 1 1 auto;
}

@for $i from 1 through 100 {
	.flex_shrink_#{$i} {
		flex: 1 1 #{$i + '%'};
	}
}