.doc-box {
	line-height: 2;

	p {
        @apply my-2;
	}

	.toc-box {
		width: 12em;
		position: fixed;
		top: 3.7em;
		bottom: 0;
        @apply bg-gray-50 pt-4 pb-4;
        border-right: 1px #eee solid;
        @apply dark:bg-transparent dark:border-r-gray-800;
		overflow-y: auto;
        line-height: 2.2;

		ul {
			list-style: none;
			padding: 0;

			li {
				padding-left: 1em;

				li {
				}
			}
		}

		a {
			color: #333;
            @apply dark:text-white;
		}

		a.active {
			color: #4183c4;
            @apply dark:text-white;
		}
	}

	.toc-box.right {
        line-height: 2;
		top: 5em;
		right: 1em;
		bottom: 0;
		z-index: 10;
		border-right: none;
		border-left: 1px var(--p-content-border-color) solid;
		background: white;
        @apply dark:bg-transparent dark:border-l-gray-800;
	}

	.toc-box::-webkit-scrollbar {
		width: 4px;
	}

	.content-box {
		margin-left: 13em;
		margin-right: 11em;

		img {
			max-width: 600px;
			margin-top: 1em;
		}

		h1, h2, h3, h4, h5, h6 {
			font-weight: normal;
		}

		> ul, > ol {
			padding-left: 1.2em;
            li {
                @apply my-2;
            }

			> li > ul {
				padding-left: 1.6em;

				> li > ul {
					padding-left: 1.6em;
				}
			}
		}

		code {
			border: 1px #eee solid;
			padding: 2px 1px;
		}

		pre {
			code {
				border: none;
                @apply dark:bg-gray-800 bg-gray-100 px-4 py-2;
				display: block;
			}
		}
	}
}