@import 'variables';
@import 'mixins-private';
@import 'mixins-public';

body {
	margin: 0;
}

.refreshed-icon {
	width: @refreshed-icon-dimension;
	height: @refreshed-icon-dimension;
	fill: currentColor;
}

/* Unfortunately, SVGs inside anchor colored with :visited do not inherit their
color normally (tested in Chrome, Safari, Firefox). As such, we're removing
:visited styles from anchors that have SVGs, as otherwise the SVG would be a
different color from the rest of the link. */

/*******************************************************************************
**************************** DROPDOWNS/COLLAPSIBLES ****************************
*******************************************************************************/

/**** "checkbox hack" for dropdowns without JS ****/

/* hide checkboxes */
.refreshed-checkbox {
	position: fixed;
	top: -9999px;
	left: -9999px;
}

/*** styles of things that are opened by the checkboxes ***/

/** dropdowns **/

/* style */

.refreshed-dropdown-button {
	position: relative; /* place dropdowns relative to matching .header-button */
	cursor: pointer;
}

#toolbox-dropdown-button {
	padding: 0.25em;
	vertical-align: middle;
	height: 100%;
	margin-left: 0.3em;
	box-sizing: border-box;
	.flex-display( inline-flex );
	.flex-align-items( center );
}

/*
	Why this element exists:
	Originally the triangle was a pseudoelement attached to .refreshed-dropdown-button.
	We'd center it relative to the button using left: 50%; and transform: translateX(-50%).
	This doesn't work when the button width is more than twice dropdown width:
	the triangle is so far right it looks disconnected from the dropdown.
	One solution is to set a maximum amount left the triangle can be.
	To set a maximum left amount we could use max-width.
	However the way the pseudoelement was set up, it needs width: 0 for the triangle to actually be a triangle.
	So we couldn't solve this problem by changing the pseudoelement's width.
	Instead we customize the width of a dummy element, then make the triangle at its top center with a pseudoelement.
*/
.refreshed-dropdown-triangle {
	width: 50%;
	height: 0;
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 0;
	z-index: @z-index-dropdown-triangle;
	/* Since the dropdown triangle is above the dropdown tray, which is not covered
	by the huge pseudoelement, hovering over it when the pseudoelement is open
	causes the cursor to turn into a pointer (since the triangle is inside a label
	element). Force the cursor to be the default one instead.
	*/
	cursor: auto;
}

.refreshed-dropdown-triangle::after {
	content: '';
	border-left: @dropdown-triangle-border-size solid transparent;
	border-right: @dropdown-triangle-border-size solid transparent;
	border-bottom: @dropdown-triangle-border-size solid;
	position: absolute;
	bottom: -( @dropdown-tray-margin-top );
	left: 100%;
	transform: translateX( -50% );
}

.refreshed-dropdown-tray {
	padding: @dropdown-tray-vertical-padding 0;
	margin: 0;
	margin-top: @dropdown-tray-margin-top;
	position: absolute;
	line-height: 1.2em;
	z-index: @z-index-dropdown-tray;
	list-style-type: none;
	max-height: 60vh;
	overflow-y: auto;
	.mixin-stack-box-shadow();

	a {
		/* vertically center any icons relative to the link text */
		.flex-display();
		.flex-align-items( center );
	}

	.refreshed-icon {
		.flex( @grow: 0, @shrink: 0 );
		margin-right: @dropdown-tray-refreshed-icon-margin-right;
	}

	.refreshed-icon-refreshed-submenu-expand {
		margin: 0;
	}

	span {
		.flex( @grow: 1, @shrink: 1 );
	}

	dd {
		margin: 0;
	}

	dt {
		margin: 0.2em 0 0.2em @dropdown-tray-vertical-padding;
		&:first-of-type {
			margin-top: 0;
		}
	}
}

#toolbox-dropdown-tray {
	right: 0;
}

/* giving the explore dropdown tray overflow: scroll would prevent the submenu
dropdown trays from appearing, so we overwrite it here */
#explore-dropdown-tray {
	max-height: initial;
	overflow: initial;
}

/* if an item in the toolbox dropdown has no icon, push it left to align with
the items that do have icons */
#toolbox-dropdown-tray span:first-child {
	margin-left: @refreshed-icon-dimension + @dropdown-tray-refreshed-icon-margin-right;
}

