nextui-org--nextui/packages/styles/components/date-input-group.css

/* Date input group styles */
.date-input-group {
  @apply inline-flex h-9 items-center overflow-hidden rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none;
  border-width: var(--border-width-field);
  border-color: var(--field-border);

  /**
   * Transitions
   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
   */
  transition:
    background-color 150ms var(--ease-smooth),
    border-color 150ms var(--ease-smooth),
    box-shadow 150ms var(--ease-out);
  @apply motion-reduce:transition-none;

  /* Hover state */
  @media (hover: hover) {
    &:hover:not(:focus-within),
    &[data-hovered="true"]:not([data-focus-within="true"]) {
      @apply bg-field-hover;
      border-color: var(--field-border-hover);
    }
  }

  /* Focus within state */
  &[data-focus-within="true"]:not(
      :has(
        [data-slot="date-picker-trigger"]:focus,
        [data-slot="date-picker-trigger"][data-focused="true"],
        [data-slot="date-range-picker-trigger"]:focus,
        [data-slot="date-range-picker-trigger"][data-focused="true"]
      )
    ),
  &:focus-within:not(
      :has(
        [data-slot="date-picker-trigger"]:focus,
        [data-slot="date-picker-trigger"][data-focused="true"],
        [data-slot="date-range-picker-trigger"]:focus,
        [data-slot="date-range-picker-trigger"][data-focused="true"]
      )
    ) {
    @apply status-focused-field;
  }

  /* Invalid state */
  &[data-invalid="true"] {
    @apply status-invalid-field;
    background-color: var(--field-focus);
    border-color: var(--color-field-border-invalid);
  }

  /* Disabled state */
  &[data-disabled="true"],
  &[aria-disabled="true"] {
    @apply status-disabled;
  }
}

.date-input-group__input {
  @apply flex flex-1 cursor-text items-center gap-px rounded-none border-0 bg-transparent px-3 py-2 text-base shadow-none outline-none sm:text-sm;

  /* Remove border radius on left side when prefix is present */
  .date-input-group:has([data-slot="date-input-group-prefix"]) & {
    @apply rounded-l-none pl-2;
  }

  /* Remove border radius on right side when suffix is present */
  .date-input-group:has([data-slot="date-input-group-suffix"]) & {
    @apply rounded-r-none pr-2;
  }

  .date-input-group:has(.date-range-picker__range-separator) & {
    &[slot="start"] {
      @apply flex-none pr-0;
    }
    &[slot="end"] {
      @apply pl-0;
    }
  }

  /* Focus state - handled by group */
  &:focus,
  &:focus-visible {
    @apply outline-none;
  }
}

.date-input-group__input-container {
  @apply flex flex-1 items-center scrollbar-none;
  width: fit-content;
  overflow-x: auto;
  overflow-y: clip;
}

.date-input-group__segment {
  @apply inline-block rounded-md px-0.5 text-end text-nowrap outline-none;

  /* Segment separators styling "/" */
  &[data-type="literal"] {
    @apply p-0 text-muted;
  }

  /* Placeholder styling */
  &[data-placeholder="true"] {
    @apply text-field-placeholder;
  }

  /* Focused segment */
  &:focus,
  &[data-focused="true"] {
    @apply bg-accent-soft text-accent-soft-foreground;
  }

  /* Disabled segment */
  &[data-disabled="true"] {
    @apply opacity-50;
  }

  /* Invalid segment */
  &[data-invalid="true"] {
    @apply text-danger;

    /* Focused segment */
    &:focus,
    &[data-focused="true"] {
      @apply bg-danger-soft text-danger-soft-foreground;
    }
  }
}

.date-input-group__prefix {
  @apply pointer-events-none shrink-0 text-field-placeholder;
  @apply mr-0 ml-3 flex items-center;
}

.date-input-group__suffix {
  @apply pointer-events-none shrink-0 text-field-placeholder;
  @apply mr-3 flex items-center;
}

/* Variant property definitions */
.date-input-group--primary {
  /* Default styles */
}

.date-input-group--secondary {
  @apply shadow-none;
  background-color: var(--date-input-group-bg);

  --date-input-group-bg: var(--default);
  --date-input-group-bg-hover: var(--default-hover);
  --date-input-group-bg-focus: var(--default);

  @media (hover: hover) {
    &:hover:not(:focus-within),
    &[data-hovered="true"]:not([data-focus-within="true"]) {
      background-color: var(--date-input-group-bg-hover);
    }
  }

  &:focus-within,
  &[data-focus-within="true"] {
    background-color: var(--date-input-group-bg-focus);
  }

  /* Invalid state */
  &[data-invalid="true"] {
    @apply status-invalid-field;
    border-color: var(--color-field-border-invalid);
    background-color: var(--date-input-group-bg-focus);
  }

  [data-slot="date-input-group-input"] {
    @apply bg-transparent;
  }
}

/* Full width modifier */
.date-input-group--full-width {
  @apply w-full;
}