.wpcb-configurator-datepicker {

	.wpcb-input-content {
		position: relative;

		img {
			position: absolute;
			top: 50%;
			right: 20px;
			transform: translateY(-50%);
		}
	}

	input[data-date-inline] {
		display: none;
	}
}

div.ui-widget.ui-datepicker {
	border: 0;
	border-radius: 6px;
	color: $template_color;
	background-color: $template_background;

	.ui-datepicker-header {
		background-color: $template_accent;
		color: $template_color;
		border-radius: 6px;
		border: 0;
	}

	.ui-datepicker-calendar {
		border: 0;
	}

	.ui-datepicker-prev,
	.ui-datepicker-next {
		background-repeat: no-repeat;
		background-position: center;
		background-size: 8px;
		border-radius: 6px;
		border: 1px solid $button_border;
		background-color: $button_background;
		color: $button_color;

		&:hover,
		&:focus {
			background-color: $button_hover_background;
			border: 1px solid $button_hover_border;
		}
		
		&:before {
			content: '';
			position: absolute;
			display: block;
			width: 14px;
			height: 14px;
			top: 6px;
			left: 6px;
			background-image: url(../img/light/chevron-right.svg);
			background-repeat: no-repeat;
			background-position: center;
		}

		span {
			display: none;
		}
	}

	.ui-datepicker-prev:before {
		transform: rotate(-180deg);
	}

	.ui-datepicker-prev-hover, 
	.ui-datepicker-next-hover {
		top: 2px;
		cursor: pointer;
		background-color: $template_background;
	}
	.ui-datepicker-prev-hover {
		left: 2px;
	}
	.ui-datepicker-next-hover {
		right: 2px;
	}

	td a {
		outline: 0;
		text-align: center;
	}

	.ui-state-default {
		background-color: $template_background;
		color: $template_color;
		text-align: center;
		border: 1px solid $template_border;
		border-radius: 6px;
	}

	.ui-state-hover {
		border: 1px solid $button_background;
		color: $template_color;
	}

	.ui-state-highlight {
		background-color: $template_accent;
		border: 1px solid $button_background;
		color: $template_color;
	}

	.ui-state-active {
		background-color: $button_background;
		color: $button_color;
	}

	.ui-state-disabled .ui-state-default {
		background-color: $template_border;
		border: 1px solid $template_border;
		opacity: 1;
	}

	&.wpcb-border-rounded {
		border-radius: 3px;

		.ui-datepicker-header {
			border-radius: 3px;
		}
		
		.ui-datepicker-prev,
		.ui-datepicker-next {
			border-radius: 3px;
		}

		.ui-state-default {
			border-radius: 3px;
		}
	}

	&.wpcb-border-pill {
		border-radius: 20px;

		.ui-datepicker-header {
			border-radius: 20px;
		}
		
		.ui-datepicker-prev,
		.ui-datepicker-next {
			border-radius: 20px;
		}

		.ui-state-default {
			border-radius: 20px;
		}
	}
}