@import 'mw.rcfilters.mixins';

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

	&-buttonSelect {
		&-color {
			.oo-ui-iconElement-icon {
				width: 2em;
				height: 2em;
			}

			&-none {
				.mw-rcfilters-mixin-circle( @highlight-none, 2em, 0.5em, true );
				// Override border to dashed
				border: 1px dashed #565656;

				&.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-mixin-circle( @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-mixin-circle( @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-mixin-circle( @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-mixin-circle( @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-mixin-circle( @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;
				}
			}
		}
	}
}