mediawiki-skins-Vector/skinStyles/ext.echo.styles.badge.less

@import '../resources/common/variables.less';

.vector-feature-visual-enhancement-next-disabled,
.skin-vector-legacy {
	#pt-notifications-notice .mw-echo-notifications-badge,
	#pt-notifications-alert .mw-echo-notifications-badge {
		top: -5px;
	}
}

.vector-feature-visual-enhancement-next-disabled .vector-user-links {
	#pt-notifications-alert,
	#pt-notifications-notice {
		margin: 0;

		// Override OOUI icon styles to match core icons
		.mw-echo-notifications-badge {
			top: 0;
			margin: 0;
			background-repeat: no-repeat;
			background-position: center;
			width: 44px;
			height: 44px;
			opacity: 1;

			&:hover {
				background-color: rgba( 0, 0, 0, 0.03 );
				border-radius: 2px;
			}

			// Adjust counter styles when counter is present
			&:not( .mw-echo-notifications-badge-all-read ) {
				&:after {
					left: 24px;
					top: 19px;
				}
			}
		}
	}
}

.vector-feature-visual-enhancement-next-disabled {
	#p-personal #pt-notifications-alert,
	#p-personal #pt-notifications-notice {
		margin-right: 0.4em;
	}
}

.vector-feature-visual-enhancement-next-enabled {
	.mw-echo-notification-badge-nojs {
		// When 99+ allow counter so spill outside icon
		overflow: visible;

		&:after {
			position: absolute;
			left: 55%;
			top: 43%;
			font-size: unit( 12 / @font-size-browser, em );
			padding: 7px 0.3em;
			border: 1px solid #fff;
			border-radius: @border-radius-base;
			background-color: @colorGray7;
			content: attr( data-counter-text );
			color: #fff;
		}
	}

	// Special colors for unseen notifications
	#pt-notifications-alert .mw-echo-unseen-notifications:after {
		background-color: @color-destructive;
	}

	#pt-notifications-notice .mw-echo-unseen-notifications:after {
		background-color: @color-primary;
	}
}