@import 'mediawiki.skin.variables.less';
@import 'mw.rcfilters.variables.less';
@import 'mediawiki.mixins.less';

.mw-rcfilters-ui-itemMenuOptionWidget {
	padding: 0 0.5em;
	box-sizing: border-box;

	&:not( :last-child ):not( .mw-rcfilters-ui-itemMenuOptionWidget-identifier-talk ) {
		border-bottom: @border-width-base @border-style-base #eaecf0;
	}

	&-view-namespaces {
		border-top: 4px solid @border-color-subtle;
	}

	// Don't show border for first namespace & hide for every 'talk' option in second selector
	&-view-default + &-view-namespaces,
	&-view-namespaces&.mw-rcfilters-ui-itemMenuOptionWidget-identifier-subject + &-view-namespaces.mw-rcfilters-ui-itemMenuOptionWidget-identifier-talk {
		border-top: 0;
	}

	&:hover {
		background-color: @background-color-interactive-subtle;
	}

	.mw-rcfilters-ui-table {
		padding-top: 6 / @font-size-system-ui / @font-size-vector;
		padding-bottom: 6 / @font-size-system-ui / @font-size-vector;
	}

	&.oo-ui-optionWidget-selected {
		background-color: @background-color-progressive-subtle;
	}

	&-label {
		&-title {
			font-weight: bold;
			font-size: 1.15em;
			color: @color-base;
		}

		&-desc {
			color: @color-subtle;
			white-space: normal;
		}
	}

	&-itemCheckbox {
		.oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
			padding-left: 12 / @font-size-system-ui / @font-size-vector;
		}

		.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline {
			// Override margin-top and -bottom rules from FieldLayout
			margin: 0 !important; /* stylelint-disable-line declaration-no-important */

			.oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
				vertical-align: middle;
			}
		}

		.oo-ui-checkboxInputWidget {
			// Workaround for IE11 rendering issues. T162098
			display: block;
		}

		label {
			// Workaround for Chrome browser bug (T199932)
			// Override padding rule from FieldLayout
			padding-left: 0 !important; /* stylelint-disable-line declaration-no-important */
		}
	}

	.mw-rcfilters-ui-cell {
		vertical-align: middle;
	}

	&-excludeLabel {
		width: 5em;
		padding-left: 1em;
		color: @color-subtle;
	}

	&-highlightButton {
		width: 4em;
		padding-left: 1em;
	}
}
