@import '../../common/variables.less';
@import 'mediawiki.mixins.less';

/**
 * Styling for namespace tabs (page, discussion) and views (read, edit, view history, watch and other actions)
 */

/* Namespaces and Views */
.vector-menu-tabs-legacy {
	// Tab separator: Outer start border (left in LTR) of tab row.
	background-position: left bottom;
	float: left;
	height: 2.5em;
	padding-left: @border-width-base;

	/* Navigation Labels */
	.vector-menu-heading {
		display: none;
	}

	ul {
		float: left;
		height: 100%;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	li {
		// Tab fade background: Fade inside from light grey to white.
		background-image: linear-gradient( to top, @border-color-content--tabs-inactive 0, #e8f2f8 1px, #fff 100% ); // Support: Standard (Firefox 16+, IE 10+, Safari 6.1+, Chrome 26+)
		background-position: left bottom;
		background-repeat: repeat-x;
		float: left;
		display: block;
		height: 100%;
		margin: 0;
		padding: 0;
		line-height: @line-height-nav;
		white-space: nowrap;

		a {
			// Tab separator: Border between tabs and outer right border.
			background-position: right bottom;
			color: @color-link;
			box-sizing: border-box;
			display: block;
			float: left;
			height: unit( 40 / @font-size-tabs / @font-size-browser, em );
			position: relative;
			padding-top: 1.25em;
			padding-left: @padding-horizontal-tabs;
			padding-right: @padding-horizontal-tabs;
			font-size: @font-size-tabs;
			cursor: pointer;
		}
	}

	.new {
		a,
		a:visited {
			color: @color-link-new;
		}
	}

	.selected {
		// Overwrite above in browsers that support `rgba()`.
		background: rgba( 255, 255, 255, 1 );

		a,
		a:visited {
			color: @color-link-selected;
			text-decoration: none;
		}
	}

	.icon {
		a {
			background-position: right bottom;
			background-repeat: no-repeat;
		}
	}
}

// Tab Separators
// `.vector-menu-tabs`: Outer start border (left in LTR) of tab row.
// `.vector-menu-tabs a`: Border between tabs and outer end (right in LTR) border.
// `#mw-head .vector-menu-dropdown .vector-menu-heading`: // Outer end (right in LTR) border of "Actions" menu.
// #mw-head rule is legacy Vector only.
.vector-menu-tabs,
.vector-menu-tabs a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
	background-image: linear-gradient( to bottom, rgba( 167, 215, 249, 0 ) 0, @border-color-content 100% );
	background-repeat: no-repeat;
	// Contain gradient to 1px × 100% size and draw from top to bottom-left or -right corner.
	background-size: @border-width-base 100%;
}

#mw-head .vector-menu-dropdown .vector-menu-heading {
	// Tab separator: Outer end (right in LTR) border of "Actions" menu.
	background-position: right bottom;
}

.vector-menu-dropdown-noicon {
	.vector-menu-heading {
		// `padding-top` needs to scale with font-size.
		padding-top: 1.25em;
		padding-left: 8px;
		padding-right: 8px;
		font-size: @font-size-tabs;
		font-weight: normal;
	}

	// Add focus state to legacy menu dropdown buttons (i.e. p-variants, p-cactions)
	.vector-menu-checkbox:focus + .vector-menu-heading {
		// Simulate browser focus ring
		outline: dotted 1px; // Firefox style
		outline: auto -webkit-focus-ring-color; // Webkit style
	}
}