.SingleDatePicker_picker,
.DayPicker__horizontal,
.CalendarMonthGrid,
.CalendarMonth {
	background: $c-bg-light;
}

.CalendarMonth_caption {
	@include typescale('body');
	font-family: $font-family-primary;
	color: $c-text;
	text-align: left;
}

.DayPicker_weekHeader_ul {
	display: flex;
	border-bottom: 1px solid $c-border;
}

.CalendarDay {
	z-index: 1;
	font-family: $font-family-primary;
	font-weight: $font-weight-bold;
	@include typescale('legal');

	&:focus {
		outline: none;
	}

	&:after {
		z-index: -1;
		content: '';
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: rem(32);
		height: rem(32);
	}
}

.CalendarDay,
.CalendarDay:hover {
	position: relative;
	vertical-align: middle;
	border: none;
}

.CalendarDay__default:hover {
	background-color: $c-bg;
}

.CalendarDay__today {
	&:before {
		content: '';
		display: block;
		position: absolute;
		top: 75%;
		left: 50%;
		transform: translate(-50%, 0);
		width: rem(8);
		height: rem(2);
		background-color: $c-primary;
	}
}

.CalendarDay__selected,
.CalendarDay__selected:active,
.CalendarDay__selected:hover {
	background: transparent;
	color: $c-white;
	border: none;

	&.CalendarDay__today:before {
		background-color: $c-white;
	}

	&.CalendarDay__selected_start {
		&:before {
			background-color: rgba($c-primary, 0.5);
			content: '';
			display: block;
			position: absolute;
			height: 2rem;
			width: 50%;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			z-index: -1;
		}
	}
	&.CalendarDay__selected_end {
		&:before {
			background-color: rgba($c-primary, 0.5);
			content: '';
			display: block;
			position: absolute;
			height: 2rem;
			width: 50%;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			z-index: -1;
		}
	}
}

.CalendarDay__selected:after {
	background-color: $c-primary;
	border-radius: 100%;
	height: 2rem;
	width: 2rem;
}

.CalendarDay__hovered_span,
.CalendarDay__selected_span {
	background-color: transparent;
	color: $c-white;
}

.CalendarDay__hovered_span:after,
.CalendarDay__selected_span:after {
	background-color: rgba($c-primary, 0.5);
	width: 100%;
	left: 0;
	transform: translateY(-50%);
}

.CalendarDay__hovered_span:hover {
	color: $c-white;
}

.CalendarDay__default.CalendarDay__selected_span:hover:after {
	background-color: rgba($c-primary, 0.7);
}

.CalendarDay__blocked_calendar,
.CalendarDay__blocked_calendar:active,
.CalendarDay__blocked_calendar:hover,
.CalendarDay__blocked_out_of_range,
.CalendarDay__blocked_out_of_range:active,
.CalendarDay__blocked_out_of_range:hover {
	color: lighten($c-text-light, 20%);
	background-color: $c-bg;
}

.DayPickerKeyboardShortcuts_show__bottomRight,
.DayPickerKeyboardShortcuts_show__bottomRight:hover {
	border-right: 33px solid $c-primary;
}

.DayPickerKeyboardShortcuts_buttonReset,
.DayPickerKeyboardShortcuts_show__bottomRight:focus {
	outline: none;
}

.DayPickerNavigation {
	display: flex;
	position: absolute;
	top: spacing('base');
	right: spacing('tight');
}

.DayPickerNavigation_button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: rem(36);
	height: rem(36);
	svg {
		fill: $c-primary;
		width: 1rem;
		height: 1rem;
	}

	&:focus {
		outline: none;
		background-color: $c-bg;
	}
}