//
// Default layout for Modern Vector.
//

@margin-horizontal-sidebar-button-icon: 12px;

body {
	// General background/foreground color definition as one exception to the rule.
	background-color: @background-color-base;
	color: @color-base;
	// Vertical scrollbar always visible.
	overflow-y: scroll;
}

.mw-body,
.parsoid-body {
	direction: ltr;
	padding: @padding-content;
}

.mw-body {
	// Will be removed when we limit content width (T246420).
	/* Border on top, left, and bottom side */
	border: @border-width-base @border-style-base @border-color-content;
	border-right-width: 0;
	/* Merge the border with tabs' one (in their background image) */
	margin-top: -@border-width-base;

	.firstHeading {
		/* Change the default from mediawiki.skinning CSS to let indicators float into heading area */
		overflow: visible;
	}
}

.mw-header {
	// A min-height is set to account for projects where no icon is set.
	min-height: @height-logo-icon;
	margin: @margin-top-header 0 @margin-bottom-header;
	padding: @padding-vertical-header @padding-horizontal-header;
	// Vertical centering of header elements (IE>=11), requires flex.
	// Non-flex fallback for IE<=9: float rule on the child elements.
	.flex-display();
	flex-wrap: wrap;
	// https://caniuse.com/#search=align-items
	align-items: center;
	z-index: @z-index-header;
}

/* Searchbox */
#p-search {
	float: left;
	margin: 0.5em 0.5em 0 0.5em;
	min-width: 5em;
	// Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.
	width: 13.2em;
	// Support: Modern browsers, responsive width.
	width: 20vw;
	max-width: 20em;
}

/* Main column */
.mw-body,
#mw-data-after-content,
#left-navigation,
.mw-footer {
	margin-left: @width-grid-column-one;
}

/* Content */
.mw-indicators {
	float: right;
	z-index: @z-index-indicators;
}

.mw-body-content {
	position: relative;
	z-index: @z-index-base;
}

/* Hide, but keep accessible for screen-readers */
#mw-navigation h2 {
	position: absolute;
	top: -9999px;
}

/* Navigation Containers */
.mw-article-toolbar-container {
	// Clear the floats on #left-navigation and #right-navigation.
	.mixin-clearfix();
}

#left-navigation {
	float: left;
}

#right-navigation {
	float: right;
}

#p-personal {
	li {
		// Some extensions e.g. Echo may change the height of list items
		// If that's the case we want to ensure all other elements are vertically aligned consistently.
		vertical-align: middle;
		display: inline-block;
	}
}

#mw-sidebar-button {
	float: left; // Browser: IE9 support - button as flex-child fallback.
	margin-left: -@margin-horizontal-sidebar-button-icon;
	margin-right: @margin-horizontal-sidebar-button-icon; // Accidentally the same.
}

#mw-panel {
	position: absolute;
	left: 0;
	width: @width-grid-column-one;
	.box-sizing( border-box );
	margin-top: @margin-top-sidebar;
	padding-left: @padding-left-sidebar;
	z-index: @z-index-sidebar;
}