/* Date Input Component */

/* Themed wrapper for native date and datetime-local inputs */

@layer components {
  /* ============================================
     WRAPPER
     ============================================ */
  .date-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  /* ============================================
     DATE INPUT OVERRIDES
     ============================================ */
  .date-input {
    /* Ensure the input doesn't grow too wide */
    width: auto;
    min-width: 10em;
  }

  /* Size variant: keep compact for toolbar usage */
  .date-input.input--sm {
    min-width: 8.5em;
    padding-inline: var(--space-3);
  }

  /* ============================================
     WEBKIT CALENDAR PICKER (Chrome, Safari, Edge)
     ============================================ */
  .date-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
  }

  .date-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
  }

  @media (prefers-color-scheme: dark) {
    .date-input::-webkit-calendar-picker-indicator {
      filter: invert(1);
    }
  }

  /* Style the date text segments */
  .date-input::-webkit-datetime-edit {
    padding: 0;
  }

  .date-input::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  /* ============================================
     ERROR STATE
     ============================================ */
  .date-input-wrapper--error .date-input {
    border-color: var(--danger);
  }

  .date-input-wrapper--error .date-input:focus {
    border-color: var(--danger);
    box-shadow: var(--shadow-focus-danger);
  }
}