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

/* stylelint-disable no-descending-specificity */
/* 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: 20px;
		height: 20px;
		margin: 0 2px;
		// Hide the text, but keep accessible for screen-readers
		// Later we put the icons back onscreen with an opposite offset
		top: -@badge-offscreen-offset - 5px;
		cursor: pointer;
		text-decoration: none;
		line-height: normal;
		.box-sizing( border-box );

		&:hover,
		&:active,
		&:focus {
		border-radius: 2px;
			outline: 0;
			-moz-outline-style: 0;

			&:before{
                border-radius: 2px;
                box-shadow: inset 0 0 0 2px #36c;
            }
            
            &:after{
                background-color: #36c;
            }
		}

		&-dimmed {
			opacity: 0.4;
		}

		// Background icon
		&:before {
			position: absolute;
			display: inline-block;
			cursor: pointer;
			opacity: 0.8;
			content: '';
			background-repeat: no-repeat;
			// Bring it back onscreen
			top: @badge-offscreen-offset;
			left: 0;
			width: 100%;
			height: 100%;
		}

		// Counter
		&:after {
			position: absolute;
			display: inline-block;
			cursor: pointer;
			// Bring it back onscreen
			top: @badge-offscreen-offset + 9px;
			left: 55%;
			font-size: 0.9em;
			font-weight: bold;
			padding: 0 0.3em;
			border: 1px solid #fff;
			border-radius: 2px;
			background-color: @badge-counter-background-seen;
			content: attr( data-counter-text );
			color: #fff;
		}

		&.mw-echo-notifications-badge-long-label {
			margin-right: 0.5em;
			&:after {
				left: 35%;
			}
		}

		&.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 );
		}
	}
}
/* stylelint-enable no-descending-specificity */