/* Icon.css */
.moon-icon,
.moon-icon-toggle {
	width: @moon-icon-size;
	height: @moon-icon-size;
	background-position: center -((@moon-icon-sprite-size - @moon-icon-size) / 2);
	background-size: @moon-icon-sprite-size (@moon-icon-sprite-size * 2);
	background-repeat: no-repeat;
	display: inline-block;
	vertical-align: middle;
	margin: @moon-icon-margin;
	font-family: "Moonstone", "Moonstone Icons";
	font-size: (@moon-icon-size * 2);
	line-height: @moon-icon-size;
	text-align: center;
	position: relative;
	color: @moon-icon-text-color;

	.font-kerning(none);
	.moon-taparea(@moon-icon-size);

	&.small {
		background-position: center -((@moon-icon-sprite-small-size - @moon-icon-small-size) / 2);
		background-size: @moon-icon-sprite-small-size (@moon-icon-sprite-small-size * 2);
		width: @moon-icon-small-size;
		height: @moon-icon-small-size;
		font-size: (@moon-icon-small-size * 2);
		line-height: @moon-icon-small-size;

		.moon-taparea(@moon-icon-small-size);
	}

	&.font-lg-icons {
		font-family: "LG Icons";
		font-size: @moon-icon-size;

		&.small {
			font-size: @moon-icon-small-size;
		}
	}

	.moon-neutral & {
		color: inherit;
	}

	&.disabled,
	.disabled & {
		.vendor-opacity(@moon-disabled-opacity);
	}

	.spotlight & {
		color: @moon-spotlight-text-color;
		background-position: center -(@moon-icon-sprite-size + ((@moon-icon-sprite-size - @moon-icon-size) / 2));

		&.small {
			background-position: center -(@moon-icon-sprite-small-size + ((@moon-icon-sprite-small-size - @moon-icon-small-size) / 2));
		}
	}
}