*,
*::before,
*::after {
	box-sizing: border-box;
}

:host {
	display: block;
}

.accordion__item {
	border: 1px solid
		var(--g-color-border-subtle, var(--g-color-border-default));
	border-radius: var(--g-border-radius-md, 0.5rem);
}

.accordion__item::details-content {
	block-size: 0;
	overflow: clip;
	transition:
		block-size 0.25s ease,
		content-visibility 0.25s allow-discrete;
}

.accordion__item[open]::details-content {
	block-size: auto;
}

.accordion__summary {
	padding: var(--g-spacing-md);
	cursor: pointer;
	background: var(--g-color-background-subtle);
	font-weight: var(--g-typography-body-font-weight);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--g-spacing-md);
	border-radius: var(--g-border-radius-md, 0.5rem);
	transition-property: background-color, outline-width, outline-color;
}

.accordion__summary:hover {
	background: var(
		--g-color-background-subtle-hover,
		var(--g-color-background-subtle)
	);
}

.accordion__summary::-webkit-details-marker {
	display: none;
}

.accordion__chevron {
	display: block;
	inline-size: 1em;
	block-size: 1em;
	flex-shrink: 0;
	transition: transform 0.25s ease;
	color: var(--g-color-content-subtle, currentColor);
}

.accordion__item[open] .accordion__chevron {
	transform: rotateX(180deg);
}

.accordion__content {
	padding: var(--g-spacing-md);
	background: var(--g-color-background-default);
	border-radius: 0 0 var(--g-border-radius-md, 0.5rem)
		var(--g-border-radius-md, 0.5rem);
}

@media (prefers-reduced-motion: reduce) {
	.accordion__chevron {
		transition: none;
	}

	.accordion__item::details-content {
		transition: none;
	}
}