button.enb-accordion-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	cursor: pointer;
	border: 0;
	border-radius: 0;
	outline: none;
	inline-size: 100%;
	// padding: 0;
	padding-block: 8px;
	padding-inline: 0;
	background-color: transparent;
	font-size: 1.125em;
	font-weight: 600;
	text-align: unset;

	&:focus-visible {
		outline: 2px dashed;
		outline-offset: 2px;
	}

	.enb-icon,
	.enb-icon-active {
		min-inline-size: 1em;
		inline-size: 1em;
		aspect-ratio: 1;
		background-color: currentcolor;
		mask-repeat: no-repeat;
		mask-position: center;
		mask-size: 100% auto;
	}

	.enb-icon-active {
		display: none;
	}

	&[aria-expanded="true"] {

		.enb-icon {
			display: none;
		}

		.enb-icon-active {
			display: flex;
		}
	}
}

.wp-block-enblocks-accordion-item {
	border-block-end: 1px solid var(--enb-color-300);
	padding-block: 8px;
}

.enb-accordion-content {
	display: none;
	overflow: hidden;
	transition: all 0.35s ease;

	/* allow-discrete enables transitions for properties like display
	& visibility.	Their values are applied after the transition finished. */
	transition-behavior: allow-discrete;
	block-size: 0;
	padding-block-end: 8px;

	&:focus {
		outline: none;
	}

	&[open] {
		display: block;

		/* Fallback for browsers that don't support calc-size() */
		block-size: auto;
		block-size: calc-size(auto, size);

		/* Transition starts from these styles */
		@starting-style {
			block-size: 0;
		}
	}
}