.moon-header {
	.border-box;
	color: @moon-header-text-color;
	border-top: @moon-header-border-top-width solid @moon-header-border-color;
	border-bottom: @moon-header-border-bottom-width solid @moon-header-bottom-border-color;
	position: relative;
	max-width: 100%;
	padding: 0 0 @moon-spotlight-outset 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: top left;
	margin: 0 @moon-spotlight-outset;

	&.full-bleed {
		padding: 0 @moon-header-indent-width @moon-spotlight-outset @moon-header-indent-width;
		border: 0;

		.moon-header-client {
			left: @moon-header-indent-width;
			right: @moon-header-indent-width;
		}
	}

	// adjust child elements of .moon-hsacing so that large and small buttons/icon buttons all align to the bottom
	.moon-hspacing > * {
		vertical-align: bottom;
	}

	.moon-header-title-below {
		margin-top: -3px;  // Tuck this element up under the title
	}

	// Large Header
	&.moon-large-header {
		height: @moon-header-height-large;

		.moon-header-title-above {
			margin-top: 6px;
			height: 1.2em;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;

			.no-border {
				border: none;
			}
		}

		.moon-header-title {
			line-height: @moon-header-line-height;

			.moon-marquee-text {
				white-space: nowrap;
			}

			.enyo-locale-non-latin & {
				line-height: @moon-non-latin-header-text-line-height;
			}
		}

		.moon-header-title-below,
		.moon-header-sub-title-below {
			line-height: 45px;
		}
	}

	// Medium Header
	&.moon-medium-header {
		height: @moon-header-height-medium;

		.moon-header-title-above {
			display: none;
		}

		.moon-header-title {
			line-height: @moon-medium-header-line-height;

			.enyo-locale-non-latin & {
				line-height: @moon-non-latin-medium-header-line-height;
			}
		}

		.moon-header-title-below,
		.moon-header-sub-title-below {
			line-height: 39px;
		}
	}

	// Small Header
	&.moon-small-header {
		height: @moon-header-height-small;

		.moon-header-title-above,
		.moon-header-title-below,
		.moon-header-sub-title-below {
			display: none;
		}

		.moon-header-title {
			padding: 30px 0 0 0;
			line-height: @moon-small-header-line-height;
			font-size: @moon-small-header-font-size;
			height: 84px;

			.enyo-locale-non-latin & {
				line-height: @moon-non-latin-small-header-line-height;
			}
		}
	}

	&.moon-large-header .moon-header-title-wrapper,
	&.moon-medium-header .moon-header-title-wrapper,
	&.moon-small-header .moon-header-client {
		@button-clearance: (@moon-grid-gutter-width + @moon-icon-button-small-size);

		.has-close-button & {
			margin-right: @button-clearance;
		}
		.enyo-locale-right-to-left .has-close-button & {
			margin-left: @button-clearance;
			margin-right: 0;
		}
	}

	.moon-header-client {
		position: absolute;
		bottom: 12px;
		max-width: 100%;
		left: 0;
		right: 0;
		text-align: right;	/* fallback in case text-align:end isn't supported */
		text-align: end;	/* CSS3 for RTL support */
	}

	&.moon-medium-header .moon-header-client,
	&.moon-small-header .moon-header-client {
		display: inline-block;
		left: auto;
	}

	// vertically aligns client text with standard height widgets
	.moon-header-client-text {
		line-height: @moon-button-small-height;
	}

	//InputHeader classes
	&.moon-input-header {
		.moon-input-header-input-decorator {
			margin: -1px 0px 0px;
			padding: 0px;
			border: 0px;
			width: 100%;
			box-sizing: border-box;

			&.moon-focused {
				color: @moon-input-header-text-color;
			}

			.moon-input {
				.moon-header-text;
				margin: 0px;
				padding-left: 1px;
				padding-right: 1px;
				display: inline-block;
				box-sizing: border-box;
				line-height: 1.25em;
				color: inherit;
				width: 100%;
				text-overflow: ellipsis;

				.input-placeholder({
					color: @moon-input-header-placeholder-color;
					margin-top: 12px;
					line-height: 1.25em;
					opacity: 1;
				});
			}

			&.spotlight {
				&:not(.moon-focused) .moon-input {
					color: inherit;
					background-color: @moon-spotlight-background-color;

					.input-placeholder({
						color: inherit;
					});
				}

				&.moon-focused .moon-input {
					background: none;
				}
			}
		}

		.moon-header-title-below {
			margin-top: 0;
		}
	}
}

// neutral
.moon-neutral .moon-header {
	border-top: @moon-header-border-top-width solid @moon-neutral-border-color;
	border-bottom: @moon-header-border-bottom-width solid @moon-neutral-border-color;
}

// enyo-locale-non-latin
.enyo-locale-non-latin {
	&.enyo-locale-ja .moon-header {
		.moon-header-title,
		&.moon-input-header .moon-input-header-input-decorator > .moon-input {
			line-height: 1.25em;
		}
		.moon-header-title-below {
			margin-top: 0;  // JP is fine, we don't need to tuck (from above)
		}
	}

	.moon-input-header .moon-input-header-input-decorator > .moon-input {
		.enyo-locale-non-latin .moon-header-text;
	}

	.moon-input-header .moon-input.moon-header-title {
		.input-placeholder({
			line-height: 1.5em;
		});
	}
}

// enyo-locale-right-to-left
.enyo-locale-right-to-left {
	.moon-small-header .moon-header-client,
	.moon-medium-header .moon-header-client {
		right: auto;
		left: 0;
	}
}

// moon-header-left is used in HeaderSample
.moon-header.moon-large-header .moon-header-left {
	float: left;

	.enyo-locale-right-to-left & {
		float: right;
	}
}