@layer components {
  [data-name="date-time-input"] {
    @apply input-element flex-row-2 items-center justify-between w-full px-3 h-element-md rounded-md;

    &:focus-within {
      box-shadow: var(--focus-box-shadow);
      border-color: var(--focus-border-color);
    }

    &[data-has-actions] {
      @apply pr-0.5;
    }
  }

  [data-name="date-time-field"] {
    @apply flex-row-0 items-center min-w-0 grow overflow-hidden;
  }

  [data-name="date-time-segment"] {
    @apply rounded-sm px-0.5 text-center tabular-nums cursor-text focus-style-none;

    &:focus {
      @apply bg-primary/15;
    }

    &[data-placeholder] {
      @apply text-placeholder;
    }
  }

  [data-name="date-time-separator"] {
    @apply px-px;
  }

  .date-time-input-dialog-popup {
    @apply flex-col-0 min-w-96;
    min-width: calc(min(100vw - 4 * var(--spacing), 96 * var(--spacing)));

    &[data-mode="dateTime"] {
      @apply tablet:min-w-180;
    }
  }

  .date-time-input-date-time-picker {
    &[data-mode="dateTime"] {
      @apply tablet:flex-row-6;
    }
  }

  .date-time-input-dialog {
    @apply p-2 h-full overflow-y-auto;
  }
}