/*
SIDEBAR
More info: https://every-layout.dev/layouts/sidebar/
A layout that allows you to have a flexible main content area
and a "fixed" width sidebar that sits on the left or right.
If there is not enough viewport space to fit both the sidebar
width *and* the main content minimum width, they will stack
on top of each other

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(--space-s);
}

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

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

.sidebar[data-reversed] {
	flex-direction: row-reverse;
}

.sidebar[data-direction="rtl"] > :last-child {
	flex-basis: var(--sidebar-target-width, 20rem);
	flex-grow: 1;
}

.sidebar[data-direction="rtl"] > :first-child {
	flex-basis: 0;
	flex-grow: 999;
	min-width: var(--sidebar-content-min-width, 50%);
}