/* ================================================================= The Stack #
*/
.el-stack {
	--el-stack-space: var(--elg-stack-space, 1.5rem);

	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.el-stack > * {
	margin-top: 0;
	margin-bottom: 0;
} 

.el-stack > * + *,
.el-stack.recursive * + * {
	margin-top: var(--el-stack-space);
}

/* Spacer after nth element
.el-stack > :nth-child(n) {
	margin-bottom: auto;
}
*/

/* =================================================================== The Box #
*/
.el-box {
	--el-box-color-bg: var(--elg-box-color-bg, #fff);
	--el-box-color-fg: var(--elg-box-color-fg, #000);
	--el-box-padding: var(--elg-box-padding, 1rem);
	--el-box-border: var(--elg-box-border, 0.125rem);

	padding: var(--el-box-padding);
	border: var(--el-box-border) solid;

	color: var(--el-box-color-fg);
	background-color: var(--el-box-color-bg);
}

.el-box * {
	color: inherit;
}

.el-box.invert {
	color: var(--el-box-color-bg);
	background-color: var(--el-box-color-fg);
}

.el-box.borderless {
	border: 0 solid;
	outline: var(--el-box-border) solid transparent;
	outline-offset: calc(var(--el-box-border) * -1);
}

/* ================================================================ The Center #
*/
.el-center {
	--el-center-width: var(--elg-center-width, 60ch);
	--el-center-gutter: var(--elg-center-gutter, 1rem);

	box-sizing: content-box;
	margin-left: auto;
	margin-right: auto;
	max-width: var(--el-center-width);

	padding-left: var(--el-center-gutter);
	padding-right: var(--el-center-gutter);
}
.el-center.text {
	text-align: center;
}
.el-center.intrinsic {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* =============================================================== The Cluster #
*/
.el-cluster {
	--el-cluster-space: var(--elg-cluster-space, 1rem);
	--el-cluster-justify: var(--elg-cluster-justify, flex-start);
	--el-cluster-align: var(--elg-cluster-align, center);

	overflow: hidden;
}
.el-cluster > * {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--el-cluster-justify);
	align-items: var(--el-cluster-align);
	margin: calc(var(--el-cluster-space) / 2 * -1);
}
.el-cluster > * > * {
	margin: calc(var(--el-cluster-space) / 2);
}
/* =============================================================== The Sidebar #
*/
.el-with-sidebar {
	--el-sidebar-gutter: var(--elg-sidebar-gutter, 1rem);
	--el-sidebar-main-width: var(--elg-sidebar-main-width, 50%);
	--el-sidebar-aside-width: var(--elg-sidebar-aside-width, auto);

	overflow: hidden;
}

.el-with-sidebar > * {
	display: flex;
	flex-wrap: wrap;
	margin: calc(var(--gutter) / 2 * -1);
}

.el-with-sidebar > * > * {
	margin: calc(var(--gutter) / 2);
	flex-basis: var(--el-sidebar-aside-width);
	flex-grow: 1;
}

.el-with-sidebar > * > :last-child,
.el-with-sidebar.left > * > :last-child {
	flex-basis: 0;
	flex-grow: 999;
	min-width: calc(var(--el-sidebar-main-width) - var(--gutter));
}

.el-with-sidebar.right > * > :first-child {
	flex-basis: 0;
	flex-grow: 999;
	min-width: calc(var(--el-sidebar-main-width) - var(--gutter));
}

/* ============================================================== The Switcher #
*/
.el-switcher {
	--el-switcher-threshold: var(--elg-switcher-threshold, 30ch);
	--el-switcher-gap: var(--elg-switcher-gap, 1rem);
}
.el-switcher > * {
	display: flex;
	flex-wrap: wrap;
	margin: calc((var(--el-switcher-gap) / 2) * -1);
}

.el-switcher > * > * {
	flex-grow: 1;
	flex-basis: calc((var(--el-switcher-threshold) - (100% - var(--el-switcher-gap))) * 999);
	margin: calc(var(--el-switcher-gap) / 2);
}

/* Show at most 4 items on a line
.el-switcher > * > :nth-last-child(n+5),
.el-switcher > * > :nth-last-child(n+5) ~ * {
	flex-basis: 100%;
}
*/

/* ================================================================= The Cover #
*/
.el-cover {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding: 1rem;
}
.el-cover > * {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

/* Define the element to keep at the center (h1)
.el-cover > :first-child:not(h1) {
	margin-top: 0;
}
.el-cover > :last-child:not(h1) {
	margin-bottom: 0;
}
.el-cover > h1 {
	margin-top: auto;
	margin-bottom: auto;
}
*/

/* ================================================================== The Grid #
*/
.el-grid {
	--el-grid-min: var(--elg-grid-min, 250px);
	--el-grid-gap: var(--elg-grid-gap, 1rem);

	display: grid;
	grid-gap: var(--el-grid-gap);
}

@supports (width: min(1px, 100%)) {
	.el-grid {
		grid-template-columns: repeat(auto-fit, minmax(min(var(--el-grid-min), 100%), 1fr));
	}
}

/* ================================================================= The Frame #
*/
.el-frame {
	--el-frame-n: var(--elg-frame-n, 9);
	--el-frame-d: var(--elg-frame-d, 16);
	--el-frame-fit: var(--elg-frame-fit, cover);

	padding-bottom: calc(var(--el-frame-n) / var(--el-frame-d) * 100%);
	position: relative;
}
.el-frame > * {
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	display: flex;
	justify-content: center;
	align-items: center;
}
.el-frame > img,
.el-frame > video {
	width: 100%;
	height: 100%;
	object-fit: var(--el-frame-fit);
}

.el-frame.contained {
	--el-frame-fit: var(--elg-frame-fit, contain);
}
/* ================================================================== The Reel #
*/
.el-reel {
	--el-reel-scroll-thumb: var(--elg-reel-scroll-thumb, auto);
	--el-reel-scroll-track: var(--elg-reel-scroll-track, auto);
	--el-reel-space: var(--elg-reel-space, 1rem);

	display: flex;
	height: auto;
	overflow-x: auto;
	overflow-y: hidden;

	scrollbar-color: var(--el-reel-scroll-thumb) var(--el-reel-scroll-track);
}
.el-reel::-webkit-scrollbar-track {
	background-color: var(--el-reel-scroll-track);
}
.el-reel::-webkit-scrollbar-thumb {
	background-color: var(--el-reel-scroll-thumb);
}

.el-reel > * {
	flex: 0 0 auto;
}
.el-reel > img {
	height: 100%;
	flex-basis: auto;
	width: auto;
}

.el-reel > * + * {
	margin-left: var(--el-reel-space);
}

.el-reel.overflowing {
	padding-bottom: var(--el-reel-space);
}

/* ============================================================== The Imposter #
*/
.el-imposter {
	--el-imposter-positioning: var(--elg-imposter-positioning, absolute);
	--el-imposter-margin: var(--elg-imposter-margin, 0px);

	position: var(--el-imposter-positioning);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.el-imposter.contained {
	overflow: auto;
	max-width: calc(100% - (var(--el-imposter-margin) * 2));
	max-height: calc(100% - (var(--el-imposter-margin) * 2));
}

.el-imposter.fixed {
	--el-imposter-positioning: var(--elg-imposter-positioning, fixed);
}

/* ================================================================== The Icon #
*/
.el-icon {
	--el-icon-space: var(--elg-icon-space, 1rem);

	width: 0.75em;
	width: 1cap;
	height: 0.75em;
	height: 1cap;
}

.el-with-icon {
	display: inline-flex;
	align-items: baseline;
}

.el-with-icon .el-icon {
	margin-inline-end: var(--el-icon-space);
}