//jQuery UI datepicker styles//

#ui-datepicker-div,
.ui-datepicker {
	// width: 50%;

	// @include respond-to(medium) {
	// 	margin-left: 0;
	// 	width: unset;
	// }

	font-family: 'Roboto';
	border: none;
	border-radius: 0;
	@include light-shadow;

	.ui-corner-all {
		width: unset;
		border: none;

		&:hover {
			transform: none;
		}
	}

	//The header section of the datepicker
	.ui-datepicker-header {
		display: flex;
		justify-content: center;
		padding: 0;
		background-color: $white;
		border: none;
		width: 100%;
	}

	//The previous button in the datepicker
	.ui-datepicker-prev,
	.ui-datepicker-prev-hover {
		// flex-basis: 50%;
		text-align: left;
		@include icon($position: after, $icon: 'chevron-left', $styles: true);
		cursor: pointer;

		span {
			display: none;
		}

		&:hover {
			border: none;
			background-color: transparent;
		}
	}

	//The next button in the datepicker
	.ui-datepicker-next,
	.ui-datepicker-next-hover {
		// flex-basis: 50%;
		text-align: right;
		@include icon($position: after, $icon: 'chevron-right', $styles: true);
		background-color: transparent;
		cursor: pointer;

		span {
			display: none;
		}

		&:hover {
			border: none;
			background-color: transparent;
		}
	}

	.ui-state-hover {
		background: none;
	}

	//The title of the datepicker
	.ui-datepicker-title {
		flex-basis: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		text-align: center;
		margin: 0;
		font-weight: 700;
		font-size: 1rem;
		font-family: 'Lato';
		background-color: $white;


		select {
			height: $spacing-sm;
			min-width: unset;
			width: 6rem;
			font-size: 0.8rem;

			&:not(:last-child) {
				margin-right: $spacing-sm;
			}
		}
	}

	//Styles for the datepicker table section
	.ui-datepicker-calendar {
		border: none;

	}

	table {
		border-collapse: unset;
		border-spacing: 5px;
		width: 100%;
		table-layout: fixed;
	}

	thead {
		background-color: transparent;
		font-size: 0.8rem;
		color: $grey-4;
	}

	th {
		border-bottom: none;
	}

	tr {
		border-bottom: none;
	}

	td,
	.ui-state-default,
	.available {
		border-radius: 5px;
		background-color: transparent;
		background-image: none;
		border: none;
		color: $black;
		text-align: center;

		&:hover {
			background-color: $color-primary;
			color: $white;
		}
	}

	.ui-state-disabled {
		background-color: $white;
		color: $grey-4;
		opacity: 1;

		&:hover {
			pointer-events: none;
			background-color: $white;
		}
	}
}


	.ui-datepicker.special-noCalander{
		.ui-datepicker-header{
			margin-top: $spacing-xs;
			margin-bottom: $spacing-xs;
		}

		.ui-datepicker-calendar{
			display: none;
		}
	}

// //End of datepicker styles