/* Datepicker */
.ui-datepicker {
  @apply flex flex-col gap-2;
}

.ui-datepicker__control-wrapper {
  @apply relative;
}

.ui-datepicker--sm {
  @apply w-40;
}

.ui-datepicker--md {
  @apply w-45;
}

.ui-datepicker--sm.ui-datepicker--range {
  @apply w-60;
}

.ui-datepicker--md.ui-datepicker--range {
  @apply w-70;
}

/* Label */
.ui-datepicker__label {
  @apply flex items-end gap-1 text-gray-900;
}

.ui-datepicker__label--sm {
  @apply text-sm font-normal leading-5;
}

.ui-datepicker__label--md {
  @apply text-sm font-normal leading-5;
}

.ui-datepicker__required {
  @apply text-red-500;
}

/* Control (input container) */
.ui-datepicker__control {
  @apply flex w-full cursor-pointer items-center rounded-md border border-gray-200 bg-white;
}

.ui-datepicker__control--sm {
  @apply h-8 gap-1.5 px-3;
}

.ui-datepicker__control--md {
  @apply h-10 gap-2 px-4;
}

.ui-datepicker__control--error {
  @apply border-red-500;
}

.ui-datepicker__control--disabled {
  @apply cursor-not-allowed border-gray-200 bg-gray-50;
}

.ui-datepicker__control--focus {
  @apply border-indigo-500 ring-1 ring-inset ring-indigo-500;
}

/* Icon */
.ui-datepicker__icon {
  @apply flex shrink-0 items-center justify-center text-gray-400;
  line-height: 1;
}

.ui-datepicker__icon .icon {
  @apply flex items-center justify-center;
  line-height: 1;
}

.ui-datepicker__icon--sm {
  @apply size-3.5;
}

.ui-datepicker__icon--md {
  @apply size-4;
}

.ui-datepicker__control--disabled .ui-datepicker__icon {
  @apply text-gray-300;
}

/* Display value */
.ui-datepicker__display {
  @apply min-w-0 flex-1 select-none truncate;
}

.ui-datepicker__display--sm {
  @apply text-sm font-normal leading-5;
}

.ui-datepicker__display--md {
  @apply text-base font-normal leading-6;
}

.ui-datepicker__display--placeholder {
  @apply text-gray-400;
}

.ui-datepicker__display--filled {
  @apply text-gray-900;
}

.ui-datepicker__control--disabled .ui-datepicker__display {
  @apply text-gray-400;
}

/* Clear button (range mode) */
.ui-datepicker__clear {
  @apply flex shrink-0 cursor-pointer items-center justify-center text-gray-400 hover:text-gray-600;
}

.ui-datepicker__clear--sm {
  @apply size-3.5;
}

.ui-datepicker__clear--md {
  @apply size-4;
}

.ui-datepicker__clear--hidden {
  @apply hidden;
}

/* Helper / Error text */
.ui-datepicker__helper {
  @apply text-xs font-normal leading-4 text-gray-600;
}

.ui-datepicker__error-text {
  @apply text-xs font-normal leading-4 text-red-500;
}

/* Calendar popup */
.ui-datepicker__calendar {
  @apply absolute top-full z-50 mt-1 hidden flex-col gap-1 rounded-lg border border-gray-200 bg-white p-3;
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
}

.ui-datepicker__calendar--open {
  @apply flex;
}

.ui-datepicker__calendar--align-right {
  @apply left-auto right-0;
}

/* Calendar header */
.ui-datepicker__header {
  @apply flex w-full items-center justify-between pb-2;
}

.ui-datepicker__month-label {
  @apply text-sm font-bold leading-5 text-gray-900;
}

/* Weekday row */
.ui-datepicker__weekdays {
  @apply flex gap-0.5;
}

.ui-datepicker__weekday {
  @apply flex size-9 items-center justify-center text-xs font-normal leading-4 text-gray-400;
}

/* Day grid rows */
.ui-datepicker__week {
  @apply flex gap-0.5;
}

/* Day cells */
.ui-datepicker__day {
  @apply flex size-9 cursor-pointer items-center justify-center rounded-full text-xs font-normal leading-4 text-gray-900;
}

.ui-datepicker__day:hover {
  @apply bg-gray-100;
}

.ui-datepicker__day--other-month {
  @apply text-gray-400;
}

.ui-datepicker__day--today {
  @apply text-indigo-500;
}

.ui-datepicker__day--selected {
  @apply rounded-full bg-indigo-500 text-white;
}

.ui-datepicker__day--selected:hover {
  @apply bg-indigo-500;
}

.ui-datepicker__day--in-range {
  @apply rounded-none bg-indigo-50;
}

.ui-datepicker__day--in-range:hover {
  @apply bg-indigo-100;
}

.ui-datepicker__day--range-start,
.ui-datepicker__day--range-end {
  @apply relative text-white;
  isolation: isolate;
}

.ui-datepicker__day--range-start::before,
.ui-datepicker__day--range-end::before {
  content: "";
  @apply absolute inset-0 rounded-full bg-indigo-500;
  z-index: -1;
}

.ui-datepicker__day--range-start {
  background: linear-gradient(to right, transparent 50%, var(--color-indigo-50) 50%);
}

.ui-datepicker__day--range-end {
  background: linear-gradient(to left, transparent 50%, var(--color-indigo-50) 50%);
}

.ui-datepicker__day--range-start:hover::before,
.ui-datepicker__day--range-end:hover::before {
  @apply bg-indigo-700;
}

.ui-datepicker__day--range-start:hover,
.ui-datepicker__day--range-end:hover {
  background-color: transparent;
}