@use "../variables/default" as vd;
@use "./gen-mixins/flex" as gm;

/**
 * flex
 */

#{vd.$computed-prefix}flex {
	display: flex;
	box-sizing: border-box;
}

// 圣杯布局
#{vd.$computed-prefix}flex-holy {
	display: flex;
	min-height: 100vh;
	box-sizing: border-box;
	flex-direction: column;
}

// 水平垂直对齐
#{vd.$computed-prefix}flex-cc {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
}

#{vd.$computed-prefix}flex-ac {
	display: flex;
	box-sizing: border-box;
	align-items: center;
}

@for $i from 0 through 2 {
	#{vd.$computed-prefix}f-#{$i} {
		flex: $i;
	}
}

$flex-attrs-map: (
	"flex-direction": (row, column, row-reverse, column-reverse),
	"justify-content": (flex-start, flex-end, center, space-between, space-around),
	"align-items": (flex-start, flex-end, center, baseline, stretch),
	"align-content": (flex-start, flex-end, center, space-between, space-around, stretch),
	"align-self": (auto, flex-start, flex-end, center, baseline, stretch)
);
$flex-options: (prefix: vd.$prefix);

@include gm.flex-arrts($flex-attrs-map, $flex-options);
@include gm.flex-size(5, $flex-options);

@each $suffix, $value in (w: wrap, wr: wrap-reverse, n: nowrap) {
	#{vd.$computed-prefix}fwr-#{$suffix} {
		flex-wrap: $value;
	}
}