/* Reusable date picker field.
 * Pairs with View/Elements/date_picker.ctp and /js/date-picker.js.
 * The calendar itself is themed via Cally's CSS parts and custom properties -
 * see https://wicky.nillia.ms/cally/guides/theming/ before extending this.
 */

.date-picker-field {
	position: relative;
}

/* The toggle is positioned against this wrapper, which contains only the
   input, so its placement does not depend on the label's line-height and the
   element drops into any form unchanged. */
.date-picker-control {
	display: block;
	position: relative;
}

.date-picker-control .date-picker-input {
	/* The input fills the wrapper so the toggle lands on the input's own right
	   edge rather than the grid cell's. Every caller so far passes a
	   full-width class (pure-input-1); this just makes it not optional. */
	width: 100%;
	box-sizing: border-box;
	/* Room for the toggle, so a long typed value never runs under it. */
	padding-right: 2.5rem;
}

.date-picker-toggle {
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: inherit;
}

.date-picker-toggle-icon {
	display: block;
	width: 100%;
	height: 100%;
}

/* Focus must stay visible on every control in the field and the calendar. */
.date-picker-toggle:focus-visible,
.date-picker-popover :focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.date-picker-field .form-hint {
	display: block;
	font-size: 0.8125rem;
	opacity: 0.75;
	margin-top: 0.25rem;
}

/* Deliberately NOT display:none when empty. A live region has to be present
   and rendered in the accessibility tree BEFORE its content changes, or screen
   readers routinely miss the announcement - hiding it until it has something
   to say defeats the point of it being live. An empty block-level div with no
   padding or border is already zero-height, so this costs nothing visually.
   (The site's `.pure-form input + .error-message` offset does not apply here:
   this container is not an adjacent sibling of the input.) */
.date-picker-field .error-message {
	margin: 0;
	padding: 0;
}

/* Browsers without the popover API ignore the attribute entirely, so they get
   no UA display:none and the calendar sits permanently on top of the form.
   Hide it ourselves. The :popover-open rule that follows is an invalid selector
   in exactly those browsers, so the whole rule is dropped there and the
   calendar stays hidden; where popover is supported it restores the open
   state. Author styles beat the UA sheet, so both rules are needed. */
.date-picker-popover {
	display: none;
}

.date-picker-popover:popover-open {
	display: block;
}

/* JS reaches the same conclusion and hides the trigger too. This also covers
   browsers too old to run date-picker.js at all. */
.date-picker-unsupported .date-picker-toggle,
.date-picker-unsupported .date-picker-popover {
	display: none;
}

/* No trigger, so no need to reserve room for one. */
.date-picker-unsupported .date-picker-input {
	padding-right: 0.5rem;
}

/* Popover lives in the top layer and is positioned from the viewport in JS,
   so reset the UA centring defaults. */
.date-picker-popover {
	position: absolute;
	margin: 0;
	padding: 0;
	inset: auto;
	border: 1px solid #ccc;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.date-picker-popover calendar-date {
	padding: 0.75rem;
}

/* Cally slots these into its month-nav buttons, which have no intrinsic size
   of their own for an SVG child. */
.date-picker-nav-icon {
	width: 1rem;
	height: 1rem;
}

/* Unavailable days must look unavailable, not only be announced as such.
   Part names verified against cally 0.9.2: day buttons carry the parts
   "button day day-N [selected|outside] [disallowed] [today]". Days outside
   min/max are not a part - they get the disabled attribute on the button.
   Cally's own shadow styles already drop these to opacity .5; the strike
   makes the distinction survive at low contrast. */
.date-picker-popover calendar-month::part(disallowed),
.date-picker-popover calendar-month::part(button):disabled {
	text-decoration: line-through;
	cursor: not-allowed;
}