@import url("https://esm.sh/flatpickr@4.6.13/dist/flatpickr.min.css");

@layer components {

  .flatpickr-calendar {
    --calendar-size: 250px;
    --container-size: 220px;
    --day-size: var(--size-8);

    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--rounded-md);
    box-shadow: var(--shadow-md);
    font-size: var(--text-sm);
    inline-size: var(--calendar-size);

    .flatpickr-innerContainer {
      justify-content: center;
      padding-block-end: var(--size-3);
    }

    .flatpickr-days {
      inline-size: var(--container-size);
    }

    .dayContainer {
      inline-size: var(--container-size);
      max-inline-size: var(--container-size);
      min-inline-size: var(--container-size);
    }

    .dayContainer+.dayContainer {
      box-shadow: -1px 0 0 var(--color-border);
    }

    .flatpickr-months {
      .flatpickr-month {
        color: var(--color-text);
      }

      span.cur-month {
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
      }

      svg {
        fill: var(--color-border-dark);
      }

      .flatpickr-prev-month:hover svg {
        fill: var(--color-text);
      }

      .flatpickr-next-month:hover svg {
        fill: var(--color-text);
      }
    }

    .flatpickr-monthDropdown-months {
      appearance: none;
      border-radius: var(--rounded-md);
      font-size: var(--text-sm);
      font-weight: var(--font-medium);
      line-height: var(--leading-normal);
      padding: 0;
      text-align: center;

      &:hover {
        background: var(--color-border-light);
      }
    }

    .numInputWrapper {
      input {
        border-radius: var(--rounded-md);
        color: var(--color-text);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        line-height: var(--leading-normal);
        padding: 0;
        text-align: center;
      }

      span {
        border-color: var(--color-border);
      }

      span:hover {
        background: transparent;
      }

      span.arrowUp::after {
        border-bottom-color: var(--color-text);
      }

      span.arrowDown::after {
        border-top-color: var(--color-text);
      }

      &:hover {
        background: transparent;
      }
    }

    .flatpickr-weekday {
      color: var(--color-text-subtle);
      font-weight: var(--font-normal);
    }

    .flatpickr-time {
      .hasTime & {
        border-top-color: var(--color-border);
      }

      .hasTime.noCalendar & {
        border: 0;
      }

      .numInput {
        background: transparent;
        color: var(--color-text);
      }

      .flatpickr-time-separator {
        color: var(--color-text);
      }

      .flatpickr-am-pm {
        background: transparent;
        color: var(--color-text);
      }
    }

    .flatpickr-day {
      border-color: transparent !important;
      border-radius: var(--rounded-md);
      box-shadow: none !important;
      color: var(--color-text);
      height: var(--day-size);
      line-height: var(--day-size);
      margin-block-start: var(--size-2);
      max-width: var(--day-size);

      &:is(.inRange) {
        border-radius: 0;
      }

      &:is(.today, .inRange, :hover, :focus) {
        background: var(--color-border-light);
        color: var(--color-text);
      }

      &:is(.flatpickr-disabled,
        .flatpickr-disabled:hover,
        .prevMonthDay,
        .nextMonthDay,
        .notAllowed,
        .notAllowed.prevMonthDay,
        .notAllowed.nextMonthDay) {
        color: var(--color-text-subtle);
      }

      &:is(.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) {
        background: var(--color-primary);
        color: var(--color-text-reversed);
      }
    }

    &::before,
    &::after {
      display: none;
    }
  }
}