@import url("/css/theme.css");

/* jQuery UI Datepicker moving pixels fix */
table.ui-datepicker-calendar {border-collapse: separate;}
.ui-datepicker-calendar td {border: 1px solid transparent;}

/* jQuery UI Datepicker hide datepicker helper */
#ui-datepicker-div {display:none;}

/* jQuery UI Datepicker emphasis on selected dates */
.ui-datepicker .ui-datepicker-calendar .ui-state-highlight a {
	background: var(--crabby-grad-button-background-color);
	background-size: 200% 100%;
	background-position: left center;
	color: white !important;
	transition: background-position 0.5s ease-in-out;
	border: 0px;
}

.ui-datepicker .ui-datepicker-calendar .ui-state-highlight a:hover {
	background-position: right center;
}

[data-bs-theme=dark] .ui-datepicker .ui-datepicker-calendar td.ui-state-highlight a,
[data-bs-theme=dark] .ui-datepicker .ui-datepicker-calendar td.ui-state-highlight a.ui-state-focus,
[data-bs-theme=dark] .ui-datepicker .ui-datepicker-calendar td.ui-state-highlight a.ui-state-active,
[data-bs-theme=dark] .ui-datepicker .ui-datepicker-calendar td.ui-state-highlight a.ui-state-highlight {
	background: var(--crabby-store-card-active-bg) !important;
	color: #e8eaed !important;
	border: 1px solid rgb(65, 194, 203) !important;
}

/* Today-only (highlight is on the <a>, not the td): same fill as other days */
[data-bs-theme=dark] .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today:not(.ui-state-highlight) a,
[data-bs-theme=dark] .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today:not(.ui-state-highlight) a.ui-state-highlight {
	background: rgba(255, 255, 255, 0.04) !important;
	color: #e8eaed !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	box-shadow: none !important;
}

[data-bs-theme=dark] .ui-datepicker .ui-datepicker-calendar .ui-state-active:not(.ui-state-highlight) a,
[data-bs-theme=dark] .ui-datepicker .ui-datepicker-calendar .ui-state-focus:not(.ui-state-highlight) a,
[data-bs-theme=dark] .ui-datepicker .ui-datepicker-calendar td:not(.ui-state-highlight) a.ui-state-active,
[data-bs-theme=dark] .ui-datepicker .ui-datepicker-calendar td:not(.ui-state-highlight) a.ui-state-focus {
	background: rgba(255, 255, 255, 0.04) !important;
	color: #e8eaed !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	box-shadow: none !important;
}