/**
 * Color palette
 * Same colors as OOUI
 */
@bg: #fff;
@text: #202122;
@border: #a2a9b1;
@background: #f8f9fa;
@link: #3366cc;
@redlink: #a55858;
@active: #f55;

/**
 * Dark mode
 * Same colors as Google's dark mode
 */
@dark-bg: #202122;
@dark-text: #bdc1c6;
@dark-border: #3c4043;
@dark-background: #303134;
@dark-link: #8ab4f8;

/**
 * Break points
 */
@small: 600px;
@medium: 1016px;
@large: 1500px;

/**
 * Site-wide elements
 */
body {
	background: @bg;
	color: @text;
	font-family: Arial;
	font-size: 14px;
	margin: 0;
}
a {
	color: @link;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
h1, h2, h3, h4, h5, h6 {
	page-break-after: avoid;
	margin: 1em 0 .5em 0;
	overflow: hidden;
	scroll-padding-top: 80px;
}
h1 {
	page-break-before: always;
	font-size: 2.5em;
}
h2 {
	font-size: 2em;
}
h3 {
	font-size: 1.5em;
}
h4, h5, h6 {
	font-size: 1em;
}
fieldset {
	border: 1px solid @border;
	margin: 1em 0;
}
img {
	page-break-inside: avoid;
}
pre {
	overflow: hidden;
	white-space: pre-wrap;
}
sup {
	line-height: 1em;
}
tr {
	page-break-inside: avoid;
}
hr {
	border: 0;
	border-top: 1px solid @border;
}
code, tt {
	background: @background;
	border: 1px solid @border;
	padding: 0 .2em;
}
dt {
	font-weight: bold;
}

/**
 * Header
 */
#poncho-header-wrapper {
	background: @background;
	border-bottom: 1px solid @border;
	box-shadow: 0 0 2px @border;
	box-sizing: border-box;
	padding: .5em;
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 9;
}
#poncho-header {
	background: inherit;
}

/**
 * Logo
 */
#poncho-logo-wrapper {
	float: left;
}
#poncho-logo {
	color: inherit;
	display: table;
	text-decoration: none;
	img {
		display: block;
	}
	span {
		display: table-cell;
		padding-left: .5em;
		vertical-align: middle;
	}
}
#poncho-wordmark {
	font-size: 1.5em;
}

/**
 * Search form
 */
#poncho-search-form {
	box-sizing: border-box;
	margin: auto;
	overflow: hidden;
	padding: .5em;
	text-align: right;
	max-width: @small;
}
#poncho-search-input {
	overflow: hidden;
	width: auto;
}
#poncho-search-suggestions {
	display: none;
}
#poncho-search-button {
	float: right;
	margin-left: .5em;
	.oo-ui-buttonElement-button {
		border-radius: 50%;
		opacity: .5;
	}
}
#poncho-close-button {
	float: left;
}
@media ( max-width: @small ) {
	#poncho-search-input {
		display: none;
	}
}

/**
 * Menus
 */
.poncho-menu {
	background: inherit;
	display: inline-block;
	position: relative;
	z-index: 8;
	.oo-ui-buttonElement {
		padding: .5em 0;
	}
	.oo-ui-buttonElement-button {
		border-radius: 50%;
	}
	.oo-ui-buttonElement-button.active {
		background-color: @active;
	}
	&:hover .poncho-menu-list {
		display: block;
	}
}
#poncho-header {
	.oo-ui-buttonElement-button {
		opacity: .5;
	}
	.poncho-menu:hover .oo-ui-buttonElement-button {
		background-color: @background;
		filter: brightness(.9);
	}
}
.poncho-menu-list {
	background: inherit;
	border: 1px solid @border;
	box-shadow: -1px 1px 2px @border;
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	a, .text {
		color: inherit;
		cursor: pointer;
		display: block;
		margin: 0;
		padding: 1em;
		text-decoration: none;
	}
	li:hover {
		background: inherit;
		filter: brightness(.95);
	}
}
#poncho-navigation-wrapper {
	background: inherit;
	float: left;
}
#poncho-right-menus-wrapper {
	background: inherit;
	float: right;
}
#poncho-menu-icon {
	margin-left: .5em;
}
#poncho-right-menus-wrapper,
#poncho-more-menu {
	.poncho-menu-list {
		right: 0;
		text-align: right;
	}
}