/* when the dropdown is open, give the label a huge child so clicking anywhere
outside the dropdown closes the box.
The first selector is for when checkboxes can be placed as a prior sibling to
their contents. The second selector is useful for the sidebar toggle checkbox,
because it is not a sibling of the elements it affects (it can't be, since the
two elements are in different containers). The checkbox should affect the
sidebar button (in #header-wrapper) and the sidebar (in #sidebar-wrapper). */
.refreshed-modal-background {
	content: '';
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: @modal-background-color;
	cursor: default;
	pointer-events: none;
	opacity: 0;
	/* z-index so this pseudoelement covers all dropdown buttons (the dropdown
	buttons don't have a z-index, so the pseudoelement will cover them). */
	z-index: @z-index-close-overlay;
	transition: opacity 0.1s ease;
	/* include the box-sizing so we can be confident that jQuery's outerHeight()
	matches the actual height of the header */
	box-sizing: border-box;
}

#explore-dropdown-tray .refreshed-modal-background {
	background: transparent;
}

.explore-submenu-dropdown-anchor {
	.flex-display();
	.flex-justify-content( space-between );
	.flex-align-items( center );
}

.explore-submenu-dropdown {
	position: relative; /* for proper submenu placement */
}

.explore-submenu-dropdown-tray {
	left: 100%;
	top: -( @dropdown-tray-vertical-padding );
	margin-top: 0;
}

/* functionality */

.refreshed-dropdown-tray,
.refreshed-dropdown-triangle, {
	display: none;
}

.refreshed-dropdown-checkbox:checked ~ .refreshed-dropdown-tray,
.refreshed-dropdown-checkbox:checked ~ .refreshed-dropdown-button .refreshed-dropdown-triangle,
#toolbox-dropdown-checkbox:checked ~ #refreshed-toolbox #toolbox-dropdown-tray,
#toolbox-dropdown-checkbox:checked ~ #refreshed-toolbox #toolbox-dropdown-triangle {
	display: block;
}

/* see variable definition in variables.less for explanation */
#toolbox-dropdown-checkbox:checked ~ #refreshed-toolbox {
	z-index: @z-index-refreshed-toolbox-stuck-when-dropdown-open;
}

.refreshed-dropdown-checkbox:checked + .refreshed-dropdown-button > .refreshed-modal-background,
#sidebar-toggler-checkbox:checked ~ #header-wrapper #sidebar-toggler .refreshed-modal-background,
#toolbox-dropdown-checkbox:checked ~ #refreshed-toolbox .refreshed-modal-background {
	opacity: 1;
	pointer-events: auto;
}

#sidebar-toggler-checkbox:checked ~ #sidebar-wrapper {
	transform: translateX(0);
	/* only apply the box shadow when the sidebar is opened so the shadow doesn't
	appear on the edge of the screen when the sidebar is closed (just off the edge
	of the screen) */
	.mixin-stack-box-shadow();
}
/** collapsibles **/

/* style */

.refreshed-collapsible-button {
	width: 100%;
	box-sizing: border-box;
}

.header-category-collapsible-button {
	padding: @header-category-collapsible-padding;
}

.refreshed-collapsible-tray a {
	display: block;
	.mixin-pretty-anchor( @font-color: currentColor );
}

.header-category-sidebar-name {
	.flex( @grow: 1, @shrink: 1 );
	text-align: left;
}

.header-categories-sidebar-collapsible-icons-wrapper {
	.flex( @grow: 0, @shrink: 0 );
}

/* functionality */

.refreshed-icon-refreshed-collapsible-collapse,
.refreshed-collapsible-tray {
	display: none;
}

.refreshed-icon-refreshed-collapsible-expand {
	display: block;
}

.refreshed-collapsible-checkbox:checked ~ .refreshed-collapsible-button .refreshed-icon-refreshed-collapsible-expand {
	display: none;
}

.refreshed-collapsible-checkbox:checked ~ .refreshed-collapsible-tray,
.refreshed-collapsible-checkbox:checked ~ .refreshed-collapsible-button .refreshed-icon-refreshed-collapsible-collapse {
	display: block;
}

/*******************************************************************************
************************************ HEADER ************************************
*******************************************************************************/

/**** Header layout ****/

#header-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: @z-index-header;
	/* height: SIZE-header-height; */
	.flex-display();
	.flex-direction( row );
	.flex-justify-content( space-between );
	.mixin-stack-box-shadow();
	.mixin-give-children-height();
}

.header-button,
.sidebar-button {
	cursor: pointer;
	text-align: center;
	.flex-display( inline-flex );
	.flex-justify-content( center );
	.flex-align-items( center );

	/* remove default anchor styling (for text wiki logos) */
	a& {
		color: inherit;
		text-decoration: none;
	}
}

.header-button-textless {
	padding: 0;
}

/* if multiple items inside a header button that's actually in the header (as
opposed to the sidebar), space them out */
#header-wrapper .header-button,
#refreshed-toolbox {
	img,
	svg,
	.header-text,
	.inline-tool-text {
		&:not(:only-child):not(:first-child) {
			margin-left: 0.25em;
		}
	}
}

