/* Button */

// Local scope for some math variables
& {
	@moon-button-pressed-scaled-up: (1 + @moon-button-pressed-scale);
	@moon-button-pressed-scaled-down: (1 / @moon-button-pressed-scaled-up);

	@-webkit-keyframes moonButtonExpand {
		// Blink/Webkit doesn't yet support "@keyframes" so we must use both prefixed and non-prefixed in this section
		60% {
			-webkit-transform: translateZ(0) scale(@moon-button-pressed-scaled-up);
			transform: translateZ(0) scale(@moon-button-pressed-scaled-up);
		}
	}
	@-webkit-keyframes moonButtonContract {
		60% {
			-webkit-transform: translateZ(0) scale(@moon-button-pressed-scaled-down);
			transform: translateZ(0) scale(@moon-button-pressed-scaled-down);
		}
	}

	@keyframes moonButtonExpand {
		60% { transform: translateZ(0) scale(@moon-button-pressed-scaled-up); }
	}
	@keyframes moonButtonContract {
		60% { transform: translateZ(0) scale(@moon-button-pressed-scaled-down); }
	}
}

.moon-button {
	position: relative;
	overflow: visible;
	height: @moon-button-height;
	line-height: (@moon-button-height - (2 * @moon-button-border-width));
	border-radius: @moon-button-border-radius;
	background-color: @moon-button-background-color;
	border: @moon-button-border-width solid transparent;
	cursor: pointer;
	white-space: nowrap;
	display: inline-block;
	width: auto;
	min-width: @moon-button-height;
	max-width: 300px;
	padding: 0 @moon-button-h-padding;
	margin: 0 @moon-spotlight-outset;
	color: @moon-button-text-color;
	box-sizing: border-box;
	-webkit-transition: transform 0.2s ease-out;
	-webkit-animation-duration: 0.2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-out;
	transition: transform 0.2s ease-out;
	animation-duration: 0.2s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;

	> * {
		text-align: center;
	}

	// Need 100% width for marquee in button
	.moon-marquee {
		width: 100%;
		vertical-align: top;
		text-align: center;
	}
	.moon-taparea(@moon-button-height);

	.button-client {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		-webkit-animation: inherit;
		animation: inherit;
	}

	&.min-width {
		min-width: @moon-button-large-min-width;
	}

	&.small {
		height: @moon-button-small-height;
		min-width: @moon-button-small-height;
		line-height: (@moon-button-small-height - (2 * @moon-button-border-width));
		padding: 0 @moon-button-small-h-padding;
		position: relative;
		overflow: visible;

		&.min-width {
			min-width: @moon-button-small-min-width;
		}

		.moon-taparea(@moon-button-small-height);
	}

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

	&.transparent {
		background-color: transparent;
	}

	// Button-non-disabled rules
	&:not([disabled]) {
		&.pressed,
		&.spotlight:active {
			-webkit-animation-name: moonButtonExpand;
			animation-name: moonButtonExpand;

			&:before,
			&:after,
			.button-client {
				-webkit-animation-name: moonButtonContract;
				animation-name: moonButtonContract;
			}
		}

		&.spotlight {
			background-color: @moon-spotlight-border-color;
			color: @moon-spotlight-text-color;
		}

		// 'Selected' state
		&.active {
			border-color: @moon-spotlight-border-color;

			// 'Selected+Focus' state, seen in grouped buttons
			&.spotlight {
				border-color: @moon-active-spotlight-border-color;
				background-color: @moon-spotlight-border-color;
				color: @moon-spotlight-text-color;
			}
		}
	}

	// Button-disabled rules
	&[disabled] {
		cursor: default;
		.vendor-opacity(@moon-disabled-translucent-opacity);
	}
}

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

	* {
		color: inherit;
	}

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