:root {
	color-scheme: light dark;
	--colorBg: light-dark(#fff, #181818);
	--colorBgField: light-dark(#fcfcfc, #2c2c2c);

	--colorBgHeader: light-dark(#f2f2f3, #141414);
	--colorBgHeaderField: light-dark(#fff, #222);

	--colorBorder: light-dark(#e0e0e0, #2c2c2c);
	--colorBorderActive: light-dark(#c8c8c8, #3c3c3c);

	--colorLabel: light-dark(#555, #aaa);
	--colorText: light-dark(#000, #fff);

	--colorAccent: light-dark(#0081ff, #2495ff);
	--colorHover: light-dark(#dbedff, #062d59);

	--colorRed: light-dark(#da0f00, #f41606);
	--colorPink: light-dark(#ed206a, #ff2e7a);
	--colorPurple: light-dark(#9b71e8, #ae81ff);
	--colorGreen: light-dark(#388e3c, #a6e22e);
	--colorBg4xx: light-dark(#ffedd1, #68554a);

	accent-color: var(--colorAccent);
	--radius: 16px;
	--subtoolbarHeight: 42px;
}

html,
body {
	overflow: hidden;
	height: 100%;
	font-size: 12px;
}
body {
	display: grid;
	grid-template-rows: auto 1fr;
	background: var(--colorBg);
	color: var(--colorText);
	font-family: system-ui, sans-serif;
}

* {
	box-sizing: border-box;
	padding: 0;
	border: 0;
	margin: 0;
	letter-spacing: -0.374px;
	line-height: 14px;
	font-family: inherit;
	font-size: 100%;
	scrollbar-width: thin;
	corner-shape: squircle;
}

label,
button {
	user-select: none;
}

a:focus-visible,
input:focus-visible,
select:focus-visible,
button:focus-visible {
	outline-offset: -1px;
	outline: 2px solid var(--colorAccent);
}

a,
select,
button,
input[type=checkbox] {
	cursor: pointer;
}

a:active,
select:active,
button:active,
input[type=checkbox]:active {
	cursor: grabbing;
}

a {
	text-decoration: none;
	color: var(--colorAccent);
}

select {
	border: 1px solid transparent;
	color: var(--colorText);
	border-radius: var(--radius);
	appearance: none;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888888'><path d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z'/></svg>") no-repeat;
	background-size: 16px;
	background-position: calc(100% - 3px) center;
	transition: all 240ms ease-out;

	&:enabled {
		border-color: var(--colorBorder);
		background-color: var(--colorBgField);

		&:hover {
			border-color: var(--colorHover);
			background-color: var(--colorHover);
		}
	}

	&:disabled {
		cursor: not-allowed;
		opacity: 50%;
	}
}


header {
	display: flex;
	flex: 0 0 100%;
	padding: 16px;
	background: var(--colorBgHeader);

	.Logo {
		align-self: end;
		margin-right: 18px;
		margin-bottom: 2px;
		transition: opacity 240ms ease-in-out;

		svg {
			width: 122px;
			pointer-events: none;
			fill: var(--colorText);
		}
	}

	@media (max-width: 570px) {
		.Logo {
			display: none;
		}
	}

	&:has(.FallbackBackend) {
		@media (max-width: 740px) {
			.Logo {
				display: none;
			}
		}
	}

	> div {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		align-items: flex-end;
		gap: 16px 12px;

		&:has(.FallbackBackend) {
			@media (max-width: 600px) {
				.HelpLink {
					margin-left: unset;
				}
			}
		}
	}

	.GlobalDelayWrap {
		display: flex;
	}


	.ResetButton {
		padding: 6px 12px;
		border: 1px solid var(--colorRed);
		margin-right: 8px;
		margin-left: 4px;
		background: transparent;
		border-radius: 50px;
		color: var(--colorRed);

		@media (prefers-color-scheme: dark) {
			color: var(--colorText);
		}

		&:hover {
			background: var(--colorRed);
			color: white;
		}
	}

	.HelpLink {
		width: 22px;
		height: 22px;
		flex-shrink: 0;
		align-self: end;
		margin-bottom: 3px;
		margin-left: auto;
		opacity: 0.8;
		border-radius: 50%;
		fill: var(--colorBgHeader);
		background: var(--colorLabel);

		&:hover {
			background: var(--colorAccent);
			opacity: 1;
		}

		svg {
			transform: scale(.7);
		}
	}
}

.GlobalDelay,
.GlobalDelayJitter,
.CookieSelector,
.FallbackBackend {
	width: 116px;

	span {
		display: flex;
		align-items: center;
		margin-left: 8px;
		white-space: nowrap;
		color: var(--colorLabel);
		font-size: 11px;
		gap: 4px;
		transition: color 200ms ease-out;
	}

	&:hover {
		span {
			color: var(--colorText);
		}
	}

	input[type=url],
	input[type=number],
	select {
		width: 100%;
		height: 28px;
		padding: 4px 8px;
		border: 1px solid var(--colorBorder);
		margin-top: 2px;
		color: var(--colorText);
		font-size: 11px;
		background-color: var(--colorBgHeaderField);
		border-radius: var(--radius);
	}

	&.GlobalDelay {
		position: relative;
		width: 76px;

		input {
			padding-right: 6px;
			border-bottom-right-radius: 0;
			border-top-right-radius: 0;
		}

		svg {
			width: 12px;
			height: 12px;
			border: 1px solid var(--colorLabel);
			stroke-width: 3px;
			border-radius: 50%;
		}

		&:focus-within {
			z-index: 100;
		}
	}

	&.GlobalDelayJitter {
		width: 80px;

		&:focus-within {
			z-index: 100;
		}

		span {
			margin-left: 4px;
		}
		input {
			border-left: 2px solid transparent;
			border-bottom-left-radius: 0;
			border-top-left-radius: 0;
		}
	}

	&.CookieSelector {
		width: 100px;
	}

	&.FallbackBackend {
		position: relative;
		width: 160px;

		.SaveProxiedCheckbox {
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			width: auto;
			min-width: unset;
			align-items: center;
			gap: 4px;

			input + .checkboxBody {
				margin: 0;
				margin-right: 4px;
			}
			input:enabled + .checkboxBody {
				cursor: pointer;
			}

			input:disabled {
				cursor: not-allowed;
			}
			input:disabled + .checkboxBody {
				opacity: 0.8;
				cursor: not-allowed;
			}
		}
	}
}


main {
	display: flex;
	min-width: 0;
	min-height: 0;

	@media (max-width: 760px) {
		flex-direction: column;

		.Resizer {
			display: none;
		}

		.leftSide {
			width: 100% !important; /* because it's resizable in js */
			height: 50%;
			border-right: 0;
		}
	}

	.leftSide {
		display: grid;
		width: 50%;
		border-top: 1px solid var(--colorBorder);
		border-right: 1px solid var(--colorBorder);
		grid-template-rows: var(--subtoolbarHeight) 1fr;
	}

	.rightSide {
		position: relative;
		min-width: 100px;
		min-height: 0;
		flex: 1;
		border-top: 1px solid var(--colorBorder);

		.Resizer {
			position: absolute;
			top: 0;
			left: -1px;
			width: 8px;
			height: 100%;
			border-left: 1px solid transparent;
			cursor: col-resize;

			&:hover,
			&:active {
				border-color: var(--colorBorderActive);
			}

			&::before,
			&::after {
				position: absolute;
				left: -2px;
				content: '';
			}
			&::before {
				top: calc(50% + 6px);
				height: 22px;
				border-left: 2px solid var(--colorBg);
			}
			&::after {
				top: calc(50% + 10px);
				height: 14px;
				border-left: 3px dotted var(--colorBorder);
			}
		}
	}
}

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

.GroupByMethod {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

.BulkSelector {
	select {
		width: 110px;
		padding: 6px 8px;
		border: 1px solid var(--colorBorder);
		margin-left: 4px;
		background-image: none;
		text-align-last: center;
		color: var(--colorText);
		font-size: 11px;
		background-color: var(--colorBgHeaderField);
		border-radius: var(--radius);
	}
}

.Table {
	height: 100%;
	padding: 16px;
	padding-bottom: 64px;
	padding-left: 15px;
	user-select: none;
	overflow-y: auto;

	.TableHeading {
		padding-bottom: 4px;
		padding-left: 1px;
		border-top: 24px solid transparent;
		margin-left: 94px;
		font-weight: bold;
		text-align: left;

		&:first-of-type {
			border-top: 0;
		}

		&.canProxy {
			margin-left: 124px;
		}
	}

	.TableRow {
		display: flex;
		margin-left: 24px;

		&.animIn {
			opacity: 0;
			transform: scaleY(0);
			animation: _kfRowIn 180ms ease-in-out forwards;
		}
	}

	.FolderGroup {
		position: relative;
		border-radius: var(--radius);

		> summary {
			left: 0;
			display: flex;
			overflow: hidden;
			align-items: center;
			padding: 5px 0;
			font-weight: 500;
			font-size: 12px;
			list-style: none;
			cursor: pointer;
			user-select: none;
			color: var(--colorLabel);
			white-space: nowrap;
			text-overflow: ellipsis;
			border-radius: var(--radius);

			&:active {
				cursor: grabbing;
			}

			&::-webkit-details-marker,
			&::marker {
				display: none;
			}

			&:hover {
				background: var(--colorHover);
			}

			.FolderName {
				margin-left: 125px;
				&.canProxy {
					margin-left: 155px;
				}

				&.groupedByMethod {
					margin-left: 79px;
					&.canProxy {
						margin-left: 109px;
					}
				}
			}

			.FolderChevron {
				display: flex;
				width: 16px;
				height: 16px;
				flex-shrink: 0;
				align-items: center;
				justify-content: center;
				opacity: .7;
				transition: transform cubic-bezier(.2, .7, .8, 1.4) 400ms;
				transform: rotate(-90deg);

				svg {
					width: 100%;
					height: 100%;
				}
			}
		}

		&[open] {
			&:has(summary:hover):not(:has(details:hover)) {
				background: linear-gradient(90deg, var(--colorHover), var(--colorBg));
			}

			> summary {
				position: absolute;
				top: 0;
				left: 0;
				width: 16px;

				.FolderChevron {
					transform: rotate(0deg);
				}
				.FolderName {
					display: none;
				}
			}
		}
	}
}

@keyframes _kfRowIn {
	to {
		opacity: 1;
		transform: scaleY(1);
	}
}

.Method {
	overflow: hidden;
	min-width: 38px;
	padding: 4px 0;
	margin-top: 3px;
	margin-right: 8px;
	color: var(--colorLabel);
	font-size: 11px;
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.PreviewLink {
	position: relative;
	left: -8px;
	display: inline-block;
	width: auto;
	min-width: 140px;
	flex-grow: 1;
	padding: 6px 8px;
	margin-right: -2px;
	margin-left: 4px;
	font-weight: 500;
	border-radius: var(--radius);
	word-break: break-word;

	&:hover {
		background: var(--colorHover);
	}
	&.chosen {
		color: white;
		background: var(--colorAccent);
	}
	.dittoDir {
		opacity: 0.8;
		filter: saturate(0.1);
	}
}


.MockSelector {
	min-width: 58px;
	height: 24px;
	padding-right: 20px;
	padding-left: 8px;
	text-overflow: ellipsis;
	text-align: right;

	&.nonDefault {
		font-weight: bold;
		font-size: 11px;
	}
	&.status4xx {
		background: var(--colorBg4xx);
	}
	&:disabled {
		padding-right: 4px;
		padding-left: 0;
		border-color: transparent;
		appearance: none;
		background: transparent;
		cursor: default;
		color: var(--colorLabel);
		opacity: 0.8;
	}
}


.Toggler {
	display: flex;
	margin-top: 3px;

	input {
		/* For click drag target */
		position: absolute;
		width: 22px;
		height: 22px;
		opacity: 0;

		&:focus-visible {
			outline: 0;
			& + .checkboxBody {
				outline: 2px solid var(--colorAccent);
			}
		}

		&:disabled + .checkboxBody {
			cursor: not-allowed;
			opacity: 0.7;
		}

		&:checked + .checkboxBody {
			border-color: var(--colorAccent);
			fill: var(--colorAccent);
			background: var(--colorAccent);
			stroke: var(--colorBg);
		}

		&:enabled:hover:not(:checked) + .checkboxBody {
			border-color: var(--colorHover);
			background: var(--colorHover);
			stroke: var(--colorText);
		}
	}

	.checkboxBody {
		display: flex;
		width: 22px;
		height: 22px;
		align-items: center;
		justify-content: center;
		border: 1px solid var(--colorBorder);
		fill: none;
		stroke: var(--colorLabel);
		stroke-width: 2.5px;
		border-radius: 50%;
	}

	&.canProxy {
		margin-left: 30px;
	}
}

.DelayToggler {
}

.ProxyToggler {
	margin-right: 8px;

	.checkboxBody {
		svg {
			width: 16px;
		}
	}
}

.StatusCodeToggler {
	margin-right: 10px;
	margin-left: 8px;

	input {
		width: 26px;

		&:not(:checked):enabled:hover + .checkboxBody {
			border-color: var(--colorRed);
			color: var(--colorRed);
			background: transparent;
		}
		&:checked + .checkboxBody {
			border-color: var(--colorRed);
			color: white;
			background: var(--colorRed);
		}
	}

	.checkboxBody {
		width: 27px;
		padding: 4px;
		font-size: 10px;
		font-weight: bold;
		color: var(--colorLabel);
	}
}


.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 {
			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%;
	}
}


.ErrorToast {
	position: fixed;
	z-index: 9999;
	bottom: 12px;
	left: 12px;
	padding: 12px 16px;
	padding-right: 42px;
	cursor: pointer;
	background: var(--colorRed);
	color: white;
	border-radius: var(--radius);
	opacity: 0;
	transform: translateY(20px);
	animation: _kfToastIn 240ms forwards;

	&::after {
		position: absolute;
		top: 0;
		right: 16px;
		width: 12px;
		height: 12px;
		text-align: center;
		content: '×';
		font-size: 28px;
		line-height: 34px;
	}
}
@keyframes _kfToastIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}