/**
 * Content actions
 */
#poncho-content-actions {
	float: right;
	margin-bottom: 1em;
	.oo-ui-buttonElement-button {
		border-radius: 50%;
		position: relative;
	}
	& > span {
		line-height: 2.5em;
	}
	& > .oo-ui-buttonElement .oo-ui-buttonElement-button[title]:not([title=""]):hover:after {
		background: @border;
		color: white;
		content: attr( title );
		line-height: 1em;
		opacity: .8;
		padding: .5em;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		z-index: 1;
	}
	a {
		background-image: none;
	}
}
#poncho-more-menu {
	ul {
		background: @background;
	}
	a {
		padding: .5em;
	}
	// Add separator between content actions and tools
	#t-whatlinkshere {
		border-top: 1px solid @border;
	}
}

/**
 * Indicators
 */
.mw-indicators {
	float: right;
	margin: 1em;
	.mw-indicator {
		display: inline-block;
	}
}

/**
 * Title
 */
#firstHeading {
	page-break-before: avoid;
	.poncho-title-dash {
		margin: 0 .5em;
	}
	.poncho-title-colon {
		margin-right: .5em;
	}
}
@media ( max-width: @small ) {
	#firstHeading {
		clear: both;
	}
}
#siteSub {
	display: none;
	font-style: italic;
}
#contentSub {
	font-size: small;
	margin: 1em 0;
	.subpages {
		display: none;
	}
}
#contentSub2 {
	font-size: small;
	margin: 1em 0;
}

/**
 * Content
 */
#poncho-content-wrapper {
	padding: 1em;
}
#poncho-content {
	margin: 1em auto;
	max-width: @medium;
}
#content {
	clear: both;
	line-height: 1.5;
	margin: 2em 0;
	width: 100%;
}
.mw-body-content {
	ol,
	ul {
		margin: 0 0 0 2em;
		padding: 0;
	}
	pre {
		background: @background;
		border: 1px solid @border;
		padding: 1em;
	}
}

/**
 * Table of contents
 */
#toc {
	box-sizing: border-box;
	padding: 1em;
	position: fixed;
	top: 80px;
	left: 0;
	width: 250px;
	.toctitle {
		display: none;
	}
	.tocnumber {
		display: none;
	}
	.toctext:hover {
		text-decoration: underline;
	}
	a:hover {
		text-decoration: none;
	}
	ul {
		margin: 0;
	}
	ul ul {
		margin-left: 1em;
	}
	li {
		list-style: none;
	}
}
@media ( max-width: @large ) {
	#toc {
		background: @background;
		border: 1px solid @border;
		display: table;
		margin: 1em 0;
		position: static;
		width: auto;
	}
}
// Hide it per useless
#filetoc {
	display: none;
}

/**
 * Footer
 */
#poncho-footer-wrapper {
	margin: 80px auto;
	padding: 1em;
}
#poncho-footer {
	border-top: 1px solid @border;
	box-sizing: border-box;
	clear: both;
	margin: 1em auto;
	text-align: center;
	padding: 1em 0;
	max-width: @medium;
	div {
		margin: 1em 0;
	}
	a {
		white-space: nowrap;
	}
}

/**
 * Misc
 */
#wpTextbox1 {
	box-sizing: border-box;
}
.new,
.new a {
	color: @redlink;
}
.error {
	color: @redlink;
}
.center {
	text-align: center;
}
.floatleft {
	float: left;
}
.floatright {
	float: right;
}
.selflink,
.selflink:hover {
	color: inherit;
	font-weight: bold;
	text-decoration: none;
}
.external {
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=) no-repeat center right;
	padding-right: 1em;
	word-break: break-word;
}
.plainlinks a {
	background: none;
	padding: 0;
}
.patrollink {
	margin: 1em 0;
}
.searchresults {
	margin: 1em 0;
}
.mw-headline {
	scroll-margin-top: 80px;
}
.mw-editsection {
	display: none;
	font-size: small;
	font-weight: normal;
	a {
		margin-left: 1em;
	}
	.mw-editsection-divider,
	.mw-editsection-bracket {
		display: none;
	}
}
h1, h2, h3, h4, h5, h6 {
	&:hover .mw-editsection {
		display: inline;
	}
}
.mw-empty-elt {
	display: none;
}
.printfooter {
	display: none;
}

