@import '../variables.less';

.mw-theme-toggle {
	width: var( --width-button-base );
	height: var( --height-header );
	padding: 0;
	border: 0;
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	font-size: 0;
	opacity: var( --opacity-icon-base );
	outline: 0;
	transition: @transition-transform-quick, @transition-opacity-quick;

	&:hover {
		opacity: var( --opacity-icon-base--hover );
	}

	&:active {
		opacity: var( --opacity-icon-base--active );
	}
}

.skin-citizen-dark {
	.mw-theme-toggle {
		filter: invert( 1 );
	}
}