/* Styles are from Material UI. */
/* https://material-ui.com/demos/expansion-panels/ */

.rrui__expansion-panel {
	background-color: var(--rrui-expansion-panel-background-color);
}

.rrui__expansion-panel__header {
	display: flex;
	align-items: center;
	/*width: 100%;*/
	height: var(--rrui-expansion-panel-header-height);
	transition: height var(--rrui-expansion-panel-animation-duration) var(--rrui-expansion-panel-animation-easing);
	text-align: left;
}

.rrui__expansion-panel--expanded {
	.rrui__expansion-panel__header {
		height: var(--rrui-expansion-panel-header-height-expanded);
	}
}

.rrui__expansion-panel__content-wrapper {
	overflow: hidden;
	transition: height var(--rrui-expansion-panel-animation-duration) var(--rrui-expansion-panel-animation-easing);
}

.rrui__expansion-panel__header,
.rrui__expansion-panel__content {
	padding-left: var(--rrui-expansion-panel-padding-left);
	padding-right: var(--rrui-expansion-panel-padding-right);
}

.rrui__expansion-panel__content {
	padding-top: var(--rrui-expansion-panel-content-padding-top);
	padding-bottom: var(--rrui-expansion-panel-content-padding-bottom);
}

.rrui__expansion-panel__toggle-icon {
	width: var(--rrui-expansion-panel-toggle-icon-width);
	transform: rotate(var(--rrui-expansion-panel-toggle-icon-rotate));
	transition: transform var(--rrui-expansion-panel-animation-duration) var(--rrui-expansion-panel-animation-easing);
}

.rrui__expansion-panel--expanded {
	.rrui__expansion-panel__toggle-icon {
		transform: rotate(var(--rrui-expansion-panel-toggle-icon-rotate-expanded))
	}
}

.rrui__expansion-panel__toggle-icon--start {
	margin-right: var(--rrui-expansion-panel-toggle-icon-margin);
	order: 1;
}

.rrui__expansion-panel__toggle-icon--end {
	margin-left: var(--rrui-expansion-panel-toggle-icon-margin);
	order: 3;
}

.rrui__expansion-panel__heading {
	flex-grow: 1;
	order: 2;
}