@import 'mediawiki.mixins.rotation';

/* Watch/Unwatch Icon Styling */
/* Only use icon if the menu item is not collapsed into the "More" dropdown
 * (in which case it is inside .vectorMenu instead of .vectorTabs). */
.vectorTabs {
	// `#ca-unwatch` & `#ca-watch` both carry `.mw-watchlink` as well.
	.mw-watchlink.icon a {
		margin: 0;
		padding: 0;
		display: block;
		width: 28px;
		/* This hides the text but shows the background image */
		/* Must not exceed parent's height, otherwise the background disappears on Chrome (T196610) */
		padding-top: 2.5em / 0.8125;
		height: 0;
		overflow: hidden;
		background-position: 5px 60%;
		background-repeat: no-repeat;
	}

	#ca-unwatch.icon a {
		.background-image-svg( 'images/unwatch-icon.svg', 'images/unwatch-icon.png' );
	}

	#ca-watch.icon a {
		.background-image-svg( 'images/watch-icon.svg', 'images/watch-icon.png' );
	}

	#ca-unwatch.icon a:hover,
	#ca-unwatch.icon a:focus {
		.background-image-svg( 'images/unwatch-icon-hl.svg', 'images/unwatch-icon-hl.png' );
	}

	#ca-watch.icon a:hover,
	#ca-watch.icon a:focus {
		.background-image-svg( 'images/watch-icon-hl.svg', 'images/watch-icon-hl.png' );
	}

	// Loading watchstar link class.
	#ca-unwatch.icon .loading,
	#ca-watch.icon .loading {
		background-image: url( images/watch-icon-loading.svg );
		.rotation( 700ms );
		/* Suppress the hilarious rotating focus outline on Firefox */
		outline: 0;
		cursor: default;
		pointer-events: none;
		background-position: 50% 60%;
		-webkit-transform-origin: 50% 57%;
		transform-origin: 50% 57%;
	}
}