mediawiki-skins-Citizen/skinStyles/extensions/Echo/ext.echo.styles.badge.less

/*
 * Citizen - Echo Styles
 * https://starcitizen.tools
*/

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

// Styles for echo badges
#pt-notifications {
	&-alert,
	&-notice {
		.mw-echo-notifications-badge {
			top: -1000px; // Default was -1005px for some reason
			margin: 0;
			width: @icon-box-size + @icon-padding;
			height: @header-height;

			&:hover,
			&:focus,
			&:active {
				&:before {
					opacity: 0.6 !important; // override all styles
				}
			}

			// Icon tweaks
			&:before {
				opacity: 0.4;
				background-position: center;
				transition: @transition-opacity-quick, @transition-transform-quick;
			}

			// Badge tweaks
			&:after {
				background-color: @red-50;
				font-size: 11px;
			}

			&.mw-echo-notifications-badge-all-read {
				opacity: 0.75; // 0.75 * 0.4 = 0.3
			}
		}
	}

	// Rotate bell
	&-alert {
		.mw-echo-notifications-badge {
			&:hover,
			&:focus,
			&:active {
				&:before {
					transform: rotateZ( 20deg );
				}
			}
		}
	}
}

@media ( prefers-color-scheme: dark ) {
	#pt-notifications {
		&-alert,
		&-notice {
			.mw-echo-notifications-badge:before {
				filter: invert( 1 );
			}
		}
	}
}