.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 {
	span {
		color: var(--colorLabel);
	}
	select {
		width: 110px;
		padding: 6px 8px;
		margin-left: 4px;
		background-image: none;
		text-align-last: center;
		color: var(--colorText);
		font-size: 11px;
		background-color: var(--colorBgHeaderField);
		border-radius: var(--radius);
		box-shadow: var(--boxShadowRimDrop);
		transition: background-color ease-in-out 120ms;

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

.Table {
	height: 100%;
	padding: 16px 16px 64px 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;

	&:enabled {
		box-shadow: var(--boxShadowRimDrop);
		&:hover {
			background-color: var(--colorBgFieldHover);
		}
	}

	&.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: 2px;

	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: 21px;
		align-items: center;
		justify-content: center;
		fill: none;
		stroke: var(--colorLabel);
		stroke-width: 2.5px;
		border-radius: 50%;
		box-shadow: var(--boxShadowRimDrop);
		background-color: var(--colorBgHeaderField);
	}

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

.DelayToggler {
}

.ProxyToggler {
	margin-right: 8px;

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

.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);
	}
}