@import "mw.rcfilters.mixins";

.mw-rcfilters-ui-capsuleItemWidget {
	&-popup-content {
		padding: 0.5em;
		color: #54595d;
	}

	&.oo-ui-labelElement .oo-ui-labelElement-label {
		vertical-align: middle;
		cursor: pointer;
	}

	&-muted {
		// Muted state
		// We want everything muted except the circle
		background-color: rgba( 255, 255, 255, @muted-opacity );

		.oo-ui-labelElement-label,
		.oo-ui-buttonWidget {
			opacity: @muted-opacity;
		}
	}

	&-highlight {
		display: none;
		padding-right: 0.5em;

		&-highlighted {
			display: inline-block;

		}

		&[data-color="c1"] {
			.mw-rcfilters-mixin-circle( @highlight-c1, 0.7em, ~"0 0.5em 0 0" );
		}
		&[data-color="c2"] {
			.mw-rcfilters-mixin-circle( @highlight-c2, 0.7em, ~"0 0.5em 0 0" );
		}
		&[data-color="c3"] {
			.mw-rcfilters-mixin-circle( @highlight-c3, 0.7em, ~"0 0.5em 0 0" );
		}
		&[data-color="c4"] {
			.mw-rcfilters-mixin-circle( @highlight-c4, 0.7em, ~"0 0.5em 0 0" );
		}
		&[data-color="c5"] {
			.mw-rcfilters-mixin-circle( @highlight-c5, 0.7em, ~"0 0.5em 0 0" );
		}
	}
}