.ct-accordion-item {
	display: grid;
	grid-template-rows: var(--ct-accordion-heading-height, 60px) 0fr;
	border-bottom: 1px solid #eee;
	transition: grid-template-rows 0.3s ease;

	&.active {
		grid-template-rows: var(--ct-accordion-heading-height, 60px) 1fr;

		> .ct-accordion-heading svg {
			transform: rotate(180deg);
		}
	}

	&:not(:hover):not(.active) {
		.ct-accordion-heading svg {
			color: #787c82;
		}
	}
}

.ct-accordion-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 0 15px;
	font-size: 1em;
	cursor: pointer;
}

.ct-accordion-item-controls {
	display: flex;
	align-items: center;

	select {
		font-weight: 400;
		width: 200px;
		margin-inline-start: 10px;
	}

	svg {
		margin-inline-start: 15px;
	}
}

.ct-accordion-item-content {
	overflow: hidden;
}

.ct-accordion-options-container {
	padding: 20px;
	border-top: 1px solid #eee;

	// inner accordion
	.ct-accordion-item {
		border: 1px solid #eee;
		--ct-accordion-heading-height: 40px;
		--revert-button-offset: 17px;

		&:not(:last-child) {
			margin-bottom: 10px;
		}

		.ct-accordion-heading {
			font-size: 0.9em;
			border-radius: inherit;
			background: rgb(250 250 250 / 100%);
		}
	}
}
