details {
	background-color: var(--col-bg2);
	border-color: var(--col-bg3);
	border-style: solid;
	border-radius: var(--br-tl, var(--border-radius)) var(--br-tr, var(--border-radius))
		var(--br-br, var(--border-radius)) var(--br-bl, var(--border-radius));
	padding: 0.5rem 1ch;

	@media (prefers-reduced-motion: no-preference) {
		interpolate-size: allow-keywords;

		&::details-content {
			opacity: 0;
			block-size: 0;
			overflow-y: clip;
			transition: 
				content-visibility calc(0.2s * var(--enable-animation, 1)) allow-discrete ease-out, 
				block-size calc(0.2s * var(--enable-animation, 1)) ease-out, 
				opacity calc(0.2s * var(--enable-animation, 1)) ease-out;
		}
	}

	&[open]::details-content {
		opacity: 1;
		block-size: auto;
	}

	> summary {
		position: relative;
		font-weight: 500;
		cursor: pointer;
		
		@media not all and (forced-colors: active) {
			padding-left: 1rem;
			list-style-type: none;

			&::marker,
			&::-webkit-details-marker {
				display: none;
			}

			&::before {
				content: "";
				position: absolute;
				left: -1ch;
				width: 0;
				height: 0;
				border: 0.5rem solid transparent;
				border-left: 0.5rem solid var(--col-accent);
				transform: translate(0.625rem, 0.25lh) rotate(var(--dstr, 0deg));
				transform-origin: 25% center;
				transition: transform calc(0.1s * var(--enable-animation, 1)) ease-out;
			}

			&:hover::before {
				border-left-color: var(--col-accent2);
			}
		}
	}

	&[open] > summary {
		&::before {
			--dstr: 90deg;
		}
	}
}