// Material Design Icons

//size mapping
@md-ui-icon-size-map:
	'18px',
	'24px',
	'36px',
	'48px',
	'60px',
	'72px',
	'84px',
	'96px';

//rotation mapping
@md-ui-icon-rotate-map:
	90,
	180,
	270;

.material-icons {
	font-style: normal;

	.md-theme( @md-theme, @activeStatus:active ) {
		& when ( @md-theme = dark ) {
			& when ( @activeStatus = active ) {
				color: rgba(0, 0, 0, 0.54);
			}
			& when ( @activeStatus = inactive ) {
				color: rgba(0, 0, 0, 0.26);
			}
		}
		& when ( @md-theme = light ) {
			& when ( @activeStatus = active ) {
				color: rgba(255, 255, 255, 1);
			}
			& when ( @activeStatus = inactive ) {
				color: rgba(255, 255, 255, 0.3);
			}
		}
	}

	.md-flip( @flip-direction ) {
	& when ( @flip-direction = vertical ) {
			-webkit-transform: scale(1, -1);
			-moz-transform: scale(1, -1);
			-ms-transform: scale(1, -1);
			transform: scale(1, -1);
		}
		& when ( @flip-direction = horizontal ) {
			-webkit-transform: scale(-1, 1);
			-moz-transform: scale(-1, 1);
			-ms-transform: scale(-1, 1);
			transform: scale(-1, 1);
		}
	}

	//rotation
	.rotate( @degrees ) {
		-webkit-transform: rotate( @degrees + deg );
		-moz-transform: rotate( @degrees + deg );
		-ms-transform: rotate( @degrees + deg );
		transform: rotate( @degrees + deg );
	}
}
