@import "minerva.variables";
@import "minerva.mixins";
@import "mediawiki.mixins";

// FIXME: Separate imported folders into a components directory
@import 'mainmenu';

html,
body {
	// Ensure overlays take up full screen
	height: 100%;
}

// FIXME: refactor all the below and reuse OverlayNew header styling
#mw-mf-page-center {
	padding: @headerMargin @headerMargin 0;
}

#content_wrapper {
	margin: 0 -@headerMargin;
}

.header {
	display: table;
	width: 100%;
	white-space: nowrap;
	border-bottom: 1px solid @grayLight;

	> * {
		width: @headerHeight - @headerMargin;
		display: table-cell;
		vertical-align: middle;

		&:first-child {
			border-right: 1px solid @grayLight;
		}

		&:nth-child(3) {
			border-left: 1px solid @grayLight;
		}
	}

	> h1, > form, > ul {
		padding: (@headerTitleMarginV - @headerMargin) @headerTitleMarginH;
		width: auto;
	}

	h1 {
		text-align: center;
		font-weight: bold;
	}

	// FIXME: use .icon class
	#mw-mf-main-menu-button, #secondary-button {
		height: @headerHeight - @headerMargin;
		text-indent: -9999px;
		background-repeat: no-repeat;
		.background-size( 24px, auto );
	}

	#mw-mf-main-menu-button {
		background-position: 40% 40%;
		.background-image-svg( 'images/menu/hamburger.svg', 'images/menu/hamburger.png' );
	}

	#secondary-button {
		height: @headerHeight - 2 * @headerMargin;
		background-position: 60% 40%;
	}

	// need to specify id or else other rules are more important
	// FIXME: simplify when .icon class from OverlayNew used instead
	#secondary-button.user-button {
		text-indent: 0;
		width: @headerHeight - 2 * @headerMargin;
		padding-left: @headerMargin;
		padding-bottom: @headerMargin;
		text-align: center;

		&:hover {
			text-decoration: none;
		}

		&.loading span {
			display: none;
		}

		span {
			display: inline-block;
			width: 24px;
			height: 24px;
			font-weight: bold;
			color: #fff;
			line-height: 24px;
			background: #c91f2c;
			border-radius: 2px;

			&.zero {
				background: @grayLight;
			}
		}
	}

	// FIXME: merge with SearchOverlay
	.search {
		border: none;
		padding: 0;
	}
}

// Used for messages on login screen, page lists and uploads and when showing old revisions
.alert {
	padding: 1em @contentMargin;
	margin: 0 0 1em;

	&.warning {
		color: #850;
		background: #feb
	}

	h2 {
		font: bold 100% @fontFamily;
		padding: 0;
		margin: 0 0 .5em 0;
	}
}

.client-js {
	.searchSubmit {
		display: none;
	}
}

.client-nojs {
	.searchSubmit {
		// FIXME: do all buttons in header need to have padding by default?
		padding: 0 !important;
		width: 20%;
	}

	input.search {
		width: 80%;
	}
}

/* Search */
input.search {
	outline: 0;
	width: 100%;
	// FIXME: unable to check but the important may not be needed for Nokia S60;
	background-color: #fff !important; /* remove fennec default background also see bug 36490 */
	.box-sizing( border-box );
	// get rid of rounded corners in Safari
	-webkit-appearance: none;
	// get rid of X in Chrome
	&::-webkit-search-cancel-button {
		-webkit-appearance: none;
	}
}

// FIXME: remove when micro.tap in stable and rule from common-js.less too
.search-box {
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

.content {
	.edit-page {
		display: none;
		position: absolute;
		background: url(../common/images/pagemenu/edit.png) 100% @headingMargin no-repeat;
		.background-size( auto, 30px );
		text-indent: -9999px;
		border-left: solid 1px @sectionBorderColor;
		width: @sectionIconWidth + 5px;
		top: 0;
		bottom: 0;
		right: 0;
	}

	h1.openSection,
	h2.openSection {
		.edit-page {
			display: block;
		}
	}
}

.stub .edit-page {
	margin: 0;
	display: block;
}

// FIXME: this is here only because non-JS version doesn't load watchstar.less
.watch-this-article {
	background: url(../common/images/watch.png) 50% 50% no-repeat;
	text-indent: -9999px;

	&.watched {
		background-image: url(../common/images/watched.png);
	}
}

// Remove when/if page-secondary-actions are promoted to stable
.stable {
	.languageSelector {
		margin-top: 1em;
	}
}

.truncated-text {
	white-space: nowrap;
	overflow: hidden;
	-webkit-text-overflow: ellipsis;
	text-overflow: ellipsis;

	// FIXME: this works only in WebKit
	&.multi-line {
		white-space: normal;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	&.two-line {
		-webkit-line-clamp: 2;
		// fallback for non-WebKit
		max-height: 2.6em;
	}
}