$opacities: (
	10: 0.1,
	25: 0.25,
	50: 0.5,
	75: 0.75,
	100: 1
) !default;

$text-opacities: (
	25: 0.25,
	50: 0.5,
	75: 0.75,
	100: 1
) !default;

$border-sizes: 0 1 2 3 4 5 !default;
$border-round-sizes: 0 1 2 3 !default;
$border-positions: top start end bottom !default;
$border-radius-positions: top start end bottom circle pill !default;
$padding-sizes: 0 1 2 3 4 5 !default;
$top-position: 0 50 100 !default;
$bottom-position: 0 50 100 !default;
$start-position: 0 50 100 !default;
$end-position: 0 50 100 !default;
$padding-positions: 't' 's' 'e' 'b' 'x' 'y' !default;
$margin-sizes: 0 1 2 3 4 5 auto !default;
$margin-positions: 't' 's' 'e' 'b' 'x' 'y' !default;

$gap-sizes: 0 1 2 3 4 5 !default;
$shadow-sizes: none sm lg !default;
$width-height-sizes: 25 50 75 100 auto !default;
$displays: none inline inline-block block grid table-cell table-row flex inline-flex table !default;
$displays-sizes: sm md lg xl xxl !default;
$col-sizes: 1 2 3 4 5 6 7 8 9 10 11 12 auto !default;
$breakpoints: sm md lg xl xxl !default;
$positions: static relative absolute fixed sticky !default;
$overflow-types: auto hidden visible scroll !default;
$translate-middle-types: x y !default;
$float-positions: start end none !default;
$heading-display-sizes: 1 2 3 4 5 6 !default;
$text-aligns: start center end !default;
$align-items: start center end !default;
$orders: first last -1 1 2 3 4 5 6 !default;
$justify-content: start center end around between evenly !default;
$align-self: start center end !default;
$row-cols-sizes: 1 2 3 4 5 6 auto !default;
$container-breakpoints: null fluid sm md lg xl xxl;

