.PayloadSubToolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-right: 14px;
	padding-left: 16px;
	border-bottom: 1px solid var(--colorBorder);
	background: var(--colorBgHeader);
}


.PayloadViewer {
	display: grid;
	height: 100%;
	grid-template-rows: var(--subtoolbarHeight) 1fr;

	> pre {
		overflow: auto;
		height: 100%;
		padding: 16px;
		padding-top: 12px;
		font-family: monospace;

		&:has(> code > :is(iframe, video)) {
			padding: 0;
		}

		> code {
			line-height: 1.3;
			white-space: pre;
			tab-size: 2;
			color: var(--colorLabel);

			> video {
				width: 100%;
			}
			> iframe {
				width: 100%;
				height: 100%;
			}
		}
	}
}

.syntaxPunc {
	color: var(--colorLabel);
}
.syntaxKey,
.syntaxTag {
	color: var(--colorPink);
}
.syntaxVal,
.syntaxAttr {
	color: var(--colorPurple);
}
.syntaxStr,
.syntaxAttrVal {
	color: var(--colorGreen);
}


.ProgressBar {
	position: relative;
	top: -12px;
	left: -16px;
	width: calc(100% + 32px);
	height: 2px;
	background: var(--colorBgHeaderField);

	> div {
		position: absolute;
		top: 0;
		left: 0;
		width: 0;
		height: 100%;
		background: var(--colorAccent);
		animation-name: _kfProgress;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		/* animation-duration is set in JS */
	}
}
@keyframes _kfProgress {
	to {
		width: 100%;
	}
}