@import 'mediawiki.ui/variables.less';

.mw-rcfilters-ui-watchlistTopSectionWidget {
	&-watchlistDetails {
		width: 100%;
	}

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

	&-separator {
		margin-top: 1em;
		border-top: 2px solid @colorGray14;
	}
}

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

		.mw-rcfilters-ui-cell {
			margin-bottom: 1em;
			width: 100%;
		}

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

// styles that should only kick in for tablet mode:
@media screen and ( min-width: @width-breakpoint-tablet ) {
	.mw-rcfilters-ui-watchlistTopSectionWidget {

		// T235535
		&-editWatchlistButton {
			vertical-align: bottom;
			// Match the width that we are setting up for the loading
			// of the .watchlistDetails in mw.rcfilters.less
			min-width: 20em;
			text-align: right;

			// actual button
			.oo-ui-buttonWidget {
				margin-left: 3em;
			}
		}

		// T235536
		&-savedLinks {
			float: right;
		}
	}
}