/**
 * @section Sidecar
 * Side-by-side content
 */

@layer kelp.core {
	[class*="sidecar"] {
		--gap: var(--size-m);
		--main-size: initial;
		--secondary-size: initial;
		display: flex;
		flex-wrap: wrap;
		gap: var(--gap);
	}

	:is(.sidecar, .sidecar-start) > :first-child,
	.sidecar-end > :last-child {
		flex-basis: var(--secondary-size, auto);
		flex-grow: 1;
	}

	:is(.sidecar, .sidecar-start) > :last-child,
	.sidecar-end > :first-child {
		flex-basis: 0;
		flex-grow: 999;
		min-inline-size: var(--main-size, 50%);
	}
}

@layer kelp.utilities {
	[class*="sidecar"] > * {
		margin: 0;
	}
}