* {
	--0-5: 0.124rem;
	--1: 0.25rem;
	--1-5: 0.375rem;
	--2: 0.5rem;
	--2-5: 0.625rem;
	--3: 0.75rem;
	--3-5: 0.875rem;
	--4: 1rem;
	--5: 1.25rem;

	--red-50: #fef2f2;
	--red-100: #fee2e2;
	--red-200: #fecaca;
	--red-300: #fca5a5;
	--red-400: #f87171;
	--red-500: #ef4444;
	--red-600: #dc2626;
	--red-700: #b91c1c;
	--red-800: #991b1b;
	--red-900: #7f1d1d;
	--red-950: #450a0a;
	--red: var(--red-400);

	/*
	All "top level" variables have to be reset before they are used. This prevents
	from values of top elements affecting children elements, without this, all children
	elements would have padding added if their parents has.

	Since inline-styles have priority, when we specify --p on the html, this ends
	up being overridden for the element, but not it's children.
	*/
	--p: initial;
	--text: initial;

	color: var(--text);
}

/*
--------------------------------------------------------------------------------
FLEX
--------------------------------------------------------------------------------
*/
* {
	/*
	Creating something like this:
	--display: initial;
	display(--display);

	Does not work, since it ends up making all elements inline (initial "display"'s
	value). To make this work, it would be needed to "emulate" each elements default
	value provided by browsers to properly reset "--display":

	div {
		--display: block;
	}
	span {
		--display: inline;
	}

	etc. etc.

	This would explode the size of this CSS file. So a possible "compromise" is just
	using inline-styles normally to change the display property:

	<div style="display:flex;/>

	Also, other Tailwind's flex utilities are so simple that just using inline-styles
	is probably better than creating utility variables. Things such as "grow" can be
	easily used without adding too much characters from their Tailwind counterparts.

	<div class="flex flex-wrap grow"/>
	<div style="display:flex;flex-wrap:wrap;flex-grow:1;"/>
	*/

	/*
	Flex basis can be similar to text colors and sizes:
	*/
	flex-basis: var(--basis);
	/*
	And then in the HTML just use the already defined sizes:
	<div style="--basis:var(--1);"/>
	*/

	/*
	The main thing that could be useful is making "alias variables", for example:

	flex-grow: var(--grow);

	Just to be able to make inline-styles be responsive and have state variations,
	so things like --sm-grow, --hover-grow, --lg-hover-grow.
	*/
}

/*
--------------------------------------------------------------------------------
GRID
--------------------------------------------------------------------------------
*/
* {
	/*
	Similarly to flex elements, "display" should be set directly in the inline style:
	<div style="display:grid;"/>

	However, compared to flex, it can have a lot more space for pre-defining variables
	that can be useful.
	*/

	/*
	Grid template columns can just have a variable for the number of columns:
	*/
	--grid-cols: initial;
	grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
	/*
	This ends up being very similar to Tailwind:

	<div class="grid grid-cols-8"/>
	<div style="display:grid;--grid-cols:8;"/>

	-------
	P.S: "grid-cols-none" and "grid-cols-subgrid" can be just placed directly in inline-styles,
	they seem to be very rarely used nonetheless.
	*/

	/*
	Other utilities follow a similar path.
	*/

	/* Grid Column Start / End */
	--col-span: initial;
	grid-column: span var(--col-span) / span var(--col-span);

	/* Grid Template Rows */
	--grid-rows: initial;
	grid-template-rows: repeat(var(--grid-rows), minmax(0, 1fr));

	/* Grid Row Start / End */
	--row-span: initial;
	grid-row: span var(--row-span) / span var(--row-span);

	/* Grid Auto Flow */
	--grid-flow: initial;
	grid-auto-flow: var(--grid-flow);
	/*
	<div
		style="display:grid;--grid-flow:row"
		class="grid grid-flow-row"
	/>
	<div
		style="display:grid;--grid-flow:column"
		class="grid grid-flow-col"
	/>
	*/

	/* Grid Auto Columns */
	--auto-cols: initial;
	grid-auto-columns: var(--auto-cols);
	/*
	<div
		style="display:grid;--grid-flow:row;--auto-cols:auto;"
		class="grid grid-flow-row auto-cols-auto"
	/>
	<div
		style="display:grid;--grid-flow:column;--auto-cols:min-content"
		class="grid grid-flow-col auto-cols-min"
	/>

	----
	This also applies to Grid Auto Rows, just rename "cols" to "rows";
	*/

}

