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

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

/* Tab list items */
.vector-menu-tabs {
	float: left;
	padding-left: @border-width-base;

	li {
		display: inline-block;
		vertical-align: middle;
		white-space: nowrap;
		margin: 0;

		// Make first and last elements flush with edge of header.
		&:first-child {
			margin-left: -8px;
		}

		&:last-child {
			margin-right: -8px;
		}
	}

	/* focus and hover have outlines. Text underline interferes with bottom border */
	li a:focus,
	li a:hover {
		text-decoration: none;
		border-bottom: @border-width-base @border-style-base;
	}

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

	.selected a,
	.selected a:visited {
		color: @color-link-selected;
		border-bottom: @border-width-base @border-style-base;
	}
}

/**
 * Tab link appearance, applies to
 * - <a> inside vector-menu-tabs  (e.g. read, edit, view, history)
 * - vector-menu-dropdown headings (e.g. more menu, language variants, gadgets)
*/
.vector-menu-tabs li a,
.vector-article-toolbar .vector-menu-heading {
	display: block;
	position: relative;
	// Top bottom padding to increase clickable area.
	padding-top: 18px;
	padding-bottom: 7px;
	// left & right margin separate bottom border between words,
	// bottom margin makes link border overlap toolbar border.
	margin: 0 8px -1px 8px;
	cursor: pointer;
	border-bottom: @border-width-base @border-style-base transparent;
}