/* Custom styles for PickTime Component */

.pickTime .flatpickr-calendar {
    @apply mx-auto;
}

.pickTime .flatpickr-input {
    @apply hidden;
}

.pickTime .flatpickr-current-month span.cur-month:hover {
    @apply bg-transparent;
}

.pickTime .flatpickr-current-month input.cur-year {
    @apply pointer-events-none;
}

.pickTime .numInputWrapper:hover {
    @apply bg-transparent;
}

.pickTime .flatpickr-calendar.noCalendar {
    @apply w-full;
}

/* Calendar */

.flatpickr-calendar {
    @apply shadow-none;
}

.flatpickr-months .flatpickr-month {
    @apply mb-3;
}

.flatpickr-current-month {
    @apply text-gray-400 text-base;
}

.flatpickr-current-month span.cur-month {
    @apply font-normal;
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
    @apply rounded-md bg-indigo-500 border-indigo-500;
}

.flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus {
    @apply rounded-md bg-gray-200 border-gray-200;
}

.flatpickr-day.today {
    @apply rounded-md border-gray-200;
}

.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg {
    @apply text-indigo-500 fill-transparent;
}

.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg {
    @apply w-5 h-5;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-disabled, .flatpickr-months .flatpickr-next-month.flatpickr-disabled {
    @apply inline-block text-gray-200 cursor-default;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-disabled:hover svg, .flatpickr-months .flatpickr-next-month.flatpickr-disabled:hover svg {
    @apply text-gray-200;
}

.flatpickr-calendar:before, .flatpickr-calendar:after {
    display: none;
}

/* Time Picker */

.flatpickr-time {
    @apply max-h-[42px] overflow-visible;
}

.flatpickr-calendar.hasTime .flatpickr-time {
    @apply border-none h-[42px];
}

.flatpickr-time .numInputWrapper {
    @apply h-[42px] rounded-md bg-white border border-stone-600 rounded-md transition-colors ease-in-out duration-200;
}

.noCalendar .flatpickr-time .numInputWrapper {
    @apply flex-none;
}

.flatpickr-time .numInputWrapper:focus-within {
    @apply border-indigo-200 ring ring-indigo-200 ring-opacity-50;
}

.flatpickr-time.time24hr .numInputWrapper {
    @apply w-16;
}

.numInputWrapper span {
    @apply border-transparent;
}

.numInputWrapper span:hover {
    @apply bg-gray-200;
}

.flatpickr-time input {
    @apply border-transparent;
}

.flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover {
    @apply bg-transparent;
}

.flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus {
    @apply bg-transparent border-transparent ring-0 outline-none;
}

.flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm {
    @apply mx-1;
}