/*
--------------------------------------------------------------------------------
BOX ELEMENTS
--------------------------------------------------------------------------------
*/
* {
	/*
	Since Tailwind has different variations for each axis, we can use the ability
	of var() having a fallback value to prioritize some variables over another.
	*/
	--px: var(--p, initial);
	--py: var(--p, initial);
	--pr: var(--px, initial);
	--pl: var(--px, initial);
	--pt: var(--py, initial);
	--pb: var(--py, initial);

	padding-top: var(--pt, 0);
	padding-right: var(--pr, 0);
	padding-left: var(--pl, 0);
	padding-bottom: var(--pb, 0);

}

*:hover {
	/*
	FIX ME: reset all variables to initial state, since parents can affect
	the chain of fallback values
	*/
	--hover-pl: var(--hover-px, var(--hover-p, var(--pl)));
	--hover-pr: var(--hover-px, var(--hover-p, var(--pr)));
	--hover-pt: var(--hover-py, var(--hover-p, var(--pt)));
	--hover-pb: var(--hover-py, var(--hover-p, var(--pb)));

	padding-top: var(--hover-pt, 0);
	padding-right: var(--hover-pr, 0);
	padding-left: var(--hover-pl, 0);
	padding-bottom: var(--hover-pb, 0);

	/*
	To "minify" the resulting CSS, we can also write them as following:
	*/
	padding-top: var(--hover-pt, var(--hover-px, var(--hover-p, var(--pt))));
	padding-right: var(--hover-pr, var(--hover-px, var(--hover-p, var(--pr))));
	padding-left: var(--hover-pl, var(--hover-py, var(--hover-p, var(--pl))));
	padding-bottom: var(--hover-pb, var(--hover-py, var(--hover-p, var(--pb))));

	padding: var(--hover-pt, var(--hover-px, var(--hover-p, var(--pt))))
		/* (comment breaks just to prevent reader's formatters from merging the lines) */
		var(--hover-pr, var(--hover-px, var(--hover-p, var(--pr))))
		/* */
		var(--hover-pl, var(--hover-py, var(--hover-p, var(--pl))))
		/* */
		var(--hover-pb, var(--hover-py, var(--hover-p, var(--pb))))
		/* */
	;

	padding: var(--hover-pt, var(--hover-px, var(--hover-p, var(--pt)))) var(--hover-pr, var(--hover-px, var(--hover-p, var(--pr)))) var(--hover-pl, var(--hover-py, var(--hover-p, var(--pl)))) var(--hover-pb, var(--hover-py, var(--hover-p, var(--pb))));
}

/*
--------------------------------------------------------------------------------
RESPONSIVENESS
--------------------------------------------------------------------------------
*/
@media (min-width: 640px) {
	* {
		--sm-pl: var(--sm-px, var(--sm-p, var(--pl)));
		--sm-pr: var(--sm-px, var(--sm-p, var(--pr)));
		--sm-pt: var(--sm-py, var(--sm-p, var(--pt)));
		--sm-pb: var(--sm-py, var(--sm-p, var(--pb)));

		padding-top: var(--sm-pt, 0);
		padding-right: var(--sm-pr, 0);
		padding-left: var(--sm-pl, 0);
		padding-bottom: var(--sm-pb, 0);
	}

	*:hover {
		--sm-hover-pl: var(--sm-hover-px, var(--sm-hover-p, var(--hover-pl)));
		--sm-hover-pr: var(--sm-hover-px, var(--sm-hover-p, var(--hover-pr)));
		--sm-hover-pt: var(--sm-hover-py, var(--sm-hover-p, var(--hover-pt)));
		--sm-hover-pb: var(--sm-hover-py, var(--sm-hover-p, var(--hover-pb)));

		padding-top: var(--sm-hover-pt, 0);
		padding-right: var(--sm-hover-pr, 0);
		padding-left: var(--sm-hover-pl, 0);
		padding-bottom: var(--sm-hover-pb, 0);
	}
}

@media (min-width: 768px) {
	* {
		/*
		Since values from the previous width size can be still be active, we have
		to propagate them upwards the chain. We use again var() fallback value so
		you can still specify a value just for this breakpoint.

		We pretty much have to almost "simulate the browser's priorities".
		*/
		--md-pl: var(--md-px, var(--md-p, var(--sm-pl)));
		--md-pr: var(--md-px, var(--md-p, var(--sm-pr)));
		--md-pt: var(--md-py, var(--md-p, var(--sm-pt)));
		--md-pb: var(--md-py, var(--md-p, var(--sm-pb)));

		padding-top: var(--md-pt, 0);
		padding-right: var(--md-pr, 0);
		padding-left: var(--md-pl, 0);
		padding-bottom: var(--md-pb, 0);
	}

	*:hover {
		--md-hover-pl: var(--md-hover-px, var(--md-hover-p, var(--sm-hover-pl)));
		--md-hover-pr: var(--md-hover-px, var(--md-hover-p, var(--sm-hover-pr)));
		--md-hover-pt: var(--md-hover-py, var(--md-hover-p, var(--sm-hover-pt)));
		--md-hover-pb: var(--md-hover-py, var(--md-hover-p, var(--sm-hover-pb)));

		padding-top: var(--md-hover-pt, 0);
		padding-right: var(--md-hover-pr, 0);
		padding-left: var(--md-hover-pl, 0);
		padding-bottom: var(--md-hover-pb, 0);
	}
}

