collapsible-react-component/dist/index.css

Collapses and expands content with an animation.

.Collapsible-module_wrapper__URAGe {
	--Collapsible-transition-duration: 0.3s;
	--Collapsible-transition-timing-function: ease;
	display: grid;
	transition-property: grid-template-rows, visibility;
	transition-timing-function: var(--Collapsible-transition-timing-function);
	transition-duration: var(--Collapsible-transition-duration);
}

@media (prefers-reduced-motion: reduce) {
	.Collapsible-module_wrapper__URAGe {
		/* 1ms is expected to be 1 frame / instant */
		--Collapsible-transition-duration: 1ms;
		--Collapsible-transition-timing-function: step-end;
	}
}

.Collapsible-module_is_state_closed__bttZl {
	grid-template-rows: 0fr;
	visibility: hidden;
}

.Collapsible-module_is_state_open__qtklu {
	grid-template-rows: 1fr;
}

.Collapsible-module_is_revealType_bottomFirst__SY2kp .Collapsible-module_in__d4G0r {
	align-items: flex-end;
}

.Collapsible-module_is_revealType_topFirst__UTi0- .Collapsible-module_in__d4G0r {
	align-items: flex-start;
}

.Collapsible-module_is_transitioning__hZ6h3 .Collapsible-module_in__d4G0r,
.Collapsible-module_is_state_closed__bttZl .Collapsible-module_in__d4G0r {
	overflow: hidden;
}

.Collapsible-module_in__d4G0r {
	display: flex;
	align-items: flex-end;
}

.Collapsible-module_content__lts9O {
	width: 100%;
}