@layer base {
	[data-accordion] {
		& [data-accordion-content] {
			/* we use opacity here instead of visibility to hide content,
			so that tab focusing the content inside is not prevented */

			height: var(--accordion-content-height, auto);
			overflow: hidden;
			transition:
				height 0.5s var(--ease-out),
				opacity 0s 0s;

			&:not(
				[data-accordion-selected],
				:has(:is(.has-child-selected, .is-selected))
			) {
				height: 0;
				opacity: 0;
				transition:
					height 0.5s var(--ease-out),
					opacity 0s 0.5s;
			}
		}
	}
}