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

.mw-echo-ui-pageNotificationsOptionWidget {
	clear: both;
	width: 100%;
	.box-sizing( border-box );

	&.oo-ui-optionWidget {
		.transition( ~'background-color 100ms, color 100ms' );

		&-highlighted {
			background-color: #eaecf0;
			color: @color-base-active;
		}

		&-selected {
			background-color: @background-color-primary;
			color: @color-primary;
		}

		&-selected&-highlighted,
		&-pressed&-highlighted {
			background-color: rgba( 41, 98, 204, 0.1 );
			color: @color-primary;
		}
	}

	&-icon {
		float: left;
		.oo-ui-iconElement-icon {
			display: inline-block;
		}
	}

	&-title {
		padding: 0.2em 0;
	}

	&-count {
		background-color: #eaecf0;
		color: @grey-medium;
		float: right;
		padding: 0.2em 0.5em;
		margin-left: 0.5em;
		border-radius: 2px;

		.oo-ui-optionWidget-selected & {
			background: none; // `background-color: transparent` would be the goto value, but IE 8-9 introduces a bug
			color: @color-primary;
		}
	}
}