@import 'mediawiki.skin.variables.less';
@import 'mediawiki.mixins.less';

.mf-icon {
	.cdx-mixin-css-icon-background( );
	.cdx-mixin-css-icon-size( );
	.cdx-mixin-css-icon-alignment( );
	font-size: 14px;

	// Temporary fix for https://phabricator.wikimedia.org/T356540
	background-position: center;
	background-repeat: no-repeat;
	background-size: ~'calc( max( @{size-icon-medium}, @{min-size-icon-medium} ) )';
}

.mf-icon-close {
	.cdx-mixin-css-icon( @cdx-icon-close, @param-is-button-icon: false,
	@param-fill-color: @color-subtle );
}

.mf-icon-close-gray {
	.cdx-mixin-css-icon( @cdx-icon-close, @param-is-button-icon: false,
	@param-fill-color: @border-color-base );
}

.mf-icon-previous {
	.cdx-mixin-css-icon( @cdx-icon-previous, @param-is-button-icon: false,
	@param-fill-color: @color-subtle );
}

.mf-icon-next {
	.cdx-mixin-css-icon( @cdx-icon-next, @param-is-button-icon: false,
	@param-fill-color: @color-subtle );
}

.mf-icon-next-invert {
	.cdx-mixin-css-icon( @cdx-icon-next, @param-is-button-icon: false,
	@param-fill-color: @color-inverted );
}

.mf-icon-alert-invert {
	.cdx-mixin-css-icon( @cdx-icon-alert, @param-is-button-icon: false,
	@param-fill-color: @color-inverted-fixed );
}

.mf-icon-expand {
	.cdx-mixin-css-icon( @cdx-icon-expand, @param-is-button-icon: false,
	@param-fill-color: @color-subtle );
}

.mf-icon-expand-invert {
	.cdx-mixin-css-icon( @cdx-icon-expand, @param-is-button-icon: false,
	@param-fill-color: @color-inverted-fixed );
}

.mf-icon-collapse {
	.cdx-mixin-css-icon( @cdx-icon-collapse, @param-is-button-icon: false,
	@param-fill-color: @color-subtle );
}

.mf-icon-rotate-anti-clockwise {
	transform: rotate( -90deg );
}

.mf-icon-rotate-clockwise {
	transform: rotate( 90deg );
}

.mf-icon-rotate-flip {
	transform: scaleY( -1 );
}

.rtl {
	.mf-icon-rotate-anti-clockwise {
		transform: rotate( 90deg );
	}

	.mf-icon-rotate-clockwise {
		transform: rotate( -90deg );
	}
}

.mf-icon-spinner {
	background-image: url( spinner.svg );
	transform-origin: 50% 50%;
	animation: mf-icon-spinner-rotate 1.2s steps( 12, end ) infinite;
}

@keyframes mf-icon-spinner-rotate {
	from {
		transform: rotate( 0deg );
	}

	to {
		transform: rotate( 360deg );
	}
}
