/*!
 * VisualEditor Toolbar styles.
 *
 * @copyright See AUTHORS.txt
 */

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

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

	> .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-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;

	.oo-ui-barToolGroup .oo-ui-tool-link {
		min-height: 3em;
	}

	> .oo-ui-toolGroup {
		flex: 1;
	}

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

	> .oo-ui-toolGroup-empty {
		display: none;
	}

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

	> .oo-ui-popupToolGroup {
		> .oo-ui-popupToolGroup-handle {
			> .oo-ui-iconElement-icon,
			> .oo-ui-indicatorElement-indicator {
				left: 50%;
			}

			> .oo-ui-iconElement-icon {
				/* No indicator */
				margin-left: -0.714285em;
			}
		}

		&.oo-ui-indicatorElement {
			/* Indicator uses up whitespace, so increase width to make spacing look even */
			flex: 1.2;

			> .oo-ui-popupToolGroup-handle > .oo-ui-iconElement-icon {
				margin-left: -1em;
			}
		}

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

	> .oo-ui-barToolGroup {
		text-align: center;

		> .oo-ui-toolGroup-tools > .oo-ui-tool {
			width: 100%;

			> .oo-ui-tool-link {
				padding: 0.875em 0;

				> .oo-ui-iconElement-icon:not( .oo-ui-tool-checkIcon ) {
					position: static;
					display: inline-block;
					vertical-align: middle;
				}

				> .oo-ui-tool-title {
					vertical-align: middle;
					margin-left: 0.3em;
					/* T260368 */
					line-height: 1em;

					@media screen and ( max-width: 767px ) {
						/* stylelint-disable-next-line declaration-no-important */
						display: none !important;
					}
				}
			}
		}
	}
}

/* Hide keyboard shortcut hints on mobile. Screen space is limited, and it's unlikely that the user
   has a keyboard with modifier keys. */
.ve-ui-targetToolbar-mobile .oo-ui-popupToolGroup-tools .oo-ui-tool-link .oo-ui-tool-accel,
.ve-ui-overlay-global-mobile .oo-ui-popupToolGroup-tools .oo-ui-tool-link .oo-ui-tool-accel {
	display: none;
}