$passive-display-background: #dddddd
$passive-display-number-color: black

$active-display-background: black
$active-display-number-color: white
$active-display-number-border-color: white

$current-display-background: white
$current-display-number-color: black

$editor-number-background: transparent
$editor-current-number-background: greenyellow

$clock-placeholder-outer-rim-color: #444444
$clock-placeholder-background: transparent
$clock-placeholder-hands-color: #444444

.ciu-mithril-timepicker 
	font-family: 'Source Code Pro', monaco, monospace
	position: relative
	width: 120px
	height: 40px
	-webkit-user-select: none
	-moz-user-select: none
	user-select: none

	*
		box-sizing: border-box
			
	.display 
		position: absolute
		display: flex
		width: 120px
		height: 40px
		background: $passive-display-background
		padding: 0 8px
		justify-content: center
		align-items: center
		font-size: 20px
		line-height: 20px
		transition: 0.2s ease-out
		cursor: pointer

	.display-num 
		position: relative
		display: inline-block
		padding: 2px
		border: 1px solid transparent
		border-radius: 7px
		color: $passive-display-number-color
		transition: border-color 0.2s ease-out, padding 0.2s ease-out, color 0.2s ease-out

	.display-num:hover 
		text-decoration: underline
		cursor: pointer

	&.editing 
		z-index: 99999999999		
		
		.display 
			position: absolute
			width: 250px
			height: 90px
			font-size: 36px
			line-height: 36px
			background: $active-display-background
			color: $active-display-number-color
		
		.display-num 
			border: 1px solid $active-display-number-border-color
			padding: 10px
			color: $active-display-number-color
			
			&.current
				background: $current-display-background
				color: $current-display-number-color
				text-decoration: underline
			
		#r 
			margin-left: 10px

		.wrapper
			top: 90px
			width: 250px
			
	.overlay 
		position: fixed
		top: 0
		left: 0
		width: 100vw
		height: 100vh
		
	.wrapper 
		position: absolute
		top: 40px
		left: 0
		width: 120px
		height: 0
		background: $passive-display-background
		overflow: hidden
		transition: 0.2s ease-out
	
		&.h, &.m.i5  
			height: 90px 
		
		&.h.tfh  
			height: 170px 
		
		&.m.i15, &.r  
			height: 50px 
	
	.sled 
		position: absolute
		top: 0
		width: 750px
		height: 100%
		transition: 0.2s ease-out
		display: flex
	
	.h .sled  
		left: 0
			
	.m .sled  
		left: -250px
			
	.r .sled  
		left: -500px 
	
	.editor 
		padding: 5px
		width: 250px
		display: flex
		flex-wrap: wrap
		justify-content: space-around
		align-items: flex-start

	.box 
		width: 35px
		height: 35px
		margin: 2.5px
		display: flex
		justify-content: center
		align-items: center
		border: 1px solid black
		border-radius: 3px
		cursor: pointer
		background: $editor-number-background
		&.current
			background: $editor-current-number-background

	.r .box 
		width: 45%

	.m.i15 .box 
		width: 22%

	.clock 
		position: absolute
		left: 5px
		top: 50%
		width: 30px
		height: 30px
		border-radius: 50%
		border: 1px solid $clock-placeholder-outer-rim-color
		background: $clock-placeholder-background
		overflow: hidden
		transform: translateY(-50%)

	.clock:before, .clock:after 
		content: ''
		position: absolute
		top: 15px
		left: 14px
		height: 1px
		background: $clock-placeholder-hands-color
		transform-origin: left center
		z-index: 1000

	.clock:before 
		width: 45%
		transform: rotate(-90deg)

	.clock:after 
		width: 30%
		transform: rotate(15deg)