@import 'mediawiki.mixins.less';

/* stylelint-disable selector-class-pattern */

// OOUIHTMLForm styles
@ooui-font-size-browser: 16; // assumed browser default of `16px`
@ooui-font-size-base: 0.875 / 1em; // equals `14px` at browser default of `16px`

@ooui-spacing-small: 8 / @ooui-font-size-browser / @ooui-font-size-base; // equals `0.57142857em`≈`8px`
@ooui-spacing-medium: 12 / @ooui-font-size-browser / @ooui-font-size-base; // equals `0.8571429em`≈`12px`
@ooui-spacing-large: 16 / @ooui-font-size-browser / @ooui-font-size-base; // equals `1.1428571em`≈`16px`
@ooui-padding-horizontal: 12 / @ooui-font-size-browser / @ooui-font-size-base;
@ooui-padding-vertical: 4 / @ooui-font-size-browser / @ooui-font-size-base; // equals `0.285714em`≈`4px`

.mw-htmlform-ooui-wrapper.oo-ui-panelLayout-padded {
	.client-js & .oo-ui-fieldsetLayout.mw-collapsible .oo-ui-fieldsetLayout-header {
		// Push legend up when JS is on, to increase clickable area.
		margin-top: -@ooui-spacing-small;
		margin-bottom: @ooui-spacing-small;
		// Add `padding-top` to make up for negative `margin` above.
		padding: @ooui-spacing-small;
		// Make space for toggle icon defined below.
		padding-left: 24 / @ooui-font-size-browser / @ooui-font-size-base;

		.oo-ui-labelElement-label {
			margin-bottom: 0;
		}
	}

	// Trigger only when collapsible & JS is available via `.mw-collapsed`.
	.client-js & .oo-ui-fieldsetLayout.mw-collapsed .oo-ui-fieldsetLayout-header {
		min-height: 30px;
		// Negative margin to match the reduced distance on the top caused by the previous rule.
		margin-bottom: -@ooui-spacing-medium;
	}
}

.mw-htmlform-ooui {
	line-height: 1.4; // Override MediaWiki's default of `1.6`

	.oo-ui-fieldsetLayout-header {
		font-size: 100%; // Override MediaWiki's generic `legend` styling
	}

	.oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
		line-height: 16 / @ooui-font-size-browser / @ooui-font-size-base;
	}

	// Default OOUI styles produce a larger margin here
	.mw-htmlform-field-HTMLSizeFilterField {
		margin-top: @ooui-spacing-medium;
	}

	.mw-htmlform-matrix {
		border-spacing: 0 2px;

		th {
			font-weight: normal;
		}

		td {
			padding: @ooui-padding-vertical @ooui-padding-horizontal;
			text-align: center;
			.transition( background-color 250ms );

			&:first-child {
				text-align: left;
			}

			&.first {
				margin-right: 5%;
				width: 39%;
			}
		}

		thead tr td {
			padding-bottom: 0;
		}

		tbody tr:nth-child( even ) td {
			background-color: #f8f9fa;
		}

		tbody tr:hover td {
			background-color: #eaecf0;
		}

		// Specificity needed because of necessary high OOUI specificity due to modularity
		.oo-ui-fieldLayout.oo-ui-fieldLayout-align-top .oo-ui-fieldLayout-help {
			margin-top: 0;
		}

		.oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
			padding-bottom: 0;
		}
	}
}

// Flatlist styling for PHP (`.oo-ui-fieldLayout-align-inline`) &
// JS (`.oo-ui-radioOptionWidget, .oo-ui-checkboxMultioptionWidget`) widgets
.mw-htmlform-flatlist {
	.oo-ui-fieldLayout-align-inline,
	.oo-ui-radioOptionWidget,
	.oo-ui-checkboxMultioptionWidget {
		display: inline-block;
		margin-right: @ooui-spacing-medium;
	}

	// Reduce label distance in flatlist
	&.oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
		padding-bottom: 0;
	}
}

// First selector is flatlist specific
.mw-htmlform-field-HTMLMultiSelectField.oo-ui-fieldLayout,
.mw-htmlform-ooui .htmlform-tip,
.mw-htmlform-ooui .mw-htmlform-submit-buttons {
	margin-top: @ooui-spacing-medium;
}

.oo-ui-fieldsetLayout.mw-collapsible {
	.oo-ui-fieldsetLayout-header {
		max-width: none;
	}

	.mw-collapsible-toggle .oo-ui-iconElement-icon {
		position: absolute;
		top: 0;
		left: 0;
		// Special case: Reduce to `16px` icon size here.
		min-width: 16px;
		width: 16 / @ooui-font-size-browser / @ooui-font-size-base;
		margin-right: 0.5em;
	}

	// When expanded: only 'collapse' icon visible
	.mw-collapsible-toggle .oo-ui-icon-expand {
		display: none;
	}

	// When collapsed: only 'expand' icon visible
	&.mw-collapsed {
		.mw-collapsible-toggle .oo-ui-icon-expand {
			display: inline-block;
		}

		.mw-collapsible-toggle .oo-ui-icon-collapse {
			display: none;
		}
	}
}