@import 'mediawiki.ui/variables';

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

	&-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;
		}
	}

	&-savedLinks {
		float: right;
	}

	&-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;
		}

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