/* Calendar.css */
.moon-calendar-picker {
	display: inline-block;
	text-align: center;
	width: ((12 + @moon-button-small-height + 12) * 7);
	background-color: @moon-neutral-bg-color;
	border-radius: @moon-contextual-popup-border-radius;
	margin: 0 18px;
	padding: 18px 0;

    > * {
		display: inline-block;
    }
	.moon-simple-picker {
		max-width: 252px;

		.moon-simple-picker-client > * {
			color: @moon-spotlight-text-color;
		}
	}

	.moon-calendar-picker-month {
		margin: 0 0 0 30px;
		float: left;
	}

	.moon-calendar-picker-year {
		margin: 0 30px 0 0;
		float: right;
	}

	.moon-calendar-picker-day {
		.moon-sub-header-text;
		text-align: center;
		vertical-align: middle;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-block;

		&.small {
			font-size: (@moon-sub-header-font-size - 9);
		}
	}

	// override the inherited class from .moon-neutral > * color #ffffff
	.moon-neutral .moon-calendar-picker-day-base {
		width: @moon-button-small-height;
		color: @moon-calendar-picker-date-shadow-color;
		margin: 9px;
		border-color: @moon-calendar-picker-date-shadow-color;
		display: inline-block;
	}
}

.enyo-locale-right-to-left {
	.moon-calendar-picker-month {
		.moon-calendar-picker .moon-calendar-picker-year;
	}

	.moon-calendar-picker-year {
		.moon-calendar-picker .moon-calendar-picker-month;
	}
}

.moon-calendar-picker-date {
	.moon-text-base (@moon-sub-header-font-size, @moon-calendar-picker-date-color);
	width: @moon-button-small-height;
	line-height: @moon-picker-button-width;
	border-radius: @moon-button-border-radius;
	border: solid 9px transparent;
	display: inline-block;

	&.spotlight,
	&.active {
		background-color: @moon-spotlight-background-color;
		border: solid 9px @moon-neutral-bg-color;
	}

	&.moon-calendar-picker-date-shadow {
		color: @moon-calendar-picker-date-shadow-color;

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

.enyo-locale-non-latin {
	.moon-calendar-picker-day {
		.enyo-locale-non-latin .moon-sub-header-text;
	}

	.moon-calendar-picker-date {
		.enyo-locale-non-latin 	.moon-sub-header-text;
	}
}