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

.client-nojs .vector-settings {
	display: none;
}

.vector-settings {
	position: fixed;
	bottom: 8px;
	right: 8px;
}

/**
 * Limited width toggle - a button which lets users change the layout from
 * a fixed-width content column to a layout where the content takes up the
 * full window width.
 */

// By default, toggle should be hidden unless the breakpoint below is reached.
.vector-limited-width-toggle,
.vector-limited-width-popup {
	display: none;
}

// Note on certain pages the control will have no effect e.g. Special:RecentChanges
// Defining this at 1400px is a product decision so do not change it
// (more context at https://phabricator.wikimedia.org/T326887#8540889)
@media ( min-width: 1400px ) {
	.vector-limited-width-toggle,
	.vector-limited-width-popup {
		display: block;
	}
}

// Custom popup notification that shows on page load
.vector-limited-width-popup {
	position: absolute;
	z-index: @z-index-stacking-1;
	filter: drop-shadow( 0 2px 1px rgba( 0, 0, 0, 0.3 ) );
	background-color: #fff;
	border: 1px solid #a2a9b1;
	border-radius: 2px;
	margin-bottom: 9px;
	left: -290.733px;
	bottom: 31px;

	&-head {
		margin-bottom: 9px;
	}

	&-close-button {
		position: absolute;
		right: 0;
	}

	&-body {
		margin: 5px 12px;
		line-height: 1.42857143em;
		width: 296px;
		height: auto;
		max-width: 298px;
		max-height: 593px;
		// Reserve space for the close button ("X" icon)
		// using em's since mw-ui-icon button is sized in those units.
		padding-right: 1em;
		box-sizing: border-box;

		p {
			margin: 0.4em 0 0.5em 0;
		}
	}

	&-anchor {
		bottom: -9px;
		display: block;
		position: absolute;
		background-repeat: no-repeat;
		left: 306.367px;

		&::before,
		&::after {
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			border-style: solid;
			border-color: transparent;
		}

		&::before {
			top: -10px;
			left: -9px;
			border-top-color: #a2a9b1;
			border-width: 10px;
		}

		&::after {
			top: -10px;
			left: -8px;
			border-top-color: #fff;
			border-width: 9px;
		}
	}
}