@import '../echo.variables';
@import 'mediawiki.mixins';

/* We have to include the #pt-notifications selector due to monobook */
.mw-echo-notifications-badge {
	#pt-notifications-alert &,
	#pt-notifications-notice & {
		position: relative;
		display: block;
		width: 30px;
		top: -5px;
		font-size: 0;
		cursor: pointer;
		text-decoration: none;

		&:hover,
		&:active,
		&:focus {
			outline: none;
			-moz-outline-style: none;
		}

		&-dimmed {
			opacity: 0.4;
		}

		// Background icon
		&:before {
			position: absolute;
			display: inline-block;
			cursor: pointer;
			opacity: 0.8;
			left: 0;
		}

		// Counter
		&:after {
			position: absolute;
			display: inline-block;
			cursor: pointer;
			top: 10px;
			left: 40%;
			// The original font-size was 12px, we had
			// to override it in the parent so the original
			// number is hidden, so we rewrite it here. This
			// is far from perfect, but it will make sure
			// that screen-readers can still see the number that
			// is outputted in the original <a> link while letting
			// us style the boxed number the way we want to.
			// We want 0.8em of the original 12px font size
			font-size: 12px * 0.8;
			font-weight: bold;
			padding: 0 0.3em;
			border: 1px solid white;
			border-radius: 2px;
			background-color: @badge-counter-background-seen;
			content: attr(data-counter-text);
			color: white;
		}

		+ .oo-ui-popupWidget {
			margin-top: 7px;
		}

		&.mw-echo-notifications-badge-all-read {
			opacity: 0.625;
			&::after {
				visibility: hidden;
			}
		}
	}

	#pt-notifications-alert & {
		&:before {
			/* @embed */
			content: url('../icons/bell.svg');
		}
	}

	#pt-notifications-notice & {
		&:before {
			/* @embed */
			content: url('../icons/tray.svg');
		}
	}
}