/* https://piccalil.li/blog/a-revisit-of-the-every-layout-sidebar-with-has-and-selector-performance/ */

/* 
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 
*/

:has(> .sidebar) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sidebar-gap, 1rem);
}

.sidebar {
    /* ↓ The width when the sidebar *is* a sidebar */
    flex-basis: var(--sidebar-size, 20rem);
    flex-grow: 1;
}

:has(> .sidebar)> :not(.sidebar) {
    /* ↓ Grow from nothing */
    flex-basis: 0;
    flex-grow: 999;
    /* ↓ Wrap when the elements are of equal width */
    min-inline-size: var(--sidebar-wrap-at, 50%);
}

/* Sidebar test */
:has(> .sidebar)> :only-child,
:has(> .sidebar)> :nth-child(3) {
    outline: var(--error-outline);
    --error: 'Sidebar layouts must include exactly two child elements.';
}