/* 
	Align as row variant
	======================================================
*/
:is(ul, ol)[data-scheme="row"] {
	--list-row-gap: 1rem;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--list-row-gap);
	list-style-type: '';
	padding: 0;
}

/*
	Checklist variant
	======================================================
*/
ul[data-scheme="checklist"] {
	list-style-type: "✓\0020";
	list-style-position: inside;
}

ul[data-scheme="checklist"] > li {
	padding-inline-start: 0.25rem;
}

ul[data-scheme="checklist"] > li::marker {
	font-size: 1.5em;
	font-weight: 600;
	color: var(--color-brown-600);
}

ul[data-scheme="checklist"] > li + li {
	margin-block-start: 0.25rem;
}

.container:is(
	[data-theme="rich"],
	[data-theme="emphasis"]
) ul[data-scheme="checklist"] > li::marker {
	color: var(--color-brown-100);
}

/*
	FAQ variant
	======================================================
*/
ul[data-scheme="faq"] {
	list-style-type: none;
	padding-inline: 0;
	margin-block: 0;
}

ul[data-scheme="faq"] > li > details {
	border-block-start-color: hsla(0, 0%, 0%, 5%);
	border-block-start-style: solid;
	border-block-start-width: 1px;
}

ul[data-scheme="faq"] > li:last-child > details {
	border-block-end-color: hsla(0, 0%, 0%, 5%);
	border-block-end-style: solid;
	border-block-end-width: 1px;
}

ul[data-scheme="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;
}

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

ul[data-scheme="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); */
}

ul[data-scheme="faq"] > li > details[open] > summary::before {
	transform:  translateY(3px) rotate(90deg);
}

ul[data-scheme="faq"] > li > details > *:not(summary) {
	position: relative;
	padding-inline-start: 3rem;
	padding-block-end: 1rem;
	padding-block-start: 1rem;
	color: var(--color-surface-default);
}

ul[data-scheme="faq"] > li > details summary::-webkit-details-marker {
	display: none;
}