/*
 * Citizen
 *
 * SkinStyles for Extension:Echo
 * Module: ext.echo.styles.badge
 * Version: REL1_39
 *
 * Date: 2024-05-06
*/

.mw-echo-notifications-badge {
	#pt-notifications-alert &,
	#pt-notifications-notice & {
		top: 0;
		width: var( --header-button-size );
		height: var( --header-button-size );
		margin: 0;
		background-color: transparent; // reset mw-list-item style from Citizen
		filter: var( --filter-invert );
		background-repeat: no-repeat;
		background-position: center;
		background-size: var( --header-icon-size );
		border-radius: var( --border-radius--small );
		opacity: var( --opacity-icon-base );

		&:hover {
			opacity: var( --opacity-icon-base--hover );
		}

		&:active {
			opacity: var( --opacity-icon-base--active );
		}

		&:focus {
			box-shadow: 0 0 0 1px var( --color-inverted-fixed ), 0 0 0 3px var( --color-primary );
			opacity: var( --opacity-icon-base--active );

			&::after {
				border-color: var( --color-primary );
			}
		}

		&::after {
			top: 0;
			font-size: 0.65rem;
			background-color: var( --color-destructive );
			// Re-invert indicator color
			filter: var( --filter-invert );
			border-color: var( --color-destructive );
			border-radius: var( --border-radius--pill );
		}

		&-dimmed {
			opacity: var( --opacity-icon-base--disabled );
		}

		&.mw-echo-notifications-badge-all-read {
			opacity: var( --opacity-icon-base );

			&:hover {
				opacity: var( --opacity-icon-base--hover );
			}

			&:active {
				opacity: var( --opacity-icon-base--active );
			}
		}
	}

	&.oo-ui-flaggedElement-unseen,
	&.mw-echo-unseen-notifications {
		#pt-notifications-alert &::after {
			background-color: var( --color-destructive );
		}

		#pt-notifications-notice &::after {
			background-color: var( --color-destructive );
		}
	}
}

// Add quiet background hover states
#pt-notifications-alert,
#pt-notifications-notice {
	border-radius: var( --border-radius--small );

	&:hover {
		background-color: var( --background-color-quiet--hover );
	}

	&:active {
		background-color: var( --background-color-quiet--active );
	}
}