/* IconButton.css */
.moon-icon-button {
	.border-box;
	color: @moon-icon-button-text-color;
	width: @moon-icon-button-size;
	height: @moon-icon-button-size;
	border-radius: @moon-icon-button-size / 2;
	background-color: @moon-icon-button-bg-color;
	background-size: @moon-icon-sprite-size @moon-icon-sprite-size * 2;
	border: @moon-button-border-width solid transparent;
	background-position: center 0;
	margin: 0 @moon-spotlight-outset;
	line-height: @moon-icon-sprite-size;

	.moon-taparea(@moon-icon-button-size);

	&.small {
		width: @moon-icon-button-small-size;
		height: @moon-icon-button-small-size;
		border-radius: @moon-icon-button-small-size / 2;
		background-size: @moon-icon-sprite-small-size @moon-icon-sprite-small-size * 2;
		background-position: center 0;
		line-height: @moon-icon-sprite-small-size;

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

		> .small-icon-tap-area {
			line-height: @moon-button-small-tap-area-height;
		}
	}

	&.translucent {
		background-color: fade(@moon-icon-button-bg-color, @moon-button-translucent-opacity);
	}

	&.transparent {
		background-color: transparent;
	}

	.moon-neutral & {
		color: @moon-neutral-button-text-color;
		background-color: @moon-neutral-button-bg-color;

		&.translucent {
			background-color: fade(@moon-neutral-button-bg-color, @moon-button-translucent-opacity);
		}

		&.transparent {
			background-color: transparent;
		}

		* {
			color: inherit;
		}

		&[disabled] {
			color: @moon-neutral-button-disabled-text-color;
			background-color: @moon-neutral-button-disabled-bg-color;
		}
	}

	&.hover:hover:not(.disabled),
	&.spotlight,
	&.spotlight.translucent:not(.disabled),
	&.spotlight.transparent:not(.disabled) {
		color: @moon-spotlight-text-color;
		background-color: @moon-icon-button-spotlight-bg-color;
		background-position: center -@moon-icon-sprite-size;

		&.small {
			background-position: center -@moon-icon-sprite-small-size;
		}
	}

	&.active:not(.spotlight),
	&:active.spotlight,
	&.pressed,
	&.hover:hover:not(.disabled):active {
		color: @moon-icon-button-active-text-color;
		background-color: @moon-icon-button-active-bg-color;
		background-position: center 0;
		border-color: @moon-icon-button-active-border-color;

		.moon-neutral & {
			color: @moon-neutral-button-text-color;
			background-color: @moon-neutral-button-bg-color;
		}
		&.small {
			background-position: center 0;
		}
		&.translucent:not(.disabled) {
			background-color: fade(@moon-icon-button-active-bg-color, @moon-button-translucent-opacity);

			.moon-neutral & {
				color: @moon-neutral-button-text-color;
				background-color: fade(@moon-neutral-button-bg-color, @moon-button-translucent-opacity);
			}
		}
		&.transparent:not(.disabled) {
			background-color: transparent;

			.moon-neutral & {
				color: @moon-neutral-button-text-color;
			}
		}
	}

	&.disabled,
	.disabled & {
		border-color: transparent;

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

	// 'Selected+Focus' state
	&.active.spotlight:not(.contextual-popup-button) {
		border-color: @moon-active-spotlight-border-color;
		background-color: @moon-icon-button-active-bg-color;
		color: @moon-spotlight-text-color;

		&:active,
		&.pressed {
			border-color: @moon-icon-button-active-border-color;
			background-position: center -@moon-icon-sprite-size;

			&.small {
				background-position: center -@moon-icon-sprite-small-size;
			}
		}
	}
}

.spotlight .moon-icon-button {
	background-position: center -@moon-icon-sprite-size;

	&.small {
		background-position: center -@moon-icon-sprite-small-size;
	}
}
