.faq {
	list-style-type:none;
	padding-inline: 0;
	margin-block: 0;
}

.faq > li > details {
	border-block-start-color: hsla(0, 0%, 0%, 5%);
	border-block-start-style: solid;
	border-block-start-width: 1px;
}

.faq > li:last-child > details {
	border-block-end-color: hsla(0, 0%, 0%, 5%);
	border-block-end-style: solid;
	border-block-end-width: 1px;
}

.faq > li > details > summary {
	--faq_summary_padding_block: 1rem;
	list-style: none;
	vertical-align: middle;
	position: relative;
	padding-block: var(--faq_summary_padding_block);
	padding-inline-start: 3rem;
}

.faq > li > details[open] > summary {
	background-image: linear-gradient(hsla(0, 0%, 0%, 5%), hsla(0, 0%, 0%, 10%));
}

.faq > li > details > summary::before {
	--background-dimesnsion: 1.5rem;
	content: "";
	display: block;
	inline-size: var(--background-dimesnsion);
	block-size: var(--background-dimesnsion);
	transition: transform 0.5s;
	background-image: var(--icon-image-url);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: var(--background-dimesnsion) var(--background-dimesnsion);
	position: absolute;
	inset-inline-start: 1rem;
	inset-block-start: calc(var(--faq_summary_padding_block) - (var(--background-dimesnsion) * 0.25));
	transform: translateY(3px);
	/* margin-block-start: calc(var(--background-dimesnsion) * -0.5); */
}

.faq > li > details[open] > summary::before {
	transform:  translateY(3px) rotate(90deg);
}

.faq > li > details > *:not(summary) {
	position: relative;
	padding-inline-start: 3rem;
	padding-block-end: 1rem;
	padding-block-start: 1rem;
	color: var(--color-surface-default);
}