$lui-date-picker-select-color: $light-blue-700;
$lui-date-picker-select-text-color: $light-blue-50;
$lui-date-picker-color: $light-blue-500;
$lui-date-picker-text-color: $light-blue-50;
$lui-date-picker-display-year-color: $light-blue-200;
$lui-date-picker-date-display-time-icon-color: $light-blue-300;
$lui-date-picker-date-display-time-icon-hover-color: $light-blue-50;

.lui-date-picker-date-display {
	text-align: center;
	position: relative;

	.lui-date-picker-date-display-dow {
		font-size: 13px;
		height: 32px;
		line-height: 32px;
		background-color: $lui-date-picker-select-color;
		color: $lui-date-picker-select-text-color;
		border-radius: 2px 2px 0 0;
	}
	.lui-date-picker-date-display-time-icon{
		position: absolute;
		right: 20px;
		bottom: 20px;
		font-size: 25px;
		color: $lui-date-picker-date-display-time-icon-color;
		&:hover{
			color: $lui-date-picker-date-display-time-icon-hover-color;
			cursor: pointer;
		}
	}	

	.lui-date-picker-date-display-now-button{
		position: absolute;
		left: 20px;
		bottom: 20px;
		font-size: 20px;
		color: $lui-date-picker-date-display-time-icon-color;
		&:hover{
			color: $lui-date-picker-date-display-time-icon-hover-color;
			cursor: pointer;
		}
		&.lui-is-active{
			color: $lui-date-picker-date-display-time-icon-hover-color;
		}
	}

	.lui-date-picker-date-display-date {
		padding: 16px 0;
		background-color: $lui-date-picker-color;
		color: $lui-date-picker-text-color;
		
		&.lui-time-display-visible{
			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
		}
	}

	.lui-date-picker-date-display-month,
	.lui-date-picker-date-display-year {
		font-size: 22px;
		line-height: 24px;
		height: 24px;
		text-transform: uppercase;
	}

	.lui-date-picker-date-display-day {
		margin: 6px 0;
		line-height: 58px;
		height: 58px;
		font-size: 58px;
	}

	.lui-date-picker-date-display-year {
		color: $lui-date-picker-display-year-color;
	}
}

	.lui-date-picker-date-display {
		
	}

.lui-is-landscape {

	.lui-date-picker-date-display {
		* { @include ease-out(); }
	}

	.lui-date-picker-date-display-dow {
		border-radius: 2px 0 0 0;
	}

	.lui-date-picker-date-display-date {
		padding: 24px 0;
	}

	.lui-date-picker-date-display-day {
		font-size: 76px;
		line-height: 76px;
		height: 76px;
	}

	.lui-date-picker-date-display-month,
	.lui-date-picker-date-display-year {
		 font-size: 26px;
		 line-height: 26px;
		 height: 26px;
	}

	.lui-is-5week {
		.lui-date-picker-date-display-date {
			padding: 30px 0;
		}
		.lui-date-picker-date-display-day {
			margin: 24px 0;
		}
	}

	.lui-is-6week {
		.lui-date-picker-date-display-date {
			padding: 50px 0;
		}
		.lui-date-picker-date-display-day {
			margin: 24px 0;
		}
	} 
}