:host {
  --_height: var(--date-input-container-height-md);
  --_padding-inline: var(--date-input-container-padding-inline-md);
  --_gap: var(--date-input-container-gap-md);
  --_radius: var(--date-input-container-border-radius);
  --_border-width-default: var(--date-input-container-border-width-default);
  --_border-width-emphasized: var(--date-input-container-border-width-emphasized);
  --_focus-ring-width: var(--date-input-container-focus-ring-width);
  --_transition-duration: var(--date-input-container-transition-duration);
  --_transition-easing: var(--date-input-container-transition-timing-function);

  --_control-font-size: var(--date-input-control-font-size-md);
  --_control-line-height: var(--date-input-control-line-height-md);
  --_icon-size: var(--date-input-icon-size-md);

  --_bg: var(--date-input-default-background-default);
  --_text: var(--date-input-default-text-default);
  --_text-placeholder: var(--date-input-default-text-placeholder);
  --_border-color: var(--date-input-default-border-default);
  --_border-color-hover: var(--date-input-default-border-hover);
  --_border-color-focus: var(--date-input-default-border-focus);
  --_focus-ring-color: var(--date-input-default-focus-ring);

  display: flex;
  flex-direction: column;
  /* `relative` so the absolutely-positioned calendar popover anchors below the
     field instead of escaping to the document body. */
  position: relative;
  gap: var(--date-input-field-gap);
  inline-size: 100%;
  font-family: var(--date-input-control-font-family);
  color: var(--_text);
}

:host([size='lg']) {
  --_height: var(--date-input-container-height-lg);
  --_padding-inline: var(--date-input-container-padding-inline-lg);
  --_gap: var(--date-input-container-gap-lg);
  --_control-font-size: var(--date-input-control-font-size-lg);
  --_control-line-height: var(--date-input-control-line-height-lg);
  --_icon-size: var(--date-input-icon-size-lg);
}

:host(.variant-destructive) {
  --_border-color: var(--date-input-destructive-border-default);
  --_border-color-hover: var(--date-input-destructive-border-hover);
  --_border-color-focus: var(--date-input-destructive-border-focus);
  --_focus-ring-color: var(--date-input-destructive-focus-ring);
}

/* ---------- Label ---------- */

.label {
  display: flex;
  align-items: center;
  gap: var(--date-input-label-gap);
  font-family: var(--date-input-label-font-family);
  font-size: var(--date-input-label-font-size);
  line-height: var(--date-input-label-line-height);
  font-weight: var(--date-input-label-font-weight);
  color: var(--date-input-label-color-default);
  inline-size: 100%;
  min-inline-size: 0;
}

.label-text {
  display: block;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Figma draws the mandatory mark as the 12/asterisk icon (2975:10179). The
   label keeps its colour when the field is disabled (184:866). */
.required-mark {
  display: inline-flex;
  flex-shrink: 0;
  inline-size: var(--date-input-label-required-mark-size);
  block-size: var(--date-input-label-required-mark-size);
  color: var(--date-input-label-required-mark-color);
}

/* The mark (12px) sits below mud-icon's smallest `size` (16), so the icon's own
   box is overridden here; without it the 16px icon overflows the 12px mark. */
.required-mark mud-icon {
  inline-size: var(--date-input-label-required-mark-size);
  block-size: var(--date-input-label-required-mark-size);
}

:host(:not(.has-label)) .label {
  display: none;
}

/* ---------- Control row ---------- */

/* Figma strokes sit inside the frame without moving its content, while a CSS
   border adds to the padding — subtract it so content starts 16 / 12px in.
   `relative` anchors the calendar popover to the field, not to the helper
   text below it. */
.control {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--_gap);
  block-size: var(--_height);
  padding-inline: calc(var(--_padding-inline) - var(--_border-width-default));
  background-color: var(--_bg);
  border: var(--_border-width-default) solid var(--_border-color);
  border-radius: var(--_radius);
  transition:
    border-color var(--_transition-duration) var(--_transition-easing),
    box-shadow var(--_transition-duration) var(--_transition-easing),
    background-color var(--_transition-duration) var(--_transition-easing);
}

/* Emphasis ring overlay.
   The inset ring that stands in for Figma's 2px border lives on this pseudo
   element, not on `.control` itself: an autofilled `.native` paints an opaque
   `-webkit-box-shadow` fill over the control's own background and would clip
   the ring's top and bottom edges. The overlay paints after the native input,
   so the ring stays whole. It spans the padding box (`inset: 0`), whose radius
   is the control's minus the border it sits inside. */
