【Snow Monkey】CSSのみでアコーディオンにアニメーションをつける方法

/* ===================
アコーディオン開閉アニメーション
====================== */
/* 非表示(親要素) */
.smb-accordion__item:has(.smb-accordion__item__control) {
	display: grid!important;
	grid-template-rows: min-content 0fr;
	transition: grid-template-rows .2s ease-out;
}

/* 表示(親要素) */
.smb-accordion__item:has(.smb-accordion__item__control:checked) {
	grid-template-rows: min-content 1fr;
}

/* 非表示(子要素) */
.smb-accordion__item__body:has(*):not(.editor-styles-wrapper .smb-accordion__item__body, .customize-control-sidebar_block_editor .smb-accordion__item__body) {
	display: block;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
	overflow: hidden;
	min-height: 0.1px; /* 高さが0になるとスクリーンリーダーに認識されなくなるため */
	transition: padding .2s linear, opacity .2s;
}

/* 表示(子要素) */
.smb-accordion .smb-accordion__item__control:checked+.smb-accordion__item__title+.smb-accordion__item__body:has(*) {
	padding: var(--_padding1);
	opacity:1;
}

/* ===================
アコーディオン開閉アニメーション
====================== */
/* 非表示（エディターでは反映させない） */
.smb-accordion__item__body:not(.editor-styles-wrapper .smb-accordion__item__body, .customize-control-sidebar_block_editor .smb-accordion__item__body) {
	display: block;
	padding-top: 0;
	padding-bottom: 0;
	height: 0;
	opacity: 0;
	overflow: hidden;
	transition: padding .2s ease-out, height .2s ease-out, opacity .2s;
}

/* 表示 */
.smb-accordion .smb-accordion__item__control:checked+.smb-accordion__item__title+.smb-accordion__item__body {
	padding: var(--_padding1);
	height: auto;
	opacity:1;
}