.ccm-page
	details {
		margin-top: 1em;
		summary {
			display: grid !important;
			grid-template-columns: auto 1fr auto;
			align-items: center;
			position: relative;
			cursor: pointer;
			transition-property: color;
			&:focus-visible,
			&:hover {
				color: var(--accent);
				transition-duration: 0s;
			}
			&::marker { content: none }
			&::before,
			&::after {
				content: "";
				height: 1px;
				background-color: currentcolor;
				display: block;
			}
			&::before {
				order: 1;
				height: 100%;
				background-color: transparent;
				background-image:
					linear-gradient(90deg, transparent calc(50% - .5px), var(--wtf-megapink) calc(50% - .5px), var(--wtf-megapink) calc(50% + .5px), transparent calc(50% + .5px)),
					linear-gradient(transparent calc(50% - .5px), var(--wtf-megapink) calc(50% - .5px), var(--wtf-megapink) calc(50% + .5px), transparent calc(50% + .5px));
				width: calc(1px * var(--line-height-px));
				transition-property: height;
			}
			&::after {
				margin-inline: 1rem 3rem;
			}
		}
		+ .content-wrapper {
			display: grid;
			grid-template-rows: 0fr;
			overflow: hidden;
			transition-property: grid-template-rows;

			.content {
				min-height: 0;
			}
		}
		&[open] {
			summary {
				&::before {
					height: 1px;
				}
			}
			+ .content-wrapper {
				grid-template-rows: 1fr;
			}
		}
	}
}