/* Article code panel. The toolbar occupies its own row above the code. */
.pre.adv {
	position: relative;
	direction: ltr;
	border-radius: 10px;
	overflow: hidden;
	background: var(--synxBg);
	color: var(--synxC);
}
.pre.adv::before { display: none; }
.pre.adv pre {
	margin: 0;
	padding: 16px 20px 20px;
	border-radius: 0;
	background: inherit;
	color: inherit;
	overflow: auto;
	white-space: pre;
	tab-size: 2;
	touch-action: manipulation;
}
.pre.adv pre code {
	display: block;
	padding: 0;
	font: inherit;
	color: inherit;
	background: transparent;
	white-space: inherit;
	border-radius: 0;
}
.preM {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 10px 10px 10px 20px;
	background: rgba(0, 0, 0, .04);
}
.preT {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--fontC);
	font-size: 12px;
	line-height: 1.4;
}
.preA { display: flex; gap: 8px; flex-shrink: 0; }
.preA button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: #d9d9d9;
	cursor: pointer;
}
.preA button:hover { border-radius: 40%; }
.preA button svg { width: 18px; height: 18px; fill: #2e2e2e; stroke: none; transition: .5s; }
.pre.cpd .prCp svg, .pre.dwn .prDl svg, .pre.pnd .prDl svg { animation: 1s enCodeBoxJiggle; }
.pre.cpd .prCp svg .a, .pre.dwn .prDl svg .a, .pre.pnd .prDl svg .a, .pre:not(.cpd) .prCp svg .b, .pre:not(.dwn) .prDl svg .c, .pre:not(.pnd) .prDl svg .b { opacity: 0; }
.preA button:focus-visible, .pre.adv pre:focus-visible {
	outline: 2px solid var(--linkB);
	outline-offset: -2px;
}
.preStatus:not(:empty) {
	display: block;
	padding: 8px 20px;
	font-family: var(--fontB);
	font-size: 12px;
	direction: rtl;
}
.preCopyBuffer {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}
@keyframes enCodeBoxJiggle {
	0%, 100% { transform: rotate(0); }
	20%, 60% { transform: rotate(26deg); }
	40%, 80% { transform: rotate(-26deg); }
}
.drK .pre.adv { background: var(--darkBs); color: var(--darkT); }
.drK .preM { background: #303031; }
.drK .preA button { background: #252526; }
.drK .preA button svg { fill: #d5d5d5; }
