@import 'mediawiki.mixins';
@import 'flow.colors';
@import 'flow.helpers';
@import 'flow.variables';

.flow-watch-link {
	position: absolute;
	top: 0;

	&.flow-board-watch-link {
		font-size: 1.5em;

		// 1em for the size of the watch star,
		// 0.25em for the margin-bottom on the h1
		// 0.5em for the #contentSub
		top: -1.75em;

		// Override default right value, this div is getting a specific width
		// (in line with other flow elements) and the icon will be floated to
		// the right.
		right: auto;
		a {
			float: right;
		}
	}

	a {
		display: inline-block;
		*display: inline;
		zoom: 1;
		padding: .25em .5em;

		// mw-ui-quiet is set when the topic is not watched
		// FIXME: this is a hack, use a better-named class for this
		&.mw-ui-quiet {
			// When not watched, hide the unwatch icon and show the watch icon
			.flow-unwatch {
				display: none;
			}
			.flow-watch {
				display: inline-block;
				*display: inline;
				zoom: 1;
			}
		}

		// When watched, hide the watch icon and show the unwatch icon
		.flow-watch {
			display: none;
		}

		// HACK: mimic old mw-ui style (changing from #00af89 to #00f4bf on hover)
		.flow-unwatch:hover {
			// 0xf4/0xaf = 0xbf/0x89 = 1.394
			-webkit-filter: brightness(1.4);
			filter: brightness(1.4);
		}
	}

	// Correct positioning for ltr/rtl content direction
	.mw-content-ltr & {
		/* @noflip */
		right: 0;
	}

	// Correct positioning for ltr/rtl content direction
	.mw-content-rtl & {
		/* @noflip */
		left: 0;
	}

}

.flow-topic-watchlist {
	a {
		font-size: 1.8em;
	}
}

@media all and (min-width: @small) {
	.flow-topic-watchlist {
		a {
			font-size: inherit;
		}
	}
}

.content {
	position: relative;
}