.flatpickr-calendar {
  --dtp-width: --spacing(77);
  --dtp-font-size: var(--text-sm);
  --dtp-color: var(--text-color-default);
  --dtp-shadow: var(--shadow-lg);
  --dtp-bg: var(--background-color-muted);
  --dtp-border-width: var(--border-width);
  --dtp-border-color: transparent;
  --dtp-border-radius: var(--radius-md);

  --dtp-disabled-opacity: 0.15;
  --dtp-muted-day-opacity: 0.3;

  --dtp-months-padding-x: --spacing(4);
  --dtp-months-padding-y: --spacing(3);
  --dtp-month-padding: --spacing(1);
  --dtp-month-font-size: var(--text-lg);
  --dtp-month-font-weight: var(--font-weight-semibold);

  --dtp-year-width: --spacing(17);
  --dtp-year-padding: --spacing(1);
  --dtp-year-font-size: var(--text-lg);
  --dtp-year-font-weight: var(--font-weight-semibold);
  --dtp-year-hover-bg: transparent;

  --dtp-months-btn-size: --spacing(8);
  --dtp-months-btn-icon-size: --spacing(3.5);
  --dtp-months-btn-color: var(--text-color-muted);
  --dtp-months-btn-radius: var(--radius-md);
  --dtp-months-btn-bg: transparent;

  --dtp-inner-padding: --spacing(4);
  --dtp-weekday-color: var(--text-color-default);
  --dtp-weekday-font-size: var(--text-xs);
  --dtp-weekday-font-weight: var(--font-weight-semibold);
  --dtp-weekday-bg: transparent;

  --dtp-day-size: --spacing(9);
  --dtp-day-color: var(--text-color-default);
  --dtp-day-font-size: var(--text-xs);
  --dtp-day-font-weight: var(--font-weight-semibold);
  --dtp-day-border-radius: var(--radius-md);
  --dtp-day-bg: transparent;
  --dtp-day-hover-bg: var(--background-color-highlight);
  --dtp-day-selected-color: var(--color-white);
  --dtp-day-selected-bg: var(--color-primary);
  --dtp-day-range-color: var(--text-color-default);
  --dtp-day-range-bg: var(--background-color-highlight);

  --dtp-today-color: var(--color-white);
  --dtp-today-bg: var(--color-primary);
  --dtp-today-hover-bg: --alpha(var(--color-primary) / 90%);

  --dtp-weeknday-color: var(--color-warning);

  --dtp-timepickr-height: --spacing(10);
  --dtp-timepickr-border-width: var(--border-width);
  --dtp-timepickr-border-color: var(--border-color-subtle);
  --dtp-timepickr-hover-bg: var(--background-color-subtle);
  --dtp-time-separator-color: var(--text-muted);

  --dtp-spinner-color: var(--border-color-emphasis);
  --dtp-spinner-width: --spacing(3.5);
  --dtp-spinner-arrow-size: --spacing(1);
  --dtp-spinner-border-width: var(--border-width);
  --dtp-spinner-border-color: var(--border-color-subtle);
  --dtp-spinner-active-bg: var(--background-color-muted);
  --dtp-spinner-bg: transparent;

  @apply absolute
  w-[var(--dtp-width)]
  text-[length:var(--dtp-font-size)]
  text-[var(--dtp-color)]
  text-center
  leading-6
  shadow-[var(--dtp-shadow)]
  bg-[var(--dtp-bg)]
  rounded-[var(--dtp-border-radius)]
  border-[length:var(--dtp-border-width)]
  border-[var(--dtp-border-color)]
  touch-manipulation
  overflow-hidden
  box-border
  opacity-0
  invisible
  hidden;

  &.hasWeeks {
    @apply w-auto!;
  }

  @variant dark {
    --dtp-border-color: var(--border-color-default);
  }

  .flatpickr-months {
    @apply px-[var(--dtp-months-padding-x)] 
    py-[var(--dtp-months-padding-y)] 
    flex items-center;

    .flatpickr-month {
      @apply flex-1
      select-none
      overflow-hidden;

      .flatpickr-current-month {
        @apply flex
        items-center
        justify-center
        text-center
        font-bold
        leading-none;

        .flatpickr-monthDropdown-months {
          @apply p-[var(--dtp-month-padding)]
          text-[length:var(--dtp-month-font-size)]
          font-[var(--dtp-month-font-weight)]
          cursor-pointer
          leading-6
          align-[initial]
          outline-none
          box-border
          appearance-none;
        }

        .numInputWrapper {
          @apply w-[var(--dtp-year-width)]
          inline-block
          bg-transparent;

          @variant dark {
            --dtp-spinner-border-color: var(--border-color-default);
          }

          input {
            &.cur-year {
              @apply p-[var(--dtp-year-padding)]
              text-[length:var(--dtp-year-font-size)]
              font-[var(--dtp-year-font-weight)]
              inline-block
              cursor-text
              align-[initial]
              bg-transparent
              box-border;

              &:focus {
                @apply outline-0;
              }

              &[disabled],
              &[disabled]:hover {
                @apply opacity-[var(--dtp-disabled-opacity)]
                pointer-events-none;
              }
            }
            &:hover {
              @apply bg-[var(--dtp-year-hover-bg)];
            }
          }
        }
      }
    }

    .flatpickr-prev-month,
    .flatpickr-next-month {
      @apply size-[var(--dtp-months-btn-size)]
      text-[var(--dtp-months-btn-color)]
      rounded-[var(--dtp-months-btn-radius)]
      bg-[var(--dtp-months-btn-bg)]
      flex 
      items-center 
      justify-center
      select-none
      cursor-pointer 
      transition
      duration-200
      z-3;

      svg {
        @apply fill-current
        size-[var(--dtp-months-btn-icon-size)];

        path {
          @apply fill-inherit transition-[fill] duration-100;
        }
      }
      &:hover {
        @apply text-default;
      }
      &.flatpickr-disabled {
        @apply opacity-[var(--dtp-disabled-opacity)] 
        pointer-events-none;
      }
    }
  }

  .flatpickr-innerContainer {
    @apply p-[var(--dtp-inner-padding)] 
    pt-0 
    flex 
    box-border 
    overflow-hidden;

    .flatpickr-weekwrapper {
      @apply pe-1.5 border-e border-default;
      .flatpickr-weekday {
        @apply py-2 text-center;
      }
      .flatpickr-weeks {
        @apply m-0 flex flex-col gap-0.5;
      }
    }

    .flatpickr-rContainer {
      @apply px-1.25 flex-1 inline-block box-border;

      .flatpickr-weekdays {
        @apply py-2
        text-center
        flex items-center
        w-full
        tracking-wide
        overflow-hidden;

        .flatpickr-weekdaycontainer {
          @apply flex-1 grid grid-cols-7 gap-0.5;
        }
      }

      .flatpickr-days {
        @apply overflow-hidden;

        .dayContainer {
          @apply w-full
          box-border
          grid grid-cols-7 gap-0.5
          opacity-100;
        }
      }
    }

    .flatpickr-weekday {
      @apply block
      text-center 
      text-[length:var(--dtp-weekday-font-size)]
      text-[var(--dtp-weekday-color)]
      font-[var(--dtp-weekday-font-weight)]
      leading-none
      cursor-default
      bg-[var(--dtp-weekday-bg)];
    }

    .flatpickr-day {
      @apply m-auto
      relative
      text-center 
      text-[var(--dtp-day-color)]
      font-[var(--dtp-day-font-weight)]
      size-[var(--dtp-day-size)]
      leading-[var(--dtp-day-size)]
      bg-[var(--dtp-day-bg)] 
      rounded-[var(--dtp-day-border-radius)]
      cursor-pointer
      inline-block
      box-border
      transition
      duration-200;

      &.today {
        @apply text-[var(--dtp-today-color)] 
        bg-[var(--dtp-today-bg)];

        &:hover {
          @apply bg-[var(--dtp-today-hover-bg)];
        }
      }
      &.inRange,
      &.prevMonthDay.inRange,
      &.nextMonthDay.inRange,
      &.today.inRange,
      &.prevMonthDay.today.inRange,
      &.nextMonthDay.today.inRange,
      &.prevMonthDay:hover,
      &.nextMonthDay:hover,
      &:focus,
      &.prevMonthDay:focus,
      &.nextMonthDay:focus {
        @apply cursor-pointer 
        text-[var(--dtp-day-range-color)]
        bg-[var(--dtp-day-range-bg)];
      }
      &.inRange,
      &.prevMonthDay.inRange,
      &.nextMonthDay.inRange {
        @apply opacity-100;
      }
      &.selected,
      &.startRange,
      &.endRange,
      &.selected.inRange,
      &.startRange.inRange,
      &.endRange.inRange,
      &.selected:focus,
      &.startRange:focus,
      &.endRange:focus,
      &.selected:hover,
      &.startRange:hover,
      &.endRange:hover,
      &.selected.prevMonthDay,
      &.startRange.prevMonthDay,
      &.endRange.prevMonthDay,
      &.selected.nextMonthDay,
      &.startRange.nextMonthDay,
      &.endRange.nextMonthDay {
        @apply text-[var(--dtp-day-selected-color)]
        bg-[var(--dtp-day-selected-bg)]
        opacity-100;
      }

      &.prevMonthDay,
      &.nextMonthDay,
      &.notAllowed,
      &.notAllowed.prevMonthDay,
      &.notAllowed.nextMonthDay {
        @apply opacity-[var(--dtp-muted-day-opacity)];
      }
      &.weekend-day {
        @apply text-[var(--dtp-weeknday-color)];
      }
      &.flatpickr-disabled,
      &.flatpickr-disabled:hover {
        @apply opacity-[var(--dtp-disabled-opacity)] 
        bg-transparent 
        cursor-not-allowed;
      }
      &:hover {
        @apply bg-[var(--dtp-day-hover-bg)];
      }
      &.hidden {
        @apply invisible;
      }
    }
  }

  .numInputWrapper {
    @apply relative h-auto bg-transparent;

    input,
    span {
      @apply inline-block;
    }
    input {
      @apply w-full;
    }
    span {
      @apply absolute
      right-0
      w-[var(--dtp-spinner-width)] h-1/2
      py-0 pr-1 pl-0.5
      leading-[50%]
      opacity-0
      cursor-pointer
      bg-[var(--dtp-spinner-bg)]
      border-[length:var(--dtp-spinner-border-width)]
      border-[var(--dtp-spinner-border-color)]
      box-border;

      &:active {
        @apply bg-[var(--dtp-spinner-active-bg)];
      }
      &::after {
        @apply absolute content-[''] block;
      }
      &.arrowUp {
        @apply top-0 border-b-0;

        &::after {
          @apply top-1/4 
          border-x-transparent 
          border-x-[length:var(--dtp-spinner-arrow-size)] 
          border-b-[length:var(--dtp-spinner-arrow-size)] 
          border-b-[var(--dtp-spinner-color)];
        }
      }
      &.arrowDown {
        @apply top-1/2;

        &::after {
          @apply top-2/5
          border-x-transparent
          border-x-[length:var(--dtp-spinner-arrow-size)]
          border-t-[length:var(--dtp-spinner-arrow-size)]
          border-t-[var(--dtp-spinner-color)];
        }
      }
      svg {
        @apply h-auto w-[inherit];

        path {
          @apply fill-current;
        }
      }
    }
    input::-ms-clear {
      @apply hidden;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      @apply m-0 hidden;
    }
    &:hover {
      span {
        @apply opacity-100;
      }
    }
  }

  /* modifiers */
  &.open,
  &.inline {
    @apply opacity-100 max-h-160 visible;
  }
  &.open {
    @apply inline-block z-99999;
  }
  &.animate.open {
    @apply animate-[fpFadeInDown_300ms_cubic-bezier(0.23,1,0.32,1)];
  }
  &.inline {
    @apply block relative top-0.5;
  }
  &.static {
    @apply absolute top-[calc(100%+2px)];
  }
  &.static.open {
    @apply block z-999;
  }
  &.hasTime {
    .flatpickr-time {
      @apply h-10 
      border-t-[length:var(--dtp-timepickr-border-width)] 
      border-[var(--dtp-timepickr-border-color)];

      @variant dark {
        --dtp-timepickr-border-color: var(--border-color-default);
      }
    }
  }
  &.noCalendar.hasTime {
    .flatpickr-time {
      @apply h-auto border-none;
    }
  }
  &:focus {
    @apply outline-0;
  }
}

