@import 'mediawiki.skin.variables.less';

.mw-debug {
	width: 100%;
	background-color: @background-color-notice-subtle;
	border-top: 1px solid @border-color-base;

	pre {
		padding: 0;
		margin: 0;
		background: none;
		border: 0;
		font-size: @font-size-small;
	}

	table {
		border-spacing: 0;
		width: 100%;
		table-layout: fixed;

		tr {
			background-color: @background-color-base;

			&:nth-child( even ) {
				background-color: @background-color-interactive-subtle;
			}
		}

		td,
		th {
			padding: 4px 10px;
		}

		td {
			border-bottom: 1px solid @border-color-muted;
			word-wrap: break-word;

			/* stylelint-disable-next-line selector-class-pattern */
			&.nr {
				text-align: right;
			}

			/* stylelint-disable-next-line selector-class-pattern */
			span.stats {
				color: @color-placeholder;
			}
		}
	}

	ul {
		margin: 0;
		list-style: none;
	}

	li {
		padding: 4px 0;
		width: 100%;
	}
}

.mw-debug-bits {
	text-align: center;
	border-bottom: 1px solid @border-color-base;
}

.mw-debug-bit {
	display: inline-block;
	padding: 10px 5px;
	font-size: @font-size-small;
}

.mw-debug-panelink {
	background-color: @background-color-notice-subtle;
	border-right: 1px solid @border-color-subtle;

	&:first-child {
		border-left: 1px solid @border-color-subtle;
	}

	&:hover {
		background-color: @background-color-button-quiet--hover;
		cursor: pointer;
	}

	/* stylelint-disable-next-line selector-class-pattern */
	&.current {
		background-color: @background-color-button-quiet--active;
	}
}

a.mw-debug-panelabel,
a.mw-debug-panelabel:visited {
	color: @color-emphasized;
}

.mw-debug-pane {
	height: 300px;
	overflow: scroll;
	display: none;
	font-family: monospace, monospace;
	background-color: @background-color-progressive-subtle;
	box-sizing: border-box;
	font-size: @font-size-small;
}

#mw-debug-pane-debuglog,
#mw-debug-pane-request {
	padding: 20px;
}

#mw-debug-pane-request {
	table {
		width: 100%;
		margin: 10px 0 30px;
	}

	tr,
	th,
	td,
	table {
		border: 1px solid @border-color-subtle;
		border-collapse: collapse;
		margin: 0;
	}

	th,
	td {
		padding: 8px 10px;
		font-size: @font-size-small;
	}

	th {
		background-color: @background-color-warning-subtle;
		font-weight: bold;
	}

	td {
		background-color: @background-color-transparent;
	}
}

#mw-debug-console tr td {
	&:first-child {
		font-weight: bold;
		vertical-align: top;
	}

	&:last-child {
		vertical-align: top;
	}
}

.mw-debug-console-log {
	background-color: @background-color-content-added;
}

.mw-debug-console-warn {
	background-color: @background-color-warning-subtle;
}