/*
CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-size-1)): This defines the space
between the sidebar and main content.

--sidebar-target-width (20rem): How large the sidebar should be

--sidebar-content-min-width(50%): The minimum size of the main content area

EXCEPTIONS
.sidebar[data-direction='rtl']: flips the sidebar to be on the right 
*/
.sidebar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gutter, var(--space-xs-s));
}

.sidebar > :first-child {
	flex-basis: var(--sidebar-target-width, 20rem);
	flex-grow: 1;
}

.sidebar > :last-child {
	flex-basis: 0;
	flex-grow: 999;
	min-width: var(--sidebar-content-min-width, 50%);
}

/* 
A flipped version where the sidebar is on the right
*/
.sidebar[data-direction="rtl"],
.sidebar--reverse[data-direction="rtl"] {
	flex-direction: row-reverse;
}

/* REVERSE sidebar on right*/

.sidebar--reverse {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gutter, var(--space-xs-s));
}

.sidebar--reverse > :last-child {
	flex-basis: var(--sidebar-target-width, 20rem);
	flex-grow: var(--sidebar-target-grow, 1);
}

.sidebar--reverse > :first-child {
	flex-basis: 0;
	flex-grow: 999;
	min-width: var(--sidebar-content-min-width, 50%);
}