// $ciu-datepicker-width sets the overall size of the widget. Keep in mind that Firefox kind
// of sucks at CSS rendering, especially teeny little fine detail stuff, so try to keep 
// this value over 224, and for best results on Firefox always use a multiple of 7. Also
// remember that for touch interfaces, 44pt is the recommended minimum hit target dimension,
// so that means 308 should be your smallest option here.
$ciu-datepicker-width: 308




// Here's your color palette. Hack away!
$ciu-current-date-foreground: #555555
$ciu-current-date-background: #eeeeee
$ciu-calendar-head-background: #333333
$ciu-calendar-head-foreground: white
$ciu-calendar-body-background: #eeeeee
$ciu-calendar-body-foreground: #555555
$ciu-chosen-day-stroke: #222222
$ciu-chosen-day-fill: white
$ciu-other-months-foreground: #999999




/*********************** NO USER-SERVICEABLE PARTS INSIDE ***********************/
$ciu-hit-target-minimum-size: $ciu-datepicker-width / 7
$ciu-segment-width: ($ciu-datepicker-width - (2 * $ciu-hit-target-minimum-size)) / 3 - 10
$ciu-current-date-font-size: #{$ciu-hit-target-minimum-size / 2}px
$ciu-prev-next-edge-margin: #{$ciu-hit-target-minimum-size * 0.16}px
$ciu-calendar-body-font-size: #{$ciu-hit-target-minimum-size / 2.5}px
/********************************************************************************/

.mithril-date-picker-container
	position: relative
	display: inline-block
	z-index: 0

	&.active
		z-index: 99999

.mithril-date-picker, .mithril-date-picker *
	box-sizing: border-box
	-webkit-user-select: none
	-moz-user-select: none
	-ms-user-select: none
	user-select: none

.mithril-date-picker 
	margin: 0 4px
	
	*, button
		font-family: Optima, Helvetica, Arial, sans-serif
		outline: none
		padding: 0

	.current-date
		position: relative
		width: #{$ciu-datepicker-width}px
		background: $ciu-current-date-background
		border: 0
		color: $ciu-current-date-foreground
		padding: 10px
		font-size: $ciu-current-date-font-size
		text-align: center
		cursor: pointer
		z-index: 1

	.overlay
		position: fixed
		top: 0
		left: 0
		width: 100vw
		height: 100vh
		background: rgba(255, 255, 255, 0.8)

	.incoming
		opacity: 0

	.editor
		position: absolute
		margin: 0 4px
		top: 0
		left: 0
		width: #{$ciu-datepicker-width}px
		height: 0
		transition: height 0.2s
		z-index: 1
		overflow: hidden

		&.active
			height: #{$ciu-hit-target-minimum-size * 8.1225}px

	.header
		position: relative
		display: flex
		justify-content: space-between
		background: #222222
		border-radius: 4px
		margin-bottom: 4px

		button
			position: relative
			padding: 0
			margin: 0
			height: #{$ciu-hit-target-minimum-size}px
			background: none
			border: 0
			cursor: pointer

		button.prev, button.next
			min-width: #{$ciu-hit-target-minimum-size}px
			font-size: #{$ciu-hit-target-minimum-size / 3}px
			color: white
			white-space: nowrap

			&:after
				content: ''
				position: absolute
				top: calc(50% - #{$ciu-hit-target-minimum-size / 8 + 1}px)
				width: #{$ciu-hit-target-minimum-size / 4}px
				height: #{$ciu-hit-target-minimum-size / 4}px
				border-top: 2px solid $ciu-calendar-head-foreground
				border-right: 2px solid $ciu-calendar-head-foreground

		button.prev
			text-align: left
			padding-left: #{$ciu-hit-target-minimum-size / 2.5}px
			margin-right: auto

			&:after
				margin-left: $ciu-prev-next-edge-margin
				margin-right: auto
				left: 0
				transform: rotate(-135deg)

		button.next
			text-align: right
			padding-right: #{$ciu-hit-target-minimum-size / 2.5}px
			margin-left: auto

			&:after
				margin-right: $ciu-prev-next-edge-margin
				margin-left: auto
				right: 0
				transform: rotate(45deg)

		.button-bg
			position: absolute
			top: 50%
			transform: translateY(-50%)
			width: #{$ciu-segment-width}px
			height: 80%
			background: #999999
			transition: 0.2s

			&.v0
				left: #{$ciu-hit-target-minimum-size + 15}px
				border-top-left-radius: 16px
				border-bottom-left-radius: 16px

			&.v1
				left: #{$ciu-segment-width + $ciu-hit-target-minimum-size + 15}px
				border-radius: 0

			&.v2
				left: #{2 * $ciu-segment-width + $ciu-hit-target-minimum-size + 15}px
				border-top-right-radius: 16px
				border-bottom-right-radius: 16px
				
		.fake-border
			position: absolute
			left: 50%
			top: 50%
			width: #{3 * $ciu-segment-width}px
			height: 80%
			transform: translate(-50%, -50%)
			border: 1px solid #999999
			border-radius: 16px
			

		.segment
			position: relative
			width: #{$ciu-segment-width}px
			color: white
			font-size: #{$ciu-hit-target-minimum-size/2.25}px
			
	.sled
		position: relative
		display: flex
		width: 300%
		transition: margin-left 0.2s

		&.p0
			margin-left: 0

		&.p1
			margin-left: -100%

		&.p2
			margin-left: -200%

	.calendar
		border-radius: 4px
		position: relative
		overflow: hidden
		width: #{$ciu-datepicker-width}px
		z-index: 0

	.weekdays, .months
		display: flex
		flex-wrap: wrap

	.day, .month, .year
		position: relative
		font-size: $ciu-calendar-body-font-size
		background: $ciu-calendar-body-background
		border: 0
		color: $ciu-calendar-body-foreground
		cursor: pointer
		z-index: 0

		&:focus
			z-index: 1

		&:hover
			background: darken($ciu-calendar-body-background, 10)

		&.dummy
			background: $ciu-calendar-head-background
			color: $ciu-calendar-head-foreground
			border: 0
			cursor: default
			display: flex
			justify-content: center
			align-items: center

			&:hover
				background: $ciu-calendar-head-background

		.number
			position: relative
			z-index: 1

		&.chosen
			background: $ciu-chosen-day-fill
			border: 2px solid $ciu-calendar-head-background
			font-weight: 700

	.day
		width: #{$ciu-hit-target-minimum-size}px
		height: #{$ciu-hit-target-minimum-size}px

	.month
		width: 25%
		height: #{$ciu-datepicker-width / 4}px

	.year
		width: 20%
		height: #{$ciu-datepicker-width / 5}px

	.other-scope
		color: $ciu-other-months-foreground