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

.mw-rcfilters-ui-watchlistTopSectionWidget {
	&-editWatchlistButton,
	.mw-rcfilters-ui-markSeenButtonWidget {
		.oo-ui-buttonElement-button {
			// T356467
			white-space: normal;
		}
	}

	&-watchlistDetails {
		flex-grow: 4;
	}

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

	&-separator {
		margin-top: 1em;
		border-top: 2px @border-style-base @border-color-muted;
	}

	.mw-rcfilters-ui-row {
		justify-content: space-between;
	}

	.mw-rcfilters-ui-watchlistTopSectionWidget-buttonsSection {
		display: flex;
		flex-flow: column;
		align-items: flex-end;
		justify-content: flex-end;
		min-width: 26%;
	}

	.mw-rcfilters-ui-watchlistTopSectionWidget-editWatchlistButtonIcon {
		margin: 0 0.375em 0 0;
		vertical-align: top;
	}

	// On small screens, remove the table properties from the
	// top section. T225127#5518870
	@media screen and ( max-width: @max-width-breakpoint-tablet ) {
		.mw-rcfilters-ui-row {
			display: flex;
			flex-flow: column;
		}

		.mw-rcfilters-ui-watchlistTopSectionWidget-buttonsSection {
			display: flex;
			flex-direction: row;
		}

		&-editWatchlistButton {
			align-self: start;
			min-width: 6em;
			margin: 0.875em 0.875em 0 0.15em;
		}

		.mw-rcfilters-ui-watchlistTopSectionWidget-editWatchlistButtonIcon {
			margin-right: 0.375em;
		}

		&-savedLinksTable {
			.mw-rcfilters-ui-row {
				flex-wrap: wrap;
				gap: 1em;
			}
		}
	}

	// styles that should only kick in for tablet mode:
	@media screen and ( min-width: @min-width-breakpoint-tablet )
		and ( max-width: @max-width-breakpoint-tablet ) {
		// T358424
		&-savedLinksTable {
			.mw-rcfilters-ui-row {
				flex-wrap: wrap;
				gap: 1em;
			}
		}

		// T235535
		&-editWatchlistButton {
			min-width: 9em;
			margin: 0.875em 0.15em 0 0.15em;
		}

		.mw-rcfilters-ui-watchlistTopSectionWidget-editWatchlistButtonIcon {
			margin: 0 0.375em 0 0;
		}

		.mw-rcfilters-ui-watchlistTopSectionWidget-buttonsSection {
			display: flex;
			flex-flow: row;
			min-width: auto;
		}

		.mw-rcfilters-ui-row {
			display: flex;
			flex-flow: column;
		}
	}
}

// T395741 Special case for Vector 2022
// stylelint-disable-next-line selector-class-pattern
.skin-vector-2022 {
	.mw-rcfilters-ui-watchlistTopSectionWidget-buttonsSection {
		display: flex;
		flex-flow: row;
		align-items: flex-end;
		justify-content: flex-end;
	}

	@media screen and ( max-width: @max-width-breakpoint-tablet ) {
		.mw-rcfilters-ui-watchlistTopSectionWidget-buttonsSection {
			display: flex;
			flex-flow: row;
			align-items: flex-start;
			min-width: 5em;
		}

		.mw-rcfilters-ui-watchlistTopSectionWidget-editWatchlistButton {
			margin-top: 0.875em;
		}
	}
}