@import "../../widgets/common/ext.cx.common";

.cx-stats-container {
	.mw-ui-item;
	.mw-ui-one-whole;

	padding: 0 50px;
	clear: both;
	background-color: #f6f6f6;
	min-height: 100vh;

	h1,
	h2 {
		margin-top: 1em;
		clear: both;
	}
}

.cx-header__publish {
	// Do not display the publish button in stats page
	display: none;
}

.cx-header.sticky {
	// Stats page does not have any sidebars. Show the header in full width.
	.mw-ui-one-whole;
}

.cx-header__translation-center a::before {
	// Do not display arrow to dashboard
	display: none;
}

.cx-stats-tabs-container {
	.mw-ui-item;
	.mw-ui-one-whole;

	border: 1px solid #eee;
	padding: 0;
	background-color: #fff;
}

.cx-stats-tabs {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid #eee;

	li {
		background: none;
		color: @gray-dark;
		display: inline-block;
		padding: 10px 15px;
		cursor: pointer;
	}

	li.cx-stats-tabs-current {
		border-bottom: 2px solid #347bff;
		color: @gray-darker;
	}
}

.cx-stats-tabs-tab-content {
	display: none;
	padding: 15px;

	&.cx-stats-tabs-current {
		display: inherit;
	}

	&.cx-stats-tabs-collapsed {
		max-height: 500px;
		overflow: hidden;
	}
}

.cx-stats-tabs-toggle-all {
	.mw-ui-one-whole;

	cursor: s-resize;
	border-top: 1px solid #eee;
	padding: 10px;
}

.cx-stats-chart {
	.mw-ui-one-whole;

	&__row {
		.mw-ui-item;
		height: 30px;
		padding: 0;
		margin: 0;

		&.separator {
			text-align: center;
			border-bottom: 2px solid @gray;
			margin-bottom: 1em;
		}
	}

	&__row-label-container {
		.mw-ui-one-quarter;
	}

	&__langcode {
		.mw-ui-one-quarter;
		text-align: right;
		text-transform: uppercase;
		font-size: 0.9em;
		color: @gray;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	&__autonym {
		.mw-ui-one-half;
		text-align: left;
		color: @gray-darker;
		overflow: hidden;
		text-overflow: ellipsis;
		font-weight: bold;
		white-space: nowrap;
	}

	&__total,
	&__total:visited {
		.mw-ui-one-quarter;
		color: @gray;
		text-align: right;
		border-right: 1px solid @gray;
		height: 30px;
	}

	&__bars {
		.mw-ui-nine-twelfths;
	}

	&__bar {
		float: left;
		height: 20px;
		padding: 0;
		margin: 0;
		box-sizing: border-box;
		background-color: #347bff;
		border-right: 1px solid @gray;
		font-size: small;
		text-transform: uppercase;
		color: #fff;
		text-overflow: ellipsis;
		text-align: left;

		&.tail {
			cursor: pointer;
			text-align: center;
		}
	}

	&__callout-container > .cx-callout-content {
		max-height: 500px;
		overflow-y: auto;
	}
}

.cx-stats-chart__callout-count {
	text-align: right;
}

.cx-stats-chart__callout-lang {
	text-align: left;
}

.cx-stats-graph {
	background-color: #fff;
	border: 1px solid #999;

	// Legend styling
	li {
		display: inline;
		padding-right: 20px;

		&:before {
			content: '\25A0';
			max-width: 0;
			max-height: 0;
			left: -10px;
			top: 0;
			font-size: 20px;
		}
	}
}

.cx-stats-highlights {
	.mw-ui-item;
	.mw-ui-two-thirds;

	margin-top: 50px;

	.cx-stats-box {
		.mw-ui-one-quarter;

		background-color: #fff;
		margin-right: 50px;
		padding: 10px;
		border: 1px solid #999;

		&__title {
			font-size: 1em;
			font-weight: bold;
		}

		&__total,
		&__trend {
			unicode-bidi: embed;
		}

		&__total {
			font-size: 2em;
			font-weight: bold;
		}

		&__trend {
			font-size: 1.5em;

			&.increase {
				color: green;
			}

			&.decrease {
				color: red;
			}
		}

		&__localtotal {
			color: @gray-dark;
			font-size: 1em;
		}
	}
}