.fi-fo-date-time-picker {
    /* Prevent excessive date input height in WebKit */
    /* https://github.com/twbs/bootstrap/issues/34433 */
    & input::-webkit-datetime-edit {
        display: block;
        padding: 0;
    }

    & .fi-fo-date-time-picker-trigger {
        @apply w-full;
    }

    & .fi-fo-date-time-picker-display-text-input {
        @apply w-full border-none bg-transparent px-3 py-1.5 text-base text-gray-950 outline-hidden transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:var(--color-gray-500)] sm:text-sm sm:leading-6 dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:var(--color-gray-400)];
    }

    & .fi-fo-date-time-picker-panel {
        @apply absolute z-10 space-y-3 rounded-lg bg-white p-4 shadow-lg ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;

        & .fi-fo-date-time-picker-panel-header {
            @apply flex items-center justify-between;
        }
    }

    & .fi-fo-date-time-picker-month-select {
        @apply grow cursor-pointer border-none bg-transparent p-0 text-sm font-medium text-gray-950 focus:ring-0 dark:bg-gray-900 dark:text-white;
    }

    & .fi-fo-date-time-picker-year-input {
        @apply w-16 border-none bg-transparent p-0 text-right text-sm text-gray-950 focus:ring-0 dark:text-white;
    }

    & .fi-fo-date-time-picker-calendar-header {
        @apply grid grid-cols-7 gap-1;

        & .fi-fo-date-time-picker-calendar-header-day {
            @apply text-center text-xs font-medium text-gray-500 dark:text-gray-400;
        }
    }

    & .fi-fo-date-time-picker-calendar {
        @apply grid grid-cols-[repeat(7,minmax(--spacing(7),1fr))] gap-1;

        & .fi-fo-date-time-picker-calendar-day {
            @apply rounded-full text-center text-sm leading-loose transition duration-75;

            &.fi-disabled {
                @apply pointer-events-none opacity-50;
            }

            &:not(.fi-disabled) {
                @apply cursor-pointer;
            }

            &.fi-selected {
                @apply text-primary-600 dark:text-primary-400 bg-gray-50 dark:bg-white/5;
            }

            &.fi-focused:not(.fi-selected):not(.fi-disabled) {
                @apply bg-gray-50 dark:bg-white/5;
            }

            &.fi-fo-date-time-picker-calendar-day-today:not(.fi-focused):not(
                    .fi-selected
                ):not(.fi-disabled) {
                @apply text-primary-600 dark:text-primary-400;
            }

            &:not(.fi-fo-date-time-picker-calendar-day-today):not(
                    .fi-selected
                ) {
                @apply text-gray-950 dark:text-white;
            }
        }
    }

    & .fi-fo-date-time-picker-time-inputs {
        @apply flex items-center justify-center rtl:flex-row-reverse;

        & input {
            @apply me-1 w-10 border-none bg-transparent p-0 text-center text-sm text-gray-950 focus:ring-0 dark:text-white;
        }

        & .fi-fo-date-time-picker-time-input-separator {
            @apply text-sm font-medium text-gray-500 dark:text-gray-400;
        }
    }
}