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

.mw-rcfilters-collapsed {
	.mw-rcfilters-ui-filterWrapperWidget-bottom {
		> :not( .mw-rcfilters-ui-filterWrapperWidget-showNewChanges ) {
			display: none;
		}
	}
}

.mw-rcfilters-ui-filterWrapperWidget {
	// Make sure this uses the interface direction, not the content direction
	direction: ltr;

	&-viewToggleButtons {
		margin-top: 1em;
	}

	&-bottom {
		.flex-display();
		.flex();
		flex-wrap: wrap;
		margin-top: 1em;
	}

	&-bottom-mobile {
		.oo-ui-buttonElement {
			margin-bottom: 1em;

			&-button {
				text-align: left;
			}
		}

		.mw-rcfilters-ui-changesLimitAndDateButtonWidget {
			order: 1;
		}

		.mw-rcfilters-ui-liveUpdateButtonWidget {
			order: 2;
		}

		.mw-rcfilters-ui-filterWrapperWidget-showNewChanges {
			order: 3;
			font-size: 0.85em;

			& > a {
				white-space: normal;
				/* stylelint-disable-next-line */
				padding-top: 0 !important; //overrides .oo-ui-buttonElement-button
			}
		}
	}

	@media screen and ( max-width: @max-width-breakpoint-mobile ) {
		.mw-rcfilters-ui-filterWrapperWidget-numChangesAndDateWidget {
			display: flex;
			flex-direction: column-reverse;

			#mw-rcfilters-ui-filterWrapperWidget-groupByToggle {
				margin-top: 1em;
			}

			.oo-ui-buttonElement {
				align-self: flex-start;
			}

			label {
				text-wrap: nowrap;
				font-weight: @font-weight-bold;
				margin-top: 1em;
			}
		}
	}

	@media screen and ( min-width: @max-width-breakpoint-mobile ) and ( max-width: 1300px ) {
		.mw-rcfilters-ui-filterWrapperWidget-numChangesAndDateWidget {
			display: flex;
			flex-direction: column-reverse;

			#mw-rcfilters-ui-filterWrapperWidget-groupByToggle {
				margin-top: 1em;
			}

			.oo-ui-buttonElement {
				align-self: flex-end;
			}

			label {
				text-wrap: nowrap;
				font-weight: @font-weight-bold;
				margin-top: 1em;
			}
		}
	}

	@media screen and ( min-width: 1300px ) {
		.mw-rcfilters-ui-filterWrapperWidget-numChangesAndDateWidget {
			display: flex;
			flex-direction: row;

			#mw-rcfilters-ui-filterWrapperWidget-groupByToggle {
				margin-right: 0.875em;
			}

			label {
				text-wrap: nowrap;
				font-weight: @font-weight-bold;
			}
		}
	}
}