/******************************************************************************
 * CRDM date control
 *
 * Opt-in enhancement for an existing date input and the shared replacement
 * for the retired .calIcon calendar button.
 ******************************************************************************/

.crdm-date-control {
	display: grid;
	width: 100%;
	min-width: 0;
	grid-template-columns: minmax(0, 1fr) 38px;
	align-items: center;
	gap: var(--crdm-space-2);
}

.crdm-date-control > input {
	min-width: 0;
}

/* Keep legacy mobile date-input widths outside the modern grid component. */
#ResSysForm .crdm-date-control > input.hasDatepicker.crdm-control,
#ResSysForm2 .crdm-date-control > input.hasDatepicker.crdm-control {
	width: 100% !important;
}

.crdm-date-control--compact {
	width: 150px;
	max-width: 100%;
}

.crdm-date-control.crdm-date-control--fit-input {
	width: max-content;
	max-width: 100%;
	grid-template-columns: auto 38px;
}

.crdm-date-control.is-empty .crdm-date-control__calendar {
	opacity: .5;
}

.crdm-date-control__calendar {
	display: grid;
	width: 28px;
	height: 28px;
	overflow: hidden;
	grid-template-rows: 12px 1fr;
	color: var(--crdm-page);
	background: var(--crdm-text-value);
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
	font-family: var(--crdm-font-ui);
	line-height: 1;
	transition: opacity var(--crdm-transition-fast);
}

.crdm-date-control__month {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--crdm-date-icon-month-text);
	background: var(--crdm-date-icon-month);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .025em;
}

.crdm-date-control__day {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
}