@import 'mediawiki.ui/variables';
@import 'mw.rcfilters.mixins';
@import 'mw.rcfilters.variables';

@size-circle: 20 / @font-size-system-ui / @font-size-vector;
@margin-circle: 5 / @font-size-system-ui / @font-size-vector;

.mw-rcfilters-ui-tagItemWidget {
	// Background and color of the capsule widget need a bit
	// more specificity to override OOUI internals
	&.oo-ui-flaggedElement-muted.oo-ui-tagItemWidget.oo-ui-widget-enabled {
		// Muted state
		background-color: @colorGray14;
		border-color: @colorGray12;

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

	&.oo-ui-flaggedElement-invalid.oo-ui-tagItemWidget.oo-ui-widget-enabled {
		.oo-ui-labelElement-label {
			color: @colorDestructiveActive;
		}
	}

	// OOUI classes require super-specificity in order to override
	// the white background
	// The specificity is fixed in the patch: https://gerrit.wikimedia.org/r/#/c/349525/
	// and will be available in the next OOUI release.
	.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined &-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled {
		background-color: @background-color-primary;
		border-color: @colorProgressive;
	}

	&-popup-content {
		padding: 0.5em;
		color: @colorGray5;
	}

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

	&-highlight {
		display: none;
		width: 10px;
		margin-right: @margin-circle;

		&-highlighted {
			display: inline-block;
		}

		&:before {
			content: '';
			display: block;
			position: absolute;
			top: 50%;
			.mw-rcfilters-circle( 10px, 10px, ~'-5px 0.5em 0 0' );
		}

		&[ data-color='c1' ]:before {
			.mw-rcfilters-circle-color( @highlight-c1 );
		}

		&[ data-color='c2' ]:before {
			.mw-rcfilters-circle-color( @highlight-c2 );
		}

		&[ data-color='c3' ]:before {
			.mw-rcfilters-circle-color( @highlight-c3 );
		}

		&[ data-color='c4' ]:before {
			.mw-rcfilters-circle-color( @highlight-c4 );
		}

		&[ data-color='c5' ]:before {
			.mw-rcfilters-circle-color( @highlight-c5 );
		}
	}
}