@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;
		height: 24px;
		top: -5px;
		cursor: pointer;
		text-decoration: none;
		// Hide the text, but keep accessible for screen-readers
		color: transparent;

		&: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;
			content: '';
			background-repeat: no-repeat;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}

		// Counter
		&:after {
			position: absolute;
			display: inline-block;
			cursor: pointer;
			top: 10px;
			left: 40%;
			font-size: 0.8em;
			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;
		}

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

			&::after {
				visibility: hidden;
			}
		}
	}

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

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