@import 'mw.rcfilters.mixins';

.mw-rcfilters-ui-capsuleItemWidget {
	background-color: #fff;
	border-color: #979797;
	color: #222;

	&-muted {
		// Muted state
		background-color: #eaecf0;
		border-color: #c8ccd1;
		.oo-ui-labelElement-label {
			color: #72777d;
		}

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

	&-selected {
		background-color: #eaf3ff;
		border-color: #36c;
	}

	&-popup-content {
		padding: 0.5em;
		color: #54595d;
	}

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

	&-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' );
		}
	}
}