/******************************************************************************
 * CRDM jQuery picker skin
 *
 * Shared opt-in themed surface for the established jQuery datepicker and
 * timepicker. This file changes presentation only; picker behavior remains in
 * the existing jQuery UI components.
 ******************************************************************************/

#ui-datepicker-div.crdm-picker-popup {
	box-sizing: border-box;
	color: var(--crdm-text);
	background: var(--crdm-surface-raised);
	border: 1px solid var(--crdm-border-strong);
	border-radius: var(--crdm-radius-md);
	box-shadow: var(--crdm-shadow-popover);
}

/******************************************************************************
 * Datepicker
 ******************************************************************************/

#ui-datepicker-div.crdm-datepicker-popup .ui-datepicker-header {
	background: transparent;
	border-bottom-color: var(--crdm-border);
}

#ui-datepicker-div.crdm-datepicker-popup .ui-datepicker-title {
	color: var(--crdm-text-value);
}

#ui-datepicker-div.crdm-datepicker-popup .ui-datepicker-month,
#ui-datepicker-div.crdm-datepicker-popup .ui-datepicker-year {
	color: var(--crdm-text-value) !important;
}

#ui-datepicker-div.crdm-datepicker-popup .ui-datepicker-prev,
#ui-datepicker-div.crdm-datepicker-popup .ui-datepicker-next {
	color: var(--crdm-text);
}

#ui-datepicker-div.crdm-datepicker-popup .ui-datepicker-prev:hover,
#ui-datepicker-div.crdm-datepicker-popup .ui-datepicker-next:hover {
	color: var(--crdm-brand-gold);
}

#ui-datepicker-div.crdm-datepicker-popup th span {
	color: var(--crdm-text-label);
}

#ui-datepicker-div.crdm-datepicker-popup td .ui-state-default,
#ui-datepicker-div.crdm-datepicker-popup .ui-datepicker-calendar .ui-state-default {
	color: var(--crdm-text-value);
}

/* Today gets an inset outline without shifting the calendar cells. */
#ui-datepicker-div.crdm-datepicker-popup td.ui-datepicker-today .ui-state-default {
	box-shadow: inset 0 0 0 1px var(--crdm-brand-gold);
}

#ui-datepicker-div.crdm-datepicker-popup td .ui-state-hover,
#ui-datepicker-div.crdm-datepicker-popup td a:focus-visible {
	color: var(--crdm-text-on-accent) !important;
	background: var(--crdm-info) !important;
}

#ui-datepicker-div.crdm-datepicker-popup td .ui-state-active,
#ui-datepicker-div.crdm-datepicker-popup .ui-datepicker-calendar .ui-state-active {
	color: var(--crdm-text-on-accent) !important;
	background: var(--crdm-brand-gold) !important;
}

/* Keep today's outline visible when today is also the selected date. */
#ui-datepicker-div.crdm-datepicker-popup td.ui-datepicker-today .ui-state-active {
	box-shadow: inset 0 0 0 1px var(--crdm-text-on-accent);
}

#ui-datepicker-div.crdm-datepicker-popup select.ui-datepicker-month,
#ui-datepicker-div.crdm-datepicker-popup select.ui-datepicker-year {
	color: var(--crdm-text-value);
	background: var(--crdm-surface-control);
	border: 1px solid var(--crdm-border-strong);
	border-radius: var(--crdm-radius-sm);
	font-family: var(--crdm-font-ui);
}

#ui-datepicker-div.crdm-datepicker-popup select option {
	color: var(--crdm-text-value);
	background: var(--crdm-surface-control);
	font-family: var(--crdm-font-ui);
}

/******************************************************************************
 * Timepicker
 ******************************************************************************/

#ui-datepicker-div.crdm-timepicker-popup .ui-timepicker-div {
	color: var(--crdm-text);
	background: transparent;
	border-top-color: var(--crdm-border);
	box-shadow: none;
}

#ui-datepicker-div.crdm-timepicker-popup .ui_tpicker_time_label,
#ui-datepicker-div.crdm-timepicker-popup .ui-timepicker-div dt,
#ui-datepicker-div.crdm-timepicker-popup .ui-tpicker-grid-label td {
	color: var(--crdm-text-label);
}

#ui-datepicker-div.crdm-timepicker-popup .ui_tpicker_time,
#ui-datepicker-div.crdm-timepicker-popup .ui-timepicker-div .ui-datepicker-title {
	color: var(--crdm-text-value);
}

#ui-datepicker-div.crdm-timepicker-popup .ui-timepicker-div .ui-slider {
	background: var(--crdm-surface-control);
	border: 1px solid var(--crdm-border);
}

#ui-datepicker-div.crdm-timepicker-popup .ui-timepicker-div .ui-slider .ui-slider-handle {
	background: var(--crdm-brand-gold);
	border-color: var(--crdm-brand-tan);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

#ui-datepicker-div.crdm-timepicker-popup .ui-timepicker-div .ui-slider .ui-slider-handle:hover,
#ui-datepicker-div.crdm-timepicker-popup .ui-timepicker-div .ui-slider .ui-slider-handle:focus {
	background: var(--crdm-warning-light);
	box-shadow: 0 0 0 2px rgba(var(--crdm-warning-rgb), .18);
	outline: none;
}

#ui-datepicker-div.crdm-timepicker-popup .ui-timepicker-div select {
	color: var(--crdm-text-value);
	background: var(--crdm-surface-control);
	border-color: var(--crdm-border-strong);
}