.control::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: calc(var(--_radius) - var(--_border-width-default));
  pointer-events: none;
  /* Above `.native` (z-index 1), below the calendar popover (z-index 10). */
  z-index: 2;
  transition: box-shadow var(--_transition-duration) var(--_transition-easing);
}

:host(:not(.is-disabled):not(.is-focused):hover) .control {
  border-color: var(--_border-color-hover);
}

:host(:not(.is-disabled):not(.is-focused):hover) .control::after {
  box-shadow: inset 0 0 0 calc(var(--_border-width-emphasized) - var(--_border-width-default))
    var(--_border-color-hover);
}

:host(.is-focused:not(.is-disabled)) .control {
  border-color: var(--_border-color-focus);
  /* The outer focus ring is drawn outside the control, where the native input
     cannot reach it — it stays on `.control`. */
  box-shadow: 0 0 0 var(--spacing-4) var(--_focus-ring-color);
}

:host(.is-focused:not(.is-disabled)) .control::after {
  box-shadow: inset 0 0 0 calc(var(--_border-width-emphasized) - var(--_border-width-default))
    var(--_border-color-focus);
}

/* Disabled recolors the private vars rather than painting
   `.control` directly: `.native:-webkit-autofill` fills the control with
   `var(--_bg)` and tints text with `var(--_text)`, so a state that only
   overrode `.control` would be repainted with the enabled colors as soon as
   the browser autofilled the field. Driving the vars keeps every surface --
   control background, autofill fill and text -- on one source of truth. */
:host(.is-disabled) {
  --_bg: var(--date-input-default-background-disabled);
  --_text: var(--date-input-default-text-disabled);
}

:host(.is-disabled) .control {
  border-color: var(--date-input-default-border-disabled);
  cursor: not-allowed;
}

/* ---------- Field wrapper (native + ghost overlay) ---------- */

.field {
  position: relative;
  flex: 1 1 auto;
  min-inline-size: 0;
  block-size: 100%;
  display: flex;
  align-items: center;
}

/* ---------- Native input ---------- */

.native {
  flex: 1 1 auto;
  min-inline-size: 0;
  inline-size: 100%;
  block-size: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: var(--_control-font-size);
  line-height: var(--_control-line-height);
  font-weight: var(--date-input-control-font-weight);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  /* Caret blends the placeholder remnant pattern in focus; brand-blue caret to match Figma "|" marker */
  caret-color: var(--date-input-control-caret-color);
  /* Inherit ink color; ghost overlay below renders the placeholder remnant when not empty. */
  position: relative;
  z-index: 1;
}

/* Native placeholder carries the empty-state hint (format pattern or a custom
   placeholder). The richer ghost overlay below only renders WHILE typing
   (value non-empty + focused), so the two never paint at the same time. */
.native::placeholder {
  color: var(--_text-placeholder);
  opacity: 1;
}

.native:disabled {
  color: var(--date-input-default-text-disabled);
  cursor: not-allowed;
  -webkit-text-fill-color: var(--date-input-default-text-disabled);
  caret-color: transparent;
}

.native[readonly] {
  cursor: default;
}

.native:focus,
.native:focus-visible {
  outline: none;
}

.native:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 var(--spacing-120) var(--_bg) inset;
  -webkit-text-fill-color: var(--_text);
}

/* ---------- Ghost overlay: shows placeholder remnant aligned under the caret ----------
   When the user has typed `15/04/` the overlay shows the same `15/04/` in transparent
   then renders the remaining `YYYY` in the placeholder color, so the format pattern
   keeps guiding the eye while typing — matching the Figma "focus: month-populated"
   spec exactly. */

.ghost {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 0;
  font-family: inherit;
  font-size: var(--_control-font-size);
  line-height: var(--_control-line-height);
  font-weight: var(--date-input-control-font-weight);
  white-space: pre;
  overflow: hidden;
  color: var(--_text-placeholder);
}

.ghost-typed {
  /* The typed-portion span exists only to reserve horizontal space so
     `.ghost-remaining` stays anchored under the caret. Use `visibility: hidden`
     rather than `color: transparent` — the former still reserves layout while
     also excluding the box from axe's color-contrast checks (transparent text
     keeps tripping the `bgOverlap` heuristic via the native input above). */
  visibility: hidden;
}

