bug: drawer-end cascades for nested drawers

[willtcarey]

What version of daisyUI are you using?

v4.12.13

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://play.tailwindcss.com/C3gVcWnOy2?size=762x720

Describe your issue

When using nested drawers (one for the right and one for the left), if you try to put your drawer-end as the outside drawer, it cascades down and makes both of the drawers be a "right" drawer. You can see the behavior in the Tailwind Play up above. It's modified from an existing Tailwind Play that @saadeghi posted here #2278 (comment).

That Play exhibits the correct behavior because the left drawer is the outside drawer and the right (drawer-end) drawer is the inside drawer.

[github-actions]

Thank you @willtcarey for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[willtcarey]

daisyui/src/components/unstyled/drawer.css

Lines 36 to 55 in dfec9ea

	&-end {
	grid-auto-columns: auto max-content;
	.drawer-toggle {
	& ~ .drawer-content {
	@apply col-start-1;
	}
	& ~ .drawer-side {
	@apply col-start-2 justify-items-end;
	}
	& ~ .drawer-side > *:not(.drawer-overlay) {
	transform: translateX(100%);
	[dir="rtl"] & {
	transform: translateX(-100%);
	}
	}
	&:checked ~ .drawer-side > *:not(.drawer-overlay) {
	transform: translateX(0%);
	}
	}
	}

It looks like it's this styling. I think it could be fixed by adding a direct descendant selector to the .drawer-toggle class

& > .drawer-toggle {