.header-section {
	display: inline-block;
}

#sidebar-toggler {
	.flex( @grow: 0, @shrink: 0 );
}

#site-navigation-header {
	.flex( @grow: 0, @shrink: 0 );
}

.site-navigation-logo-img,
.site-navigation-logo-text {
	.mixin-extra-header-button-padding();
}

/* header logo for current wiki */
.site-navigation-logo-img {
	max-width: 100%;
	max-height: 100%;
}

.refreshed-logo-other {
	.site-navigation-logo-img,
	.site-navigation-logo-text {
		display: inline-block;
	}
}

#site-navigation-header-dropdown {
	position: relative;
	width: 100%; /* so tray can fit width of sidebar area rather than default width */
}

.site-navigation-button {
	width: @site-navigation-toggle-width;
}

.site-navigation-tray {
	text-align: center;
	padding-left: 0;
	padding-right: 0;
}

#header-categories-user-info-search-wrapper {
	.flex( @grow: 1, @shrink: 1 );
	.flex-display();
}

#explore-header-categories {
	.flex( @grow: 1, @shrink: 1 );
}

/* Wrapper so the header categories experience overflow-x: hidden and
overflow-y: visible. Inspired by https://stackoverflow.com/a/29687454. Since
.refreshed-header-category-dropdown-tray has position: absolute, it'll pop out
of the overflow: hidden. Since .refreshed-dropdown does not have
position: absolute, it will stay hidden if the screen is too narrow and it wraps
out of the header. For more see
https://css-tricks.com/popping-hidden-overflow/. */
#explore-header-categories-overflow-hider {
	overflow: hidden;
}

/* Small element so that #explore-header-categories-dropdowns isn't the first
non-zero-width child of #explore-header-categories-overflow-hider. That way when
the viewport is too narrow for both #explore-header-categories-sibling and
#explore-header-categories-dropdowns, the entirety of
#explore-header-categories-dropdowns will wrap onto the next line, revealing
the explore button which is at the top of it. */
#explore-header-categories-sibling {
	display: inline-block;
	width: @explore-header-categories-sibling-width;
}

#explore-header-categories-dropdowns {
	display: inline-block;
	margin-left: -( @explore-header-categories-sibling-width );
	/* Appears pushed up 100% of its height, so the second row (header categories)
	is visible in the header. When the viewport gets too narrow, the element moves
	down a line, making its first row (the explore button) visible. */
}

#explore-dropdown {
	margin-left: @explore-header-categories-sibling-width;
}

#explore-dropdown-button {
	.mixin-extra-header-button-padding();
}

.header-category-dropdown {
	display: inline-block;
}

.header-category-dropdown-button {
	.mixin-extra-header-button-padding();
}

#user-info-search-wrapper {
	/* when user info hits the header categories, the header categories should
	shrink, but the user info shouldn't */
	.flex( @grow: 0, @shrink: 0 );
}

#extra-personal-tools,
#user-info-dropdown {
	display: inline-block;
}

#extra-personal-tools-tray {
	margin: 0;
	list-style: none;
	height: 100%;
	.flex-display( inline-flex );
	.flex-align-items( center );

	li {
		margin: 0;
		margin-left: 0.5em;
		padding: 0;
		padding-top: 0.75em;
	}
}

.mw-echo-ui-overlay {
	z-index: @z-index-header !important; /* same as #header-wrapper and #header-suggestions */
}

#pt-notifications-alert,
#pt-notifications-notice {
	margin: 0;
	padding-right: 0.75em;
}

#pt-notifications-alert {
	margin-right: 0.25em;
}

#user-info-dropdown-button .avatar-image {
	width: @avatar-width;
	height: @avatar-height;
}

#header-search-dropdown-tray {
	box-sizing: border-box;
}

#searchInput {
	border: 0;
	font-size: @header-search-font-size;
	height: @header-search-height;
	padding: @header-search-padding;
	/* make room for search button */
	padding-right: @header-search-height;
	/* prevent iOS from adding rounded corners to input box */
	border-radius: 0;
	/* prevent Safari from styling input box */
	-webkit-appearance: none;
	width: 100%;
	box-sizing: border-box;

	/* prevent Safari from styling input box (adding text indent)
	per https://stackoverflow.com/a/11128262 */
	&::-webkit-search-decoration {
		-webkit-appearance: none;
	}
}

/* default search bar text */
.mixin-set-searchInput-placeholder-styles( {
	color: @search-placeholder-text-font-color;
	font-weight: normal;
} );

.searchButton {
	background-color: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	font-size: inherit;
	text-indent: -99999px;
	width: @header-search-height;
	height: @header-search-height;
	background-position: center center;
	background-size: 1.5em 1.5em;
	background-repeat: no-repeat;
	cursor: pointer;

	/* take up full height and stick to right side of #searchInput */
	top: 50%;
	transform: translateY( -50% );
	right: @header-search-padding;
}

