/**
 * Style fixes for extensions
 *
 * This file is part of the MediaWiki skin Chameleon.
 *
 * @copyright 2013 - 2017, Stephan Gambke
 * @license   GNU General Public License, version 3 (or any later version)
 *
 * The Chameleon skin is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by the Free
 * Software Foundation, either version 3 of the License, or (at your option) any
 * later version.
 *
 * The Chameleon skin is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
 * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more
 * details.
 *
 * You should have received a copy of the GNU General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 *
 * @author Stephan Gambke
 * @since 1.2
 * @ingroup Skins
 */

.skin-chameleon {

	/* >> Extension VisualEditor */
	.ve-ui-toolbar, .ve-ui-debugBar, .oo-ui-processDialog-navigation {
		&, &::before, &::after {
			box-sizing: content-box;
		}
	}

	.ve-ui-overlay-global {
		z-index: @zindex-navbar-fixed + 1;
	}

	// float the VE UI toolbar below a fixed or sticky navbar
	.navbar.navbar-fixed-top, .navbar + .sticky-wrapper {
		~ * .ve-ui-toolbar-floating>.oo-ui-toolbar-bar {
			transform: translateY(@navbar-height);
		}
	}
	/* << Extension VisualEditor

	/* >> Extension Echo */
	.mw-echo-ui-overlay {

		z-index: 3;

	}

	#pt-notifications-alert, #pt-notifications-notice {

		display: -ms-inline-grid;
		display: inline-grid;

		.mw-echo-notifications-badge {

			@badge-offscreen-offset: 1000px;

			// Hide the text, but keep accessible for screen-readers
			// Later we put the icons back onscreen with an opposite offset
			top: -@badge-offscreen-offset;

			// Background icon
			&:before {
				// Bring it back onscreen
				top: @badge-offscreen-offset;
			}

			// Counter
			&:after {
				// Bring it back onscreen
				top: @badge-offscreen-offset + 9px;
			}

		}
	}

	.navbar-tools {
		#pt-notifications-alert, #pt-notifications-notice {

			display: inherit;

			.mw-echo-notifications-badge {

				width: auto;
				height: auto;
				top: auto;

				&-dimmed {
					opacity: 1;
				}

				// Reset Background icon & Counter
				//
				&:before, &:after {
					content: inherit;
				}

				&.mw-echo-notifications-badge-all-read {
					opacity: 1;
				}
			}
		}
	}

	.mw-echo-ui-notificationBadgeButtonPopupWidget > .oo-ui-popupWidget {

		font-size: 1em;

	}
	/* << Extension Echo */

}