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

.mw-rcfilters-ui-highlightColorPickerWidget {
	&-label {
		display: block;
		font-weight: bold;
		font-size: 1.1425em;
	}

	&-buttonSelect {
		&-color {
			.mw-rcfilters-circle( @min-size-circle-colorpicker, @size-circle-colorpicker, @margin-circle );

			// Override OOUI rule from padded popup;
			// We set margin-top as ≈0.357em≈5px for all circles so we get
			// a consistent result
			&.oo-ui-buttonElement {
				margin-top: @margin-circle;

				// Override OOUI rule on frameless :first-child buttons
				&:first-child {
					margin-left: 0;
				}
			}

			// Make the rule much more specific to override OOUI
			&.oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon.oo-ui-icon-check {
				// Align centered horizontally within the color circle
				top: -2px;
				left: 4 / @font-size-system-ui / @font-size-vector;
				// Override OOUI rule on frameless icons
				opacity: 1;
			}

			&-none {
				.mw-rcfilters-circle-color( @highlight-none, true );
				// Override `border-style` to `dashed`
				border-style: dashed;

				&.oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon.oo-ui-icon-check {
					// Align centered horizontally in the dashed white circle with 1px border-width
					left: 3 / @font-size-system-ui / @font-size-vector;
				}

				&.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
				&.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
				&.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
					background-color: @highlight-none;
				}
			}
			&-c1 {
				.mw-rcfilters-circle-color( @highlight-c1, false );
				border-color: @highlight-c1;

				&.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
				&.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
				&.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
					background-color: @highlight-c1;
				}
			}
			&-c2 {
				.mw-rcfilters-circle-color( @highlight-c2, true );
				border-color: @highlight-c2;

				&.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
				&.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
				&.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
					background-color: @highlight-c2;
				}
			}
			&-c3 {
				.mw-rcfilters-circle-color( @highlight-c3, true );
				border-color: @highlight-c3;

				&.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
				&.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
				&.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
					background-color: @highlight-c3;
				}
			}
			&-c4 {
				.mw-rcfilters-circle-color( @highlight-c4, true );
				border-color: @highlight-c4;

				&.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
				&.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
				&.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
					background-color: @highlight-c4;
				}
			}
			&-c5 {
				.mw-rcfilters-circle-color( @highlight-c5, true );
				border-color: @highlight-c5;

				&.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
				&.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
				&.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
					background-color: @highlight-c5;
				}
			}
		}
	}
}