.control-date-time
	.input-with-icon + .input-icon
		margin-left 15px

.control-input.input-with-icon
	display inline-block
	vertical-align middle
	width 310px
	height 35px

.input-icon
	width 25px
	height 25px
	background url('../img/calendar-input-icons.png') -20px 2px no-repeat
	position relative
	cursor pointer
	opacity .5
	display inline-block
	vertical-align middle
	&:hover, &.active
		opacity 1
	.item-details-attributes .control:first-child &
	.disabled &
		opacity 0
		visibility hidden
		pointer-events none

.date-time-popup
	@extends .pixelPositionWrapper
	width 348px
	user-select none
	min-height 242px
	> .activateable
		display none
		&.active
			display block
	&.clock
		width 214px

.highlight
	color litepurple

.hidden
	display none

.date_time-content
	min-height 240px

.date_time-wrapper
	color darkpurple
	font 15px/18px 'ProximaNova-Semibold'
	padding 0 26px 13px
	background white
	transition height 1ms
	height 240px
	box-sizing border-box
	.clock &
		padding-bottom 6px

.date_time-header
	text-align center
	height 53px
	line-height 58px
	background #f5f5f5
	border-bottom 1px solid litegray
	margin 0 -26px 13px
	.years-view &
		margin-bottom 16px

.date_time-footer
	text-align center
	height 50px
	line-height 52px
	background #fafafa
	border-top 1px solid litegray
	color darkpurple
	transition background .2s ease
	cursor pointer
	&:hover
		background #f5f5f5

.date_time-current
	display inline-block
	height 53px
	width 100%
	cursor pointer
	background #fafafa
	transition background .2s ease
	&:hover
		background #f5f5f5

.date_time-next
.date_time-prev
	absolute top left
	display inline-block
	width 64px
	height 53px
	cursor pointer
	color transparent
	background #fafafa
	transition background .2s ease
	text-align center
	&:before
		content ""
		display inline-block
		vertical-align middle
		height 100%
		width 0
	&:after
		content ""
		display inline-block
		background url('../img/calendar-input-icons.png') 0 0 no-repeat
		width 10px
		height 14px
	&:hover
		background #f5f5f5

.date_time-prev
	border-right 1px solid litegray

.date_time-next
	left auto
	right 0
	border-left 1px solid litegray
	&:after
		background-position -10px 0

.date_time-cell
	display inline-block
	width 24px
	height 20px
	border-radius 2px
	line-height 20px
	cursor pointer
	.months-view &, .years-view &
		width 58px
	&:hover
		background-color rgba(darkpurple, 0.25)

.date_time-header + table
.datepickr-months + table
	width 100%
	height 160px
	font-size 14px
	table-layout fixed
	thead th
		padding-bottom 6px
		color black
	td
		height 20px
		&.prev-month .datepickr-day
		&.next-month .datepickr-day
			color mediumgray
			&:hover
				background litegray
				color white
		&.today .datepickr-day
			color litepurple
		&.selected .datepickr-day
		&.selected .date_time-cell
			background darkpurple
			color white
.hh, .mm
	&.active
		color litepurple

// calendar css
.datepickr-calendar
	@extends .date_time-wrapper

.datepickr-months
	@extends .date_time-header

.datepickr-current-month
	@extends .date_time-current

.datepickr-prev-month
	@extends .date_time-prev

.datepickr-next-month
	@extends .date_time-next

.datepickr-day
	@extends .date_time-cell

.input-group.clockpicker
	display none

.clockpicker-wrapper
	display inline-block
@import 'clock'