.border {
	border-width: var(--#{$prefix}border-width) !important;
}

$props: (
	bg: (
		color: generate_props($theme_colors, ('.bg-')),
		gradient: '.bg-gradient'
	),
	border: (
		null: '.border',
		color: (
			generate_props($theme_colors, ('.border-'))
		)
	),
	border-radius: generate_props($border-radius-positions, ('.rounded-')),
	border-round-size: generate_props($border-round-sizes, ('.rounded-')),
	max-width-100: '.mw-100',
	max-height-100: '.mh-100',
	row: (
		null: '.row',
		deck: '.row' '.row-deck',
		cols: generate_props($row-cols-sizes, ('.row-cols-'))
	),
	show: '.show',
	lead: '.lead',
	blockquote: '.blockquote',
	container: generate_props($container-breakpoints, ('.container-')),
	text: (
		truncate: '.text-truncate',
		muted: '.text-muted',
		color: (
			generate_props($theme_colors, ('.text-'))
		),
		opacity: (
			generate_props($text-opacities, ('.text-'))
		),
		transform: (
			lowercase: '.text-lowercase',
			uppercase: '.text-uppercase',
			capitalize: '.text-capitalize'
		),
		align: generate_props($text-aligns, ('.text-'))
	),
	align-items: generate_props($align-items, ('.align-items-')),
	align-self: generate_props($align-self, ('.align-self-')),
	justify-content: generate_props($justify-content, ('.justify-content-')),
	order: generate_props($orders, ('.order-')),
	shadow: generate_props($shadow-sizes, ('.shadow-')),
	position: generate_props($positions, ('.position-')),
	top: generate_props($top-position, ('.top-')),
	bottom: generate_props($bottom-position, ('.bottom-')),
	start: generate_props($start-position, ('.start-')),
	end: generate_props($end-position, ('.end-')),
	gap: generate_props($gap-sizes, ('.gap-')),
	heading-display-size: generate_props($heading-display-sizes, ('.heading-display-size-')),
	d: generate_props($displays, ('.d-')),
	d-print: generate_props($displays, ('.d-print-')),
	hidden: '.invisible',
	overflow: generate_props($overflow-types, ('.overflow-')),
	translate: (
		middle-xy: '.translate-middle',
		middle: (
			generate_props($translate-middle-types, ('.translate-middle-'))
		)
	),
	float: generate_props($float-positions, ('.float-')),
	p: generate_props($padding-sizes, ('.p-')),
	ps: generate_props($padding-sizes, ('.ps-')),
	pe: generate_props($padding-sizes, ('.pe-')),
	pt: generate_props($padding-sizes, ('.pt-')),
	pb: generate_props($padding-sizes, ('.pb-')),
	px: generate_props($padding-sizes, ('.px-')),
	py: generate_props($padding-sizes, ('.py-')),
	m: generate_props($margin-sizes, ('.m-')),
	ms: generate_props($margin-sizes, ('.ms-')),
	me: generate_props($margin-sizes, ('.me-')),
	mt: generate_props($margin-sizes, ('.mt-')),
	mb: generate_props($margin-sizes, ('.mb-')),
	mx: generate_props($margin-sizes, ('.mx-')),
	my: generate_props($margin-sizes, ('.my-')),
	col: generate_props($col-sizes, ('.col-')),
	w: generate_props($width-height-sizes, ('.w-')),
	h: generate_props($width-height-sizes, ('.h-'))
);

$props-null: (
	shadow: '.shadow',
	col: '.col',
	row: '.row'
);

$props-extend: (
	border: generate_props($border-positions, ('.border-')),
	col: generate_props($breakpoints, ('.col-'))
);

.#{$prefix-el} {
	@include apply-props($props-null);
	@include apply-props($props);
	@include apply-props($props-extend);

	&-col {
		@each $size in $col-sizes {
			@each $breakpoint in $breakpoints {
				&-#{$breakpoint}-#{$size} {
					@extend .col-#{$breakpoint}-#{$size};
				}
			}
		}
	}

	&-offset {
		@each $breakpoint in $breakpoints {
			@each $size in $col-sizes {
				&-#{$breakpoint}-#{$size} {
					@extend .offset-#{$breakpoint}-#{$size} !optional;
				}

				&-#{$size} {
					@extend .offset-#{$breakpoint}-#{$size} !optional;
				}
			}
		}
	}

	&-text-align {
		@each $text-align in $text-aligns {
			@each $breakpoint in $breakpoints {
				&-#{$breakpoint}-#{$text-align} {
					@extend .offset-#{$breakpoint}-#{$text-align} !optional;
				}
			}
		}
	}

	@each $key, $value in $opacities {
		&-bg-opacity-#{$key} {
			--#{$prefix}bg-opacity: #{$value};
			@extend .bg-opacity-#{$key};
		}

		&-bg-border-opacity-#{$key} {
			@extend .border;
			@extend .border-opacity-#{$key};
		}
	}

	@each $display in $displays {
		@each $size in $displays-sizes {
			&-d-#{$size}-#{$display} {
				@extend .d-#{$size}-#{$display};
			}
		}
	}

	@each $size in $border-sizes {
		&-border-#{$size} {
			--#{$prefix}border-width: #{$size}px;
			@extend .border;
			@extend .border-#{$size};
		}
	}

	@each $position in $border-positions {
		@each $size in $border-sizes {
			&-border-#{$position}-#{$size} {
				@extend .border-#{$position}-0;
			}
		}

		&-border-#{$position}-0 {
			@extend .border-#{$position}-0;
		}
	}

	@each $position in $float-positions {
		@each $size in $displays-sizes {
			&-float-#{$size}-#{$position} {
				@extend .float-#{$size}-#{$position};
			}
		}
	}

	&-row {
		@each $size in $row-cols-sizes {
			@each $breakpoint in $breakpoints {
				&-cols-#{$breakpoint}-#{$size} {
					@extend .row-cols-#{$breakpoint}-#{$size};
				}
			}
		}
	}
}