@mixin flex {
	display: flex;
}

@mixin direction($direction) {
	flex-direction: $direction;
}

@mixin wrap($wrap) {
	flex-wrap: $wrap;
}

@mixin self($self) {
	align-self: $self;
}

@mixin item($item) {
	align-items: $item;
}

@mixin justify($justify) {
	justify-content: $justify;
}

@mixin content($content) {
	align-content: $content;
}

@mixin flexbox($flex) {
	@if $flex == 0 {
		flex: 0 0 auto;
	} @else if $flex == 1 {
		flex: 1 1 auto;
	}  @else {
		flex: $flex;
	}
}

@mixin flex-basis($basis, $spacing: false) {
	@if $spacing == false {
		$w : 100 / $basis;
		width: $w * 1%;
	} @else {
		$w : 100 / $basis;
		$s : $spacing * ($basis - 1) / $basis;
		width: calc(#{$w} * 1% - #{$s});
	}
	
	flex-basis: auto;
}

@mixin flex-center {
	@include justify(center);
	@include content(center);
	@include item(center);
}

@mixin flex-box {
	@include flex;
	@include flexbox(1 1 auto);
}

@mixin flex-box--no-grow {
	flex-grow: 0;
}

@mixin flex-box--align-self {
	@include self(stretch);
}

@mixin flex-container {
	@include flex;
}

@mixin flex-container--half-page {
	height: 50vh;
}

@mixin flex-container--full-page {
	height: 100vh;
}

@mixin flex-container--row {
	@include direction(row);
}

@mixin flex-container--row-reverse {
	@include direction(row-reverse);
}

@mixin flex-container--column {
	@include direction(column);
}

@mixin flex-container--column-reverse {
	@include direction(column-reverse);
}

@mixin flex-container--wrap {
	@include wrap(wrap);
}

@mixin flex-justify--start {
	@include justify(flex-start);
}

@mixin flex-justify--end {
	@include justify(flex-end);
}

@mixin flex-justify--center {
	@include justify(center);
}

@mixin flex-justify--space-between {
	@include justify(space-between);
}

@mixin flex-justify--space-around {
	@include justify(space-around);
}

@mixin flex-item--start {
	@include item(flex-start);
}

@mixin flex-item--end {
	@include item(flex-end);
}

@mixin flex-item--center {
	@include item(center);
}

@mixin flex-item--stretch {
	@include item(stretch);
}

@mixin flex-item--baseline {
	@include item(baseline);
}

@mixin flex-content--start {
	@include content(flex-start);
}

@mixin flex-content--end {
	@include content(flex-end);
}

@mixin flex-content--center {
	@include content(center);
}

@mixin flex-content--stretch {
	@include content(stretch);
}

@mixin flex-content--space-between {
	@include content(space-between);
}

@mixin flex-content--space-around {
	@include content(space-around);
}

@mixin margin-top-auto {
	margin-top: auto;
}

@mixin margin-right-auto {
	margin-right: auto;
}

@mixin margin-bottom-auto {
	margin-bottom: auto;
}

@mixin margin-left-auto {
	margin-left: auto;
}

@mixin margin-auto-x {
	@include margin-left-auto;
	@include margin-right-auto;
}

@mixin margin-auto-y {
	@include margin-top-auto;
	@include margin-bottom-auto;
}

@mixin margin-auto {
	@include margin-top-auto;
	@include margin-right-auto;
	@include margin-bottom-auto;
	@include margin-left-auto;
}