*,
::before,
::after {
	box-sizing: border-box;
}

html {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	tab-size: 4;
}

/* https://thecascade.dev/article/least-amount-of-css/ */
body {
	font-family: System UI;
	font-size: 1.25rem;
	line-height: 1.5;

	/* I'd like layout elements to scroll by choice however fixing height causes */
	/* If overflow is hidden by default set height (not min-height) to 100vh. */
	/* Otherwise scroll directives will not work */
	/* overflow: hidden; */
}

* {
	margin: 0;
}

/* If only min-height is set on body then the body size will be correct but child height of 100% will not grow properly */
html, body {
	height: 100%;
}
body {
	min-height: 100vh;
}

/* stacks */

/* 
By default stacks do not wrap, this is default CSS flexbox behaviour
align-content is only useful when wrapping is set, in most cases align items is what is wanted
*/

.vstack {
	&:only-child {
		min-height: 100%;
	}

	display: flex;
	flex-direction: column;

	&.reverse {
		flex-direction: column-reverse;
	}

	align-items: center;
	justify-content: center;
}


.hstack {
	&:only-child {
		min-height: 100%;
	}

	display: flex;
	flex-direction: row;

	&.reverse {
		flex-direction: row-reverse;
	}

	align-items: center;
	justify-content: center;

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

	&.tight {
		padding: 2px;
		gap: 2px
	}

	&.comfortable {
		padding: 4px;
		gap: 4px
	}

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

/* default scroll behaviour has to be to scroll, otherwise in certain cases background color does not cover content */

.vstack.clipped, .hstack.clipped {
	overflow: hidden;
	max-height: 100%;
}

/* Extra specificity rules needed to counter :only-child rules on vstack hstack */
.scroll-y {
	overflow-y: auto;
	/* Can this always be in scroll y */
	/* flex-shrink: 1; */
}

.vstack.scroll-y, .hstack.scroll-y {
	overflow-y: auto;
	/* If you don't add fit content here then the background color stops at container height */
	/* height: fit-content; */
}

/* stack children */

.flex-1 {
	flex: 1;
}

.flex-2 {
	flex: 2;
}

.expand {
	flex-grow: 1;
}

.cover {
	align-self: stretch;
}

.legible {
	margin-inline: auto;
	width: 100%;
	padding-inline: 2rem;
	max-width: 28rem;
}

.legible-sm {
	margin-inline: auto;
	width: 100%;
	padding-inline: 2rem;
	max-width: 24rem;
}

.legible-lg {
	margin-inline: auto;
	width: 100%;
	padding-inline: 2rem;
	max-width: 32rem;
}

/* Also any clever layout overflow */

.bg-skew {
	position: relative;
	z-index: 1;
}

.bg-skew::before {
	content: '';
	display: block;
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	background: inherit;
	transform: skew(0, -2deg);
	transform-origin: top left;
}

.bg-skew::after {
	content: '';
	display: block;
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	background: inherit;
	transform: skew(0, -2deg);
	transform-origin: bottom right;
}