/**
 * OOUI overrides
 * !important is often necessary because OOUI loads via JavaScript
 */
.oo-ui-dialog,
.oo-ui-selectWidget {
	z-index: 9 !important;
}
.mw-changeslist-legend {
	background: @background !important;
	border-color: @border !important;
}

/**
 * Media
 */
span[typeof="mw:File"],
figure[typeof="mw:File"] {
	margin: 0;
	img {
		page-break-inside: avoid;
		vertical-align: middle;
	}
	&.mw-halign-left {
		clear: left;
		float: left;
		margin-right: 1em;
	}
	&.mw-halign-right {
		clear: right;
		float: right;
		margin-left: 1em;
	}
}
figure[typeof="mw:File/Thumb"] {
	background: @background;
	border: 1px solid @border;
	clear: right;
	float: right;
	margin: 0 0 1em 1em;
	width: min-content;
	& > a,
	& > span {
		display: block;
		margin: 1em;
	}
	img {
		vertical-align: middle;
	}
	figcaption {
		margin: 1em;
		font-size: small;
	}
	&.mw-halign-left {
		clear: left;
		float: left;
		margin: 0 1em 1em 0;
	}
	&.mw-halign-none {
		float: none;
		margin: 1em 0;
	}
}
@media ( max-width: @small ) {
	figure[typeof="mw:File/Thumb"] {
		float: none;
		margin: 1em auto;
		& > a,
		& > span {
			margin: 1em;
		}
		&.mw-halign-left {
			float: none;
			margin: 1em auto;
		}
	}
}

/**
 * Galleries
 */
#mw-content-text .gallery {
	margin: 1em 0;
	.thumb {
		margin: 0;
	}
	&.mw-gallery-traditional .thumb {
		background: @background;
		border-color: @border;		
		display: flex;
		align-items: center;
		span {
			margin: auto;
		}
	}
	.gallerytextwrapper {
		margin: 0;
	}
	.gallerytext {
		padding: .5em;
		p {
			margin: 0;
		}
	}
}

/**
 * Wikitables
 */
.wikitable {
	background: @background;
	border-collapse: collapse;
	margin: 1em 0;
	th,
	td {
		border: 1px solid @border;
		padding: .2em .5em;
	}
	figure {
		background: transparent;
		border: none;
		margin: 0;
	}
}

/**
 * Special:RecentChanges
 */
.mw-changeslist-line {
	margin-left: 0 !important;
}
.mw-changeslist-line td {
	min-width: 30px;
}
.mw-collapsible-toggle {
	margin-left: 1em;
}
.mw-collapsible-bracket {
	display: none;
}

/**
 * Categories
 */
#catlinks {
	clear: both;
	margin: 1em 0;
	> div {
		display: inline;
		font-size: 0;
	}
	ul {
		display: inline;
		font-size: 14px;
		margin: 0;
		padding: 0;
	}
	li {
		display: inline-block;
		margin: 0 .5em .5em 0;
	}
	li a {
		background: @background;
		border: 1px solid @border;
		border-radius: 1em;
		color: inherit;
		display: inline-block;
		padding: .3em .7em;
		text-decoration: none;
	}
	li a.new {
		color: @redlink;
	}
	.mw-hidden-catlinks {
		opacity: .5;
	}
	.mw-hidden-catlinks:not(.mw-hidden-cats-user-shown) {
		display: none;
	}
}

/**
 * Extensions
 */