.ghost-remaining {
  color: var(--_text-placeholder);
  /* Known limitation: axe's `color-contrast.bgOverlap` heuristic flags this
     span as Incomplete on every partial-typed value (e.g. user types "15/" →
     ghost-remaining shows "MM/YYYY"). The native `<input>` element above has a
     transparent fill but its bounding box covers the field, and axe gives up
     when one element overlaps another regardless of whether their paint pixels
     interfere. The ghost is aria-hidden and the same hint is exposed to AT via
     `aria-placeholder` on the native input — actual contrast (#757575 on white,
     ~4.54:1) meets WCAG 1.4.3 AA. Same pattern Material UI / Carbon use; same
     known false-positive. No CSS or DOM tweak can clear this without removing
     the ghost-overlay UX. */
}

:host(.is-disabled) .ghost-remaining {
  color: var(--date-input-default-text-disabled);
}

/* When the field is fully populated and not focused, the ghost is empty so it
   stays invisible behind the native value. */

/* ---------- Trailing calendar icon ---------- */

.trailing-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: var(--_icon-size);
  block-size: var(--_icon-size);
  color: var(--date-input-icon-color-default);
  /* Reset native button chrome — the icon stands on its own. */
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-radius: var(--border-radius-4);
}

.trailing-icon:disabled {
  cursor: not-allowed;
}

.trailing-icon:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 var(--focus-ring-width-inner) var(--focus-ring-color-inner),
    0 0 0 calc(var(--focus-ring-width-inner) + var(--focus-ring-width-outer)) var(--focus-ring-color-outer);
}

:host(.is-disabled) .trailing-icon {
  color: var(--date-input-icon-color-disabled);
}

/* ---------- Clear button (Figma "clearButton" — × on Focus / Filled) ----------
   Sits just before the calendar trigger; styled as a sibling of the trailing
   icon so the two trailing controls stay visually consistent. */

.clear-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: var(--date-input-clear-button-size);
  block-size: var(--date-input-clear-button-size);
  color: var(--date-input-clear-button-icon-color);
  appearance: none;
  background-color: var(--date-input-clear-button-background-default);
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-radius: var(--date-input-clear-button-border-radius);
  transition: background-color var(--_transition-duration) var(--_transition-easing);
}

.clear-button:hover {
  background-color: var(--date-input-clear-button-background-hover);
}

.clear-button:active {
  background-color: var(--date-input-clear-button-background-active);
}

.clear-button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 var(--focus-ring-width-inner) var(--focus-ring-color-inner),
    0 0 0 calc(var(--focus-ring-width-inner) + var(--focus-ring-width-outer)) var(--focus-ring-color-outer);
}

/* ---------- Calendar popover (mud-date-picker overlay) ---------- */

.picker-popover {
  position: absolute;
  /* Offsets are from the padding box: step past the border to the outer edge. */
  inset-block-start: calc(100% + var(--_border-width-default));
  inset-inline-start: calc(-1 * var(--_border-width-default));
  z-index: 10;
  /* Figma puts the calendar 8px under the field (Date Picker page, 470:32032). */
  margin-block-start: var(--date-input-popover-offset);
  display: block;
}

/* Mobile: the popover docks to the bottom of the viewport as a full-width
   bottom sheet (the picker itself renders its `breakpoint="mobile"` chrome). */
.picker-popover.is-mobile {
  position: fixed;
  inset-block-start: auto;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 1001;
  margin-block-start: 0;
}

/* Scrim behind the mobile bottom sheet. */
.picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: var(--color-background-alpha-overlay-dark);
}

/* ---------- Live region (screen readers only) ---------- */

.live-region {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Assistive (helper / error) ---------- */

.assistive {
  display: flex;
  align-items: flex-start;
  gap: var(--date-input-assistive-gap-default);
  font-family: var(--date-input-assistive-font-family);
  font-size: var(--date-input-assistive-font-size);
  line-height: var(--date-input-assistive-line-height);
  font-weight: var(--date-input-assistive-font-weight);
  color: var(--date-input-assistive-color-default);
  inline-size: 100%;
  min-inline-size: 0;
}

/* The helper slot stays in the tree while there is no helper, so content
   slotted into it still fires slotchange; it shows once moved into .assistive. */
.helper-slot {
  display: none;
}

.assistive-error {
  gap: var(--date-input-assistive-gap-error);
  color: var(--date-input-assistive-color-error);
}

.assistive-icon {
  flex-shrink: 0;
  inline-size: var(--date-input-assistive-icon-size);
  block-size: var(--date-input-assistive-icon-size);
  margin-block-start: 0;
}

.assistive-text {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  text-overflow: ellipsis;
}

/* ---------- prefers-reduced-motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .control,
  .control::after,
  .clear-button {
    transition: none;
  }
}