@media (min-width: 1024px) {
	* {
		--lg-pl: var(--lg-px, var(--lg-p, var(--md-pl)));
		--lg-pr: var(--lg-px, var(--lg-p, var(--md-pr)));
		--lg-pt: var(--lg-py, var(--lg-p, var(--md-pt)));
		--lg-pb: var(--lg-py, var(--lg-p, var(--md-pb)));

		padding-top: var(--lg-pt, 0);
		padding-right: var(--lg-pr, 0);
		padding-left: var(--lg-pl, 0);
		padding-bottom: var(--lg-pb, 0);
	}

	*:hover {
		--lg-hover-pl: var(--lg-hover-px, var(--lg-hover-p, var(--md-hover-pl)));
		--lg-hover-pr: var(--lg-hover-px, var(--lg-hover-p, var(--md-hover-pr)));
		--lg-hover-pt: var(--lg-hover-py, var(--lg-hover-p, var(--md-hover-pt)));
		--lg-hover-pb: var(--lg-hover-py, var(--lg-hover-p, var(--md-hover-pb)));

		padding-top: var(--lg-hover-pt, 0);
		padding-right: var(--lg-hover-pr, 0);
		padding-left: var(--lg-hover-pl, 0);
		padding-bottom: var(--lg-hover-pb, 0);
	}
}

@media (min-width: 1280px) {
	* {
		--xl-pl: var(--xl-px, var(--xl-p, var(--lg-pl)));
		--xl-pr: var(--xl-px, var(--xl-p, var(--lg-pr)));
		--xl-pt: var(--xl-py, var(--xl-p, var(--lg-pt)));
		--xl-pb: var(--xl-py, var(--xl-p, var(--lg-pb)));

		padding-top: var(--xl-pt, 0);
		padding-right: var(--xl-pr, 0);
		padding-left: var(--xl-pl, 0);
		padding-bottom: var(--xl-pb, 0);
	}

	*:hover {
		--xl-hover-pl: var(--xl-hover-px, var(--xl-hover-p, var(--lg-hover-pl)));
		--xl-hover-pr: var(--xl-hover-px, var(--xl-hover-p, var(--lg-hover-pr)));
		--xl-hover-pt: var(--xl-hover-py, var(--xl-hover-p, var(--lg-hover-pt)));
		--xl-hover-pb: var(--xl-hover-py, var(--xl-hover-p, var(--lg-hover-pb)));

		padding-top: var(--xl-hover-pt, 0);
		padding-right: var(--xl-hover-pr, 0);
		padding-left: var(--xl-hover-pl, 0);
		padding-bottom: var(--xl-hover-pb, 0);
	}
}

@media (min-width: 1536px) {
	* {
		--2xl-pl: var(--2xl-px, var(--2xl-p, var(--xl-pl)));
		--2xl-pr: var(--2xl-px, var(--2xl-p, var(--xl-pr)));
		--2xl-pt: var(--2xl-py, var(--2xl-p, var(--xl-pt)));
		--2xl-pb: var(--2xl-py, var(--2xl-p, var(--xl-pb)));

		padding-top: var(--2xl-pt, 0);
		padding-right: var(--2xl-pr, 0);
		padding-left: var(--2xl-pl, 0);
		padding-bottom: var(--2xl-pb, 0);
	}

	*:hover {
		--2xl-hover-pl: var(--2xl-hover-px, var(--2xl-hover-p, var(--xl-hover-pl)));
		--2xl-hover-pr: var(--2xl-hover-px, var(--2xl-hover-p, var(--xl-hover-pr)));
		--2xl-hover-pt: var(--2xl-hover-py, var(--2xl-hover-p, var(--xl-hover-pt)));
		--2xl-hover-pb: var(--2xl-hover-py, var(--2xl-hover-p, var(--xl-hover-pb)));

		padding-top: var(--2xl-hover-pt, 0);
		padding-right: var(--2xl-hover-pr, 0);
		padding-left: var(--2xl-hover-pl, 0);
		padding-bottom: var(--2xl-hover-pb, 0);
	}
}