.moon-gridlist-imageitem {
	display: inline-block;
	overflow: hidden;
	border: 6px solid transparent;

	.caption {
		.moon-sub-header-text;
		color: @moon-gridlist-caption-color;
	}

	.sub-caption {
		.moon-body-text;
		color: @moon-gridlist-sub-caption-color;
	}

	&.selected {
		border: 6px solid @moon-gridlist-item-selection-color;
		background-color: @moon-gridlist-item-selection-color;
	}

	&.spotlight {
		border: 6px solid @moon-spotlight-border-color;
		background-color: @moon-spotlight-border-color;
	}

	&.selected .caption,
	&.selected .sub-caption,
	&.spotlight .caption,
	&.spotlight .sub-caption {
		color: @moon-spotlight-text-color;
	}

	&.sized-image {

		&.use-caption,
		&.use-subcaption {
			padding-bottom: 42px;
		}

		>.caption,
		>.sub-caption {
			position: absolute;
			bottom: 0;
		}

		&.use-caption.use-subcaption {
			padding-bottom: 96px;

			> .caption {
				position: absolute;
				bottom: 48px;
			}
		}
	}

	/* Adding this to "reset" some of the styling applied to moon.Image. */
	.moon-image {
		display: block;
		margin: 0;
	}

	&:not(.sized-image) {
		padding-bottom: 96px;
	}
}

.enyo-locale-non-latin .moon-gridlist-imageitem {
	.caption {
		.enyo-locale-non-latin .moon-sub-header-text;
	}
	.sub-caption {
		.enyo-locale-non-latin .moon-body-text;
	}
}