.block-toc {
	border: 1px solid var(--wp--preset--color--senary);
	border-radius: var(--wp--custom--border-radius--small);
	overflow: hidden;
}

.block-toc .block-toc__title {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--large);
	background-color: var(--wp--preset--color--senary);
	margin: 0;
	padding: 12px 16px 10px;
}

.block-toc__list ol {
	list-style-type: none;
	line-height: 1.5;
}

.block-toc__list > ol,
.entry-content .block-toc__list > ol {
	padding-left: 50px;
	padding-right: 50px;
	list-style-type: disc;
	margin: 24px 0;
}

.editor-styles-wrapper .block-toc__list > ol {
	padding-left: 50px;
}

.block-toc__list > ol:not(:last-child) {
	margin-bottom: 0;
}

.block-toc__list ol ol {
	padding-bottom: 0.5rem;
	position: relative;
}

.block-toc__list ol ol::before {
	content: "";
	position: absolute;
	top: 0;
	left: 5px;
	width: 1px;
	height: calc(100% - 0.5rem);
	background-color: #d2d2d2;
}

.block-toc__list ol ol li {
	position: relative;
}

.block-toc__list ol ol li::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -18px;
	width: 8px;
	height: 1px;
	background-color: #d2d2d2;
}

.block-toc__list ol ol li:not(:last-child)::before {
	transform: translateY(-0.25rem);
}

.block-toc__list ol li {
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 500;
}

.block-toc__list > ol > li {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.block-toc__list > ol > li::marker {
	color: var(--wp--preset--color--senary);
}

.block-toc__list li a {
	color: inherit;
	text-decoration: none;
}

.block-toc__list li a:is(:focus, :hover) {
	text-decoration: underline;
}

.block-toc__list .block-toc__reveal {
	background-color: transparent;
	border: none;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
	margin-left: 40px;
	margin-bottom: 1rem;
}

.block-toc__list .block-toc__reveal::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	margin-top: -2px;
	margin-left: 8px;
	width: 1em;
	height: 1em;
	background-image: url('arrow-down.svg');
	background-position: 50% 50%;
	background-size: 1em 1em;
	background-repeat: no-repeat;
}

.block-toc__list .block-toc__reveal[data-reveal="true"]::after {
	transform: rotate(180deg);
}

@media only screen and (max-width: 767px) {
	.block-toc__icon {
		display: none;
	}
}

@media only screen and (min-width: 768px) {
	.block-toc {
		display: grid;
		grid-template-columns: 482fr 318fr;
		column-gap: 32px;
	}

	.block-toc__list {
		position: relative;
	}

	.block-toc__list::before {
		content: "";
		position: absolute;
		top: 0;
		left: calc(100% + 16px);
		bottom: 0;
		width: 1px;
		background-color: var(--wp--preset--color--senary);
	}

	.block-toc .block-toc__title {
		grid-column: span 2;
	}

	.block-toc__icon {
		justify-self: center;
		margin-top: 24px;
	}
}