@import "tailwindcss";
@theme {
  --color-primary: #0a70d8;
  --color-sunday: var(--color-red-500);
}

.flatpickr-calendar {
  @apply px-4! py-2! rounded-2xl max-w-94 w-full!;

  &.inline {
    @apply w-full!;
  }

  .fp-sunday {
    @apply text-sunday!;

    &.prevMonthDay {
      @apply text-sunday/50!;
    }
  }

  .flatpickr-weekday {
    @apply text-gray-700!;
    &.fp-weekday-sunday {
      @apply text-sunday!;
    }
  }

  .dayContainer {
    @apply max-w-94! w-full!;
  }

  .flatpickr-innerContainer {
    @apply w-full!;
  }

  .flatpickr-rContainer {
    @apply w-full;
  }

  .flatpickr-days {
    @apply w-full!;
  }

  .flatpickr-day {
    @apply p-0! leading-none! max-w-none! flex! items-center! justify-center! border-0! relative! z-1 font-semibold! hover:bg-transparent!;
    @apply before:absolute before:size-7 before:rounded-full before:border before:border-transparent before:-z-1 hover:before:bg-primary hover:text-white!;

    &.today {
      @apply before:border-primary;
    }

    &.selected {
      @apply bg-transparent! before:border-primary before:bg-primary text-white!;
    }
  }

  .flatpickr-months {
    @apply py-3 flex gap-2 items-center;

    .flatpickr-month {
      @apply order-1 grow! text-start!;
    }

    .flatpickr-prev-month {
      @apply order-2 relative! shrink-0 p-0! size-8! border border-gray-300 inline-flex items-center justify-center rounded-full;
      &:hover {
        @apply bg-primary border-primary;
        svg {
          @apply fill-white!;
        }
      }
    }

    .flatpickr-next-month {
      @apply order-3 relative! shrink-0 p-0! size-8! border border-gray-300 inline-flex items-center justify-center rounded-full;
      &:hover {
        @apply bg-primary border-primary;
        svg {
          @apply fill-white!;
        }
      }
    }

    .flatpickr-current-month {
      @apply left-0 w-full ps-0 flex gap-2 items-center pt-0;

      .flatpickr-monthDropdown-months {
        @apply rounded-full hover:bg-gray-100;
      }

      .cur-year {
        @apply rounded-full hover:bg-gray-100;
      }
    }

    .cur-year,
    .flatpickr-monthDropdown-months {
      @apply font-semibold!;
    }
  }

  .inRange,
  .endRange,
  .startRange {
    @apply before:bg-primary/60 text-white! bg-transparent! shadow-none!;
  }
}