[data-accordion] {
	& [data-accordion-content] {
		overflow: clip;

		&[data-accordion-selected] {
			clip-path: inset(0);
			animation: accordion-open 0.5s var(--ease-out);

			/* visibility: visible;
				transition:
					height 0.5s var(--ease-out),
					visibility 0s; */
		}

		&:not([data-accordion-selected]) {
			clip-path: inset(0 0 100% 0);
			margin-bottom: calc(-1 * var(--accordion-content-height, 0px));
			animation: accordion-close 0.5s var(--ease-out);

			/* visibility: hidden;
				transition:
					height 0.5s var(--ease-out),
					visibility 0s 0.5s; */
		}
	}
}

@keyframes accordion-open {
	from {
		visibility: visible;
		clip-path: inset(0 0 100% 0);
		margin-bottom: calc(-1 * var(--accordion-content-height, 0px));
	}

	to {
		clip-path: inset(0);
		margin-bottom: 0;
	}
}

@keyframes accordion-close {
	from {
		clip-path: inset(0);
		margin-bottom: 0;
	}

	to {
		clip-path: inset(0 0 100% 0);
		margin-bottom: calc(-1 * var(--accordion-content-height, 0px));
		visibility: hidden;
	}
}