/* Overwriting jQuery UI Datepicker styles */

.ui-datepicker {
	width: 350px;
	margin-top: -6px;
	margin-left: 0;
	font-family: var(--font-normal);
	border-radius: 0;
}

.ui-datepicker-header {
	color: var(--color-bright);
	font: var(--font-large);
	font-weight: var(--fontweight-normal);
	text-transform: uppercase;
	background-color: var(--color-primary);
	border-top-right-radius: 0;
	border-top-left-radius: 0;
}

.ui-datepicker-next,
.ui-datepicker-prev {
	background-color: var(--color-primary-light);
	transition: background-color 0.1s ease;
}

.ui-datepicker-next:hover,
.ui-datepicker-prev:hover {
	background-color: var(--color-primary-dark);
}

.ui-datepicker-next.ui-state-disabled,
.ui-datepicker-prev.ui-state-disabled {
	opacity: 0.4;
}

.ui-datepicker-next::after,
.ui-datepicker-prev::after {
	width: 2px;
	background-color: var(--color-bright);
	border-radius: 0;
}

.ui-datepicker-next::before,
.ui-datepicker-prev::before {
	height: 2px;
	background-color: var(--color-bright);
	border-radius: 0;
}

.ui-datepicker-calendar {
	background-color: var(--color-bright);
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

.ui-datepicker-calendar th {
	color: var(--color-slate);
	font: var(--font-small);
	font-weight: var(--fontweight-bold);
}

.ui-datepicker-calendar td {
	height: 34px;
	background-color: var(--color-extra-dark-snow);
	border: 1px solid var(--color-extra-dark-snow);
}

.ui-datepicker-calendar td:hover {
	background-color: var(--color-dark-smoke);
	border: 1px solid var(--color-dark-smoke);
}

.ui-datepicker-calendar td a,
.ui-datepicker-calendar td span {
	padding-right: 6px;
	color: var(--color-black);
	font: var(--font-small);
	font-weight: var(--fontweight-noraml);
}

.ui-datepicker-calendar .ui-datepicker-today {
	background-color: var(--color-bright);
	border: 1px solid var(--color-dark-smoke);
}

.ui-datepicker-calendar .ui-datepicker-current-day {
	background-color: var(--color-primary);
	border: 1px solid var(--color-primary);
}

.ui-datepicker-calendar .ui-datepicker-current-day:hover {
	background-color: var(--color-primary-light);
	border: 1px solid var(--color-primary-light);
}

.ui-datepicker-calendar .ui-datepicker-current-day a {
	color: var(--color-bright);
}

/* MOBILE DATEPICKER
   ----------------------------- */

body[data-device="mobile"] .ui-datepicker {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: auto !important;
	margin-top: 0;
	margin-left: 0;
	background-color: var(--color-bright);
	border-radius: 0;
}

body[data-device="mobile"] .ui-datepicker-header {
	height: calc(100vh / 8);
	height: 42px;
	border-top-right-radius: 0;
	border-top-left-radius: 0;
}

body[data-device="mobile"] .ui-datepicker-calendar {
	padding: 0;
}

body[data-device="mobile"] .ui-datepicker-calendar tr {
	height: calc(100vh / 9);
}

body[data-device="mobile"] .ui-datepicker-calendar td {
	width: calc(100% / 7);
	height: 100%;
	margin-bottom: 0;
}

body[data-device="mobile"] .ui-datepicker-calendar td a,
body[data-device="mobile"] .ui-datepicker-calendar td span {
	align-items: center;
	justify-content: center;
	padding: 0;
}