/*!
 * VisualEditor Toolbar styles.
 *
 * @copyright 2011-2020 VisualEditor Team and others; see http://ve.mit-license.org
 */

/* stylelint-disable no-descending-specificity */

.ve-ui-toolbar {
	/* Used by mobile context position hack */
	position: relative;
}

.ve-ui-toolbar > .oo-ui-toolbar-bar {
	/* Make sure the toolbar is shown on top of surface contents even when not floating,
	   for correct rendering of dropdowns, popups etc. */
	z-index: 2;
}

.ve-ui-toolbar.ve-ui-toolbar-empty > .oo-ui-toolbar-bar {
	border: 0;
	box-shadow: none;
}

/* PositionedTargetToolbar */

.ve-ui-toolbar-floating > .oo-ui-toolbar-bar {
	position: fixed;
	top: 0;
	border-top: 0;
}

.ve-ui-toolbar.oo-ui-toolbar-position-bottom > .oo-ui-toolbar-bar {
	/* For bottom toolbars though (e.g. Flow), we apparently want the toolbar to be below the surface
	   overlay, but its dropdowns, popups etc. to be above it - this seems to work… (T169076) */
	z-index: auto;
}

.ve-ui-toolbar > .oo-ui-toolbar-bar .oo-ui-toolbar-bar {
	/* Dumb broken nested toolbars ruin everything again (T169617) */
	z-index: auto;
}

/* Mobile toolbar */

.ve-ui-targetToolbar-mobile .oo-ui-toolbar-tools {
	display: flex;
}

.ve-ui-targetToolbar-mobile .oo-ui-toolbar-tools .oo-ui-barToolGroup .oo-ui-tool-link {
	min-height: 3em;
}

.ve-ui-targetToolbar-mobile .oo-ui-toolbar-tools > .oo-ui-toolGroup {
	flex: 1;
}

.ve-ui-targetToolbar-mobile .oo-ui-toolbar-tools > .ve-ui-toolbar-group-back {
	border-right: 1px solid #eaecf0;
}

.ve-ui-targetToolbar-mobile .oo-ui-toolbar-tools > .oo-ui-toolGroup-empty {
	display: none;
}

.ve-ui-targetToolbar-mobile .oo-ui-toolbar-tools > .oo-ui-indicatorElement > .oo-ui-popupToolGroup-handle {
	/* stylelint-disable-next-line declaration-no-important */
	padding: 3em 0 0 0 !important;
}

.ve-ui-targetToolbar-mobile .oo-ui-toolbar-tools > .oo-ui-popupToolGroup > .oo-ui-popupToolGroup-handle > .oo-ui-iconElement-icon,
.ve-ui-targetToolbar-mobile .oo-ui-toolbar-tools > .oo-ui-popupToolGroup > .oo-ui-popupToolGroup-handle > .oo-ui-indicatorElement-indicator {
	left: 50%;
}

.ve-ui-targetToolbar-mobile .oo-ui-toolbar-tools > .oo-ui-popupToolGroup > .oo-ui-popupToolGroup-handle > .oo-ui-iconElement-icon {
	/* No indicator */
	margin-left: -0.714285em;
}

.ve-ui-targetToolbar-mobile .oo-ui-toolbar-tools > .oo-ui-popupToolGroup.oo-ui-indicatorElement {
	/* Indicator uses up whitespace, so increase width to make spacing look even */
	flex: 1.2;
}

.ve-ui-targetToolbar-mobile .oo-ui-toolbar-tools > .oo-ui-popupToolGroup.oo-ui-indicatorElement > .oo-ui-popupToolGroup-handle > .oo-ui-iconElement-icon {
	margin-left: -1em;
}

.ve-ui-targetToolbar-mobile .oo-ui-toolbar-tools > .oo-ui-popupToolGroup > .oo-ui-popupToolGroup-handle > .oo-ui-indicatorElement-indicator {
	margin-left: 0.375em;
	width: 0.5625em;
	min-width: 0.5625em;
}

.ve-ui-targetToolbar-mobile .oo-ui-toolbar-tools > .oo-ui-barToolGroup {
	text-align: center;
}

.ve-ui-targetToolbar-mobile .oo-ui-toolbar-tools > .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool {
	width: 100%;
}

.ve-ui-targetToolbar-mobile .oo-ui-toolbar-tools > .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link {
	padding: 0.875em 0;
}

.ve-ui-targetToolbar-mobile .oo-ui-toolbar-tools > .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link > .oo-ui-iconElement-icon:not( .oo-ui-tool-checkIcon ) {
	position: static;
	display: inline-block;
	vertical-align: middle;
}

.ve-ui-targetToolbar-mobile .oo-ui-toolbar-tools > .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link > .oo-ui-tool-title {
	vertical-align: middle;
	margin-left: 0.3em;
	/* T260368 */
	line-height: 1em;
}

@media screen and ( max-width: 767px ) {
	.ve-ui-targetToolbar-mobile .oo-ui-toolbar-tools > .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link > .oo-ui-tool-title {
		/* stylelint-disable-next-line declaration-no-important */
		display: none !important;
	}
}