#header-suggestions {
	.mixin-stack-box-shadow();

	.suggestions-results {
		border: 0 !important;
		max-height: calc(30vh);
		overflow-y: auto;
	}

	.suggestions-special {
		border: 0;
		.mixin-stack-box-shadow();
	}
}

/*******************************************************************************
************************************ SIDEBAR ***********************************
*******************************************************************************/

#sidebar-wrapper {
	position: fixed;
	top: 0;
	bottom: 0;
	overflow-y: auto;
	padding-top: 1em;

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

.sidebar-content ul {
	padding: @sidebar-ul-padding-top 0 @sidebar-ul-padding-bottom 0;
}

.sidebar-section {
	padding-bottom: @sidebar-section-padding-bottom;
}

.sidebar-heading {
		margin-left: @sidebar-heading-padding;
}

a.sidebar-item { /* a for specificity */
	.mixin-pretty-anchor( @font-color: currentColor );
	display: block;
}

#site-navigation-sidebar {
	text-align: center;
}

.refreshed-logo-sidebar-current,
#site-navigation-sidebar-collapsible-button {
	vertical-align: top;
}

/*******************************************************************************
************************************ CONTENT ***********************************
*******************************************************************************/

#content-wrapper {
	padding: @content-wrapper-padding;
	.mixin-stack-box-shadow();
}

#content-heading {
	.flex-display();
}

#main-title-messages {
	border-bottom: 1px solid @firstHeading-border-color;
}

#refreshed-toolbox {
	z-index: @z-index-refreshed-toolbox;
	padding-top: @pretty-anchor-border-width;
	padding-bottom: @pretty-anchor-border-width;
	.flex-display();
	.flex-align-items( initial );
}

#p-namespaces {
	.flex( @grow: 1, @shrink: 1 );
}

#p-views,
#p-tools {
	.flex( @grow: 0, @shrink: 0 );
}

.toolbox-section {
	display: inline-block;
	vertical-align: top;
	list-style-type: none;
	margin: -( @pretty-anchor-border-width ) 0;

	li {
		display: inline;
	}
}

/* so #back-to-subject collapses correctly, per
https://css-tricks.com/flexbox-truncated-text/ */
#p-namespaces {
	min-width: 5em;
}

#back-to-subject {
	border-bottom: initial;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	max-width: 100%;
}

#p-namespaces a,
#p-views a {
	padding-top: 0;
	display: inline-block;
	.mixin-pretty-anchor( @border-side: vertical );
}

#p-namespaces li.selected a,
#p-views li.selected a {
	.mixin-pretty-anchor( @active: true, @border-side: vertical );
}

#p-tools {
	margin-top: 0;
	margin-bottom: 0;
}

#ca-watch,
#ca-unwatch {
	display: inline;

	a {
		border: 0;
		display: inline-block;
		text-indent: -9999px;
		width: 1.2em;
		height: 1.2em;
		vertical-align: middle;
		background-position: top right;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin-bottom: 0;
		vertical-align: middle;
		box-sizing: border-box;
	}

	.inline-tool-text {
		display: none;
	}
}

/* reset CSS of feed links */
a.feedlink {
	background-image: none;
	margin: 0;
}

#site-notice {
	width: 100%;
	text-align: center;
}

/* user notification thing a.k.a the Orange Bar of Death */
.usermessage {
	background-color: #ffce7b;
	border: 1px solid #ffa500;
	color: #000;
	font-weight: bold;
	margin: 2em 0 1em;
	padding: .5em 1em;
	vertical-align: middle;
}

#content {
	line-height: 1.5em;
	font-size: 0.875em;
	word-wrap: break-word;
	overflow: hidden; /* account for floated content when calculating height */
}

.firstHeading {
	.flex( @grow: 1, @shrink: 1 );
	font-size: 2.68em;
	padding: 0;
	margin-bottom: 0;
	border: 0;
	display: inline;
}

.mw-indicators {
	.flex( @grow: 0, @shrink: 0 );
}

/*******************************************************************************
************************************ FOOTER ************************************
*******************************************************************************/

#footer-wrapper {
	padding: 1em;
	text-align: center;

	a {
		font-weight: bold;
		color: currentColor;
	}
}

.footer-row {
	display: block;
	list-style: none;
	margin: 0;
}

.footer-row-item {
	margin: 0;
	margin-right: @footer-item-spacing-horizontal;
	margin-bottom: @footer-item-spacing-vertical;
	font-size: 0.8em;
}

#footer-row-places li {
	display: inline-block;
}