.flatpickr-time {
  @apply text-center
  max-h-[var(--dtp-timepickr-height)]
  leading-[var(--dtp-timepickr-height)]
  outline-0
  flex
  box-border
  overflow-hidden;

  .numInputWrapper {
    @apply flex-1 
    w-2/5 
    h-[var(--dtp-timepickr-height)] 
    float-left;

    input {
      @apply relative
      text-center
      leading-[inherit]
      h-[inherit]
      bg-transparent
      box-border;

      &.flatpickr-hour {
        @apply font-bold;
      }
      &.flatpickr-minute,
      &.flatpickr-second {
        @apply font-normal;
      }
      &:focus {
        @apply outline-none;
      }
    }
  }

  .flatpickr-time-separator {
    @apply text-[var(--dtp-time-separator-color)]
    leading-[inherit]
    font-bold
    h-[inherit]
    w-1/50
    float-left
    self-center
    select-none;
  }
  .flatpickr-am-pm {
    @apply outline-none
    w-[18%]
    select-none
    cursor-pointer
    text-center
    font-normal;
  }
  &.hasSeconds {
    .numInputWrapper {
      @apply w-[26%];
    }
  }
  &.time24hr {
    .numInputWrapper {
      @apply w-[49%];
    }
  }
  input:hover,
  .flatpickr-am-pm:hover,
  input:focus,
  .flatpickr-am-pm:focus {
    @apply bg-[var(--dtp-timepickr-hover-bg)];
  }
}

@keyframes fpFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}