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

@layer kelp.core {
	.action-header {
		--gap: var(--size-m);
		--main-size: initial;
		--secondary-size: initial;
		display: flex;
		align-items: baseline;
		gap: var(--gap);
	}

	.action-header > :last-child {
		flex-basis: var(--secondary-size, auto);
		flex-grow: 1;
	}

	.action-header > :first-child {
		flex-basis: 0;
		flex-grow: 999;
		min-inline-size: var(--main-size, 50%);
	}

	/**
	 * Adjust padding/margin on the button used for the action
	 */
	.action-header > :last-child button {
		--padding-block: var(--size-4xs);
		--padding-inline: var(--size-4xs);
	}

	.action-header > :last-child button:last-child {
		margin-block-start: calc(-1 * var(--padding-block));
		margin-inline-end: calc(-1 * var(--padding-inline));
	}
}

@layer kelp.utilities {
	.action-header > * {
		margin: 0;
	}
}