// Extension:VisualEditor
.ve-ui-surface {
	ol,
	ul {
		margin: 0 0 0 2em;
		padding: 0;
	}
	pre {
		background: @background;
		border: 1px solid @border;
		padding: 1em;
	}
}
.ve-ui-toolbar-floating > .oo-ui-toolbar-bar {
	top: 61px !important;
}
.ve-ui-overlay-global {
	z-index: 9 !important;
}
// Extension:Maps
[id^=map] {
	z-index: 0;
}

/**
 * Dark mode
 */
.poncho-dark-mode {
	background-color: @dark-bg;
	color: @dark-text;

	figure[typeof="mw:File/Thumb"],
	#poncho-header-wrapper,
	#poncho-more-menu ul,
	#mw-content-text tt,
	#mw-content-text pre,
	#mw-content-text code,
	#mw-content-text .gallery .thumb,
	#catlinks li a,
	.wikitable,
	.wikitable th,
	.wikitable td,
	.mw-prefs-buttons {
		background-color: @dark-background;
		border-color: @dark-border;
	}

	@media ( max-width: @large ) {
		#toc {
			background-color: @dark-background;
			border-color: @dark-border;
		}
	}

	a:not(.new) {
		color: @dark-link;
	}

	#poncho-logo {
		filter: invert( .9 );
	}

	.poncho-menu {
		li:hover {
			filter: brightness( 1.1 );
		}
		a {
			color: @dark-text;
		}
	}

	/**
	 * OOUI overrides
	 * !important is generally necessary because most of OOUI loads via JavaScript
	 */
	.mw-ui-button,
	.oo-ui-window-content,
	.oo-ui-inputWidget-input,
	.oo-ui-selectFileWidget,
	.oo-ui-buttonElement-button,
	.oo-ui-tagMultiselectWidget-handle {
		background-color: @dark-background !important;
		border-color: @dark-border !important;
		color: @dark-text !important;
	}
	.oo-ui-buttonElement-frameless .oo-ui-buttonElement-button {
		background-color: transparent !important;
		border-color: transparent !important;
	}
	.oo-ui-buttonElement-button.active {
		background-color: @active !important;
	}
	.oo-ui-tabSelectWidget-framed,
	.oo-ui-panelLayout-framed {
		background-color: @dark-background;
		border-color: @dark-border;
	}
	#poncho-header .oo-ui-iconElement-icon,
	#poncho-content-actions .oo-ui-iconElement-icon {
		filter: invert( .9 ) !important;
	}
	.mw-changeslist-legend {
		background-color: @dark-background !important;
		border-color: @dark-border !important;
	}

	/**
	 * Extensions
	 */
	// Extension:WikiEditor
	.wikiEditor-ui {
		color: initial;
	}
	// Extension:InputBox
	.mw-ui-input {
		background-color: @dark-background;
		border-color: @dark-border;
		color: @dark-text;
	}
	// Extension:UploadWizard
	#mwe-upwiz-steps,
	#mwe-upwiz-steps li {
		background-color: @dark-background !important;
		border-color: @dark-border !important;
		color: @dark-text !important;
	}
}

/**
 * Read mode
 */
.poncho-read-mode {
	font-size: 120%;
	transition: font 0.3s ease;
	#poncho-logo-wrapper,
	#poncho-search-form-wrapper,
	#poncho-navigation-menu,
	#poncho-languages-menu,
	#poncho-notifications-menu,
	#poncho-footer-wrapper,
	#poncho-content-actions,
	#contentSub,
	#contentSub2,
	#siteNotice,
	#catlinks,
	.usermessage,
	.mw-indicators,
	.mw-editsection {
		display: none;
	}
	#poncho-header-wrapper {
		background-color: transparent;
		border: none;
		box-shadow: none;
	}
}

/**
 * Print mode
 */
@media print {
	#poncho-header-wrapper,
	#poncho-footer-wrapper,
	#poncho-content-actions,
	#contentSub,
	#contentSub2,
	#siteNotice,
	#catlinks,
	.patrollink,
	.usermessage,
	.mw-indicators,
	.mw-editsection,
	.noprint {
		display: none !important; // Override more specific rules
	}
	a {
		color: inherit !important; // Override more specific rules
		text-decoration: underline;
	}
	.toc,
	.wikitable {
		background-color: transparent;
	}
}