@use '@talend/design-tokens/lib/tokens' as tokens;

.stack {
	display: flex;
	flex-flow: row;
	flex-grow: 1;
	flex-shrink: 1;

	&.column {
		flex-flow: column;
	}

	&.inline {
		display: inline-flex;
		flex-grow: inherit;
	}

	&.relative {
		position: relative;
	}

	&.noShrink {
		flex-shrink: 0;
	}

	&.noGrow {
		flex-grow: 0;
	}

	&.justify {
		&-start {
			justify-content: flex-start;
		}

		&-end {
			justify-content: flex-end;
		}

		&-center {
			justify-content: center;
		}

		&-space-between {
			justify-content: space-between;
		}

		&-space-around {
			justify-content: space-around;
		}

		&-space-evenly {
			justify-content: space-evenly;
		}

		&-stretch {
			justify-content: stretch;
		}
	}

	&.align {
		&-start {
			align-items: flex-start;
		}

		&-end {
			align-items: flex-end;
		}

		&-center {
			align-items: center;
		}

		&-baseline {
			align-items: baseline;
		}

		&-stretch {
			align-items: stretch;
		}
	}

	&.align-content {
		&-start {
			align-content: flex-start;
		}

		&-end {
			align-content: flex-end;
		}

		&-center {
			align-content: center;
		}

		&-baseline {
			align-content: baseline;
		}

		&-stretch {
			align-content: stretch;
		}
	}

	&.nowrap {
		flex-wrap: nowrap;
	}

	&.wrap {
		flex-wrap: wrap;
	}

	&.wrapReverse {
		flex-wrap: wrap-reverse;
	}

	&.gap {
		&-x {
			&-NONE {
				column-gap: 0;
			}

			&-XXS {
				column-gap: tokens.$coral-spacing-xxs;
			}

			&-XS {
				column-gap: tokens.$coral-spacing-xs;
			}

			&-S {
				column-gap: tokens.$coral-spacing-s;
			}

			&-M {
				column-gap: tokens.$coral-spacing-m;
			}

			&-L {
				column-gap: tokens.$coral-spacing-l;
			}

			&-XL {
				column-gap: tokens.$coral-spacing-xl;
			}
		}

		&-y {
			&-NONE {
				row-gap: 0;
			}

			&-XXS {
				row-gap: tokens.$coral-spacing-xxs;
			}

			&-XS {
				row-gap: tokens.$coral-spacing-xs;
			}

			&-S {
				row-gap: tokens.$coral-spacing-s;
			}

			&-M {
				row-gap: tokens.$coral-spacing-m;
			}

			&-L {
				row-gap: tokens.$coral-spacing-l;
			}

			&-XL {
				row-gap: tokens.$coral-spacing-xl;
			}
		}
	}

	&.padding {
		&-top {
			&-NONE {
				padding-top: 0;
			}

			&-XXS {
				padding-top: tokens.$coral-spacing-xxs;
			}

			&-XS {
				padding-top: tokens.$coral-spacing-xs;
			}

			&-S {
				padding-top: tokens.$coral-spacing-s;
			}

			&-M {
				padding-top: tokens.$coral-spacing-m;
			}

			&-L {
				padding-top: tokens.$coral-spacing-l;
			}

			&-XL {
				padding-top: tokens.$coral-spacing-xl;
			}
		}

		&-right {
			&-NONE {
				padding-right: 0;
			}

			&-XXS {
				padding-right: tokens.$coral-spacing-xxs;
			}

			&-XS {
				padding-right: tokens.$coral-spacing-xs;
			}

			&-S {
				padding-right: tokens.$coral-spacing-s;
			}

			&-M {
				padding-right: tokens.$coral-spacing-m;
			}

			&-L {
				padding-right: tokens.$coral-spacing-l;
			}

			&-XL {
				padding-right: tokens.$coral-spacing-xl;
			}
		}

		&-bottom {
			&-NONE {
				padding-bottom: 0;
			}

			&-XXS {
				padding-bottom: tokens.$coral-spacing-xxs;
			}

			&-XS {
				padding-bottom: tokens.$coral-spacing-xs;
			}

			&-S {
				padding-bottom: tokens.$coral-spacing-s;
			}

			&-M {
				padding-bottom: tokens.$coral-spacing-m;
			}

			&-L {
				padding-bottom: tokens.$coral-spacing-l;
			}

			&-XL {
				padding-bottom: tokens.$coral-spacing-xl;
			}
		}

		&-left {
			&-NONE {
				padding-left: 0;
			}

			&-XXS {
				padding-left: tokens.$coral-spacing-xxs;
			}

			&-XS {
				padding-left: tokens.$coral-spacing-xs;
			}

			&-S {
				padding-left: tokens.$coral-spacing-s;
			}

			&-M {
				padding-left: tokens.$coral-spacing-m;
			}

			&-L {
				padding-left: tokens.$coral-spacing-l;
			}

			&-XL {
				padding-left: tokens.$coral-spacing-xl;
			}
		}
	}

	&.margin {
		&-top {
			&-NONE {
				margin-top: 0;
			}

			&-auto {
				margin-top: auto;
			}

			&-XXS {
				margin-top: tokens.$coral-spacing-xxs;
			}

			&-XS {
				margin-top: tokens.$coral-spacing-xs;
			}

			&-S {
				margin-top: tokens.$coral-spacing-s;
			}

			&-M {
				margin-top: tokens.$coral-spacing-m;
			}

			&-L {
				margin-top: tokens.$coral-spacing-l;
			}

			&-XL {
				margin-top: tokens.$coral-spacing-xl;
			}
		}

		&-right {
			&-NONE {
				margin-right: 0;
			}

			&-auto {
				margin-right: auto;
			}

			&-XXS {
				margin-right: tokens.$coral-spacing-xxs;
			}

			&-XS {
				margin-right: tokens.$coral-spacing-xs;
			}

			&-S {
				margin-right: tokens.$coral-spacing-s;
			}

			&-M {
				margin-right: tokens.$coral-spacing-m;
			}

			&-L {
				margin-right: tokens.$coral-spacing-l;
			}

			&-XL {
				margin-right: tokens.$coral-spacing-xl;
			}
		}

		&-bottom {
			&-NONE {
				margin-bottom: 0;
			}

			&-auto {
				margin-bottom: auto;
			}

			&-XXS {
				margin-bottom: tokens.$coral-spacing-xxs;
			}

			&-XS {
				margin-bottom: tokens.$coral-spacing-xs;
			}

			&-S {
				margin-bottom: tokens.$coral-spacing-s;
			}

			&-M {
				margin-bottom: tokens.$coral-spacing-m;
			}

			&-L {
				margin-bottom: tokens.$coral-spacing-l;
			}

			&-XL {
				margin-bottom: tokens.$coral-spacing-xl;
			}
		}

		&-left {
			&-NONE {
				margin-left: 0;
			}

			&-auto {
				margin-left: auto;
			}

			&-XXS {
				margin-left: tokens.$coral-spacing-xxs;
			}

			&-XS {
				margin-left: tokens.$coral-spacing-xs;
			}

			&-S {
				margin-left: tokens.$coral-spacing-s;
			}

			&-M {
				margin-left: tokens.$coral-spacing-m;
			}

			&-L {
				margin-left: tokens.$coral-spacing-l;
			}

			&-XL {
				margin-left: tokens.$coral-spacing-xl;
			}
		}
	}

	&.fullWidth {
		width: 100%;
	}

	&.height {
		&-100 {
			height: 100%;
		}

		&-XXXS {
			height: tokens.$coral-sizing-xxxs;
		}

		&-XXS {
			height: tokens.$coral-sizing-xxs;
		}

		&-XS {
			height: tokens.$coral-sizing-xs;
		}

		&-S {
			height: tokens.$coral-sizing-s;
		}

		&-M {
			height: tokens.$coral-sizing-m;
		}

		&-L {
			height: tokens.$coral-sizing-l;
		}

		&-XXXL {
			height: tokens.$coral-sizing-xxxl;
		}
	}
}