$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-time-display-background: $light-blue-800;
$lui-date-picker-time-display-timezone-color: $light-blue-500;
$lui-date-picker-time-display-selection-icon-color: $light-blue-500;
$lui-date-picker-time-display-selection-icon-hover-color: $light-blue-50;

.lui-date-picker-time-display {
	text-align: center;
	position: relative;
	overflow: hidden;
	height: 0px;
	background-color: $lui-date-picker-time-display-background;
	width: 100%;
	@include ease-out;

	.lui-date-picker-time-display-selection-icon {
		color: $lui-date-picker-time-display-selection-icon-color;
		font-size: 18px;
		padding: 0px;
		height: 18px;

		&:hover{
			color: $lui-date-picker-time-display-selection-icon-hover-color;
			cursor: pointer;
		}

		&.lui-is-disabled{
			color: rgba($lui-date-picker-time-display-selection-icon-color, 0.2);
			cursor: default;
		}
	}

	.lui-date-picker-time-display-wrapper{
		margin-bottom: 15px;
	}
	
	.lui-date-picker-time-display-timezone{
		color: $lui-date-picker-time-display-timezone-color;
	}

	.lui-date-picker-time-display-container {
		padding: 16px 0;
		color: $lui-date-picker-text-color;
		margin-bottom: 10px;
		box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.24);
	}

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

	.lui-date-picker-time-display-time {
		margin: 6px 0;
		line-height: 30px;
		height: 30px;
		font-size: 30px;
		@include user-select(none)
	}

	.lui-date-picker-time-display-time-separator {
		margin: 6px 0;
		line-height: 60px;
		height: 30px;
		font-size: 30px;
	}

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

	&.lui-is-visible {
		height: 150px;
	}
	
}

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