$datepicker-background-color: $white !default
$datepicker-radius: $radius !default
$datepicker-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$datepicker-header-color: $grey !default
$datepicker-today-border: solid 2px rgba($primary, 0.5) !default
$datepicker-item-color: $grey-dark !default
$datepicker-item-disabled-color: $grey-light !default
$datepicker-item-hover-color: $black !default
$datepicker-item-hover-background-color: $background !default
$datepicker-item-hover-border: solid 2px $datepicker-item-hover-background-color !default
$datepicker-item-selected-color: $link-invert !default
$datepicker-item-selected-background-color: $link !default

.b-datepicker
	font-size: 0.875rem
	.dropdown,
	.dropdown-trigger
		width: 100%
	// unset opacity when dropdown is disabled
	.dropdown
		&.is-disabled
			opacity: 1
	.dropdown-item
		font-size: inherit
	.datepicker-header
		padding-bottom: 0.5rem
		padding-left: 0.25rem
		padding-right: 0.25rem
		margin-bottom: 0.5rem
		border-bottom: 1px solid $grey-lighter
		.datepicker-next,
		.datepicker-previous
			display: flex
			flex-direction: column
			justify-content: center
	.datepicker-content
		padding: 0 0.25rem
	.datepicker-footer
		margin-top: 0.5rem
		padding: 0.5rem
		border-top: 1px solid $grey-lighter
	.datepicker-table
		width: 100%
		.datepicker-cell
			text-align: center
			vertical-align: middle
			border-radius: $radius
			padding: 0.5rem 0.75rem
		.datepicker-header
			.datepicker-cell
				color: inherit
				font-weight: $weight-semibold
		.datepicker-body
			.datepicker-row
				display: table-row
			.datepicker-months
				display: inline-flex
				flex-wrap: wrap
				flex-direction: row
				width: 17rem
				.datepicker-cell
					display: flex
					align-items: center
					justify-content: center
					width: 33.33%
					height: 2.5rem
			.datepicker-cell
				width: 100%
				border: solid 2px transparent
				&.is-unselectable
					color: $datepicker-item-disabled-color
				&.is-today
					border: $datepicker-today-border
				&.is-selectable
					color: inherit
					&:focus:not(.is-selected)
						background-color: $datepicker-item-hover-background-color
						border: $datepicker-item-hover-border
						color: $datepicker-item-hover-color
						cursor: pointer
					&.is-within-hovered-range
						&.is-first-hovered
							background-color: $grey
							color: $grey-lighter
							border-bottom-right-radius: 0
							border-top-right-radius: 0
						&.is-within-hovered
							background-color: $datepicker-item-hover-background-color
							color: $datepicker-item-hover-color
							border-radius: 0
						&.is-last-hovered
							background-color: $grey
							color: $grey-lighter
							border-bottom-left-radius: 0
							border-top-left-radius: 0
				&.is-selected
					border: $datepicker-today-border
					background-color: $datepicker-item-selected-background-color
					color: $datepicker-item-selected-color
					&.is-first-selected
						background-color: $datepicker-item-selected-background-color
						color: $datepicker-item-selected-color
						border-bottom-right-radius: 0
						border-top-right-radius: 0
					&.is-within-selected
						background-color: rgba($datepicker-item-selected-background-color, 0.5)
						border-radius: 0
					&.is-last-selected
						background-color: $datepicker-item-selected-background-color
						color: $datepicker-item-selected-color
						border-bottom-left-radius: 0
						border-top-left-radius: 0
				&.is-nearby:not(.is-selected)
					color: $grey-light
				&.is-week-number
					cursor: default
			&.has-events
				.datepicker-cell
					padding: 0.3rem 0.75rem 0.75rem
					&.has-event
						position: relative
						.events
							bottom: .425rem
							display: flex
							justify-content: center
							left: 0
							padding: 0 .35rem
							position: absolute
							width: 100%
							.event
								@each $name, $pair in $colors
									$color: nth($pair, 1)
									&.is-#{$name}
										background-color: $color
						&.dots .event
							border-radius: 50%
							height: .35em
							margin: 0 .1em
							width: .35em

						&.bars .event
							height: .25em
							width: 100%

						&.is-selected,
						&.is-today
							.events
								bottom: calc(.425rem + 2px)
					&.is-selected
						overflow: hidden
						.events .event
							// Currently datepicker only uses primary coloring
							// Ensure indicator is visible when selected
							&.is-primary
								background-color: lighten($primary, 15)
	+mobile
		font-size: 1rem
	&.is-small
		@include control-small
	&.is-medium
		@include control-medium
	&.is-large
		@include control-large
