@import '../variables.less';

@media screen {
	.ve-ui-toolbar,
	.ve-ui-overlay-global,
	.ve-ui-overlay-local {
		font-size: 0.842105em;
	}

	.ve-init-mw-desktopArticleTarget-toolbar {
		margin: -0.875em -2.375em 0;
	}

	// Still need a way to make it show up right away (instead of initially disappearin under the page header)
	.ve-ui-toolbar-floating > .oo-ui-toolbar-bar {
		top: @fixed-header-height + @color-height;
	}

	// Make the gutter area clickable (T162838)
	.ve-init-mw-desktopArticleTarget .ve-init-mw-target-surface {
		margin-left: -@content-padding;
		margin-right: -@content-padding;
	}
	.ve-init-mw-desktopArticleTarget .ve-init-mw-target-surface .ve-ce-documentNode,
	.ve-init-mw-desktopArticleTarget .ve-init-mw-target-surface .ve-ui-surface-placeholder {
		padding-left: @content-padding;
		padding-right: @content-padding;
	}

	@media ( min-width: @desktop-small-floor ) and ( max-width: @desktop-small-width ) {
		.ve-ui-toolbar {
			margin-top: -0.5em;
		}
	}

	@media ( max-width: @mobile-width ) {
		.ve-ui-toolbar-floating > .oo-ui-toolbar-bar {
			top: 0;
		}
	}
}