@import "react-datepicker/dist/react-datepicker.css";

.ads-DatePicker-Popper {
  @apply z-max;
}

/* Header */
.ads-DatePicker-calendar--multi-month .react-datepicker__header {
  @apply hidden;
}

.ads-DatePicker-header {
  @apply items-center
    justify-between
    pl-4
    pr-3
    pt-2;
}

.ads-DatePicker-multi-month-header {
  @apply w-1/2
    px-2;
}

/* Month heading */
.ads-DatePicker-heading--multi-month {
  @apply ml-2
    my-2;
}

.ads-DatePicker-heading {
  @apply text-left;
}

/* Month buttons */
.ads-DatePicker-month-btns-wrapper {
  @apply gap-x-1;
}

.ads-DatePicker-multi-month-btn {
  @apply relative
    z-10
    mt-24;
}

/* Custom date calendars */
.ads-DateRangePicker-custom-date-calendars-wrapper {
  @apply p-2;
}

/* React date picker classes */
.react-datepicker {
  @apply border
    border-none
    font-sans
    rounded-sm
    overflow-hidden;
}

.react-datepicker__header {
  @apply bg-transparent
    p-0
    rounded-none
    border-none;
}

.react-datepicker__current-month {
  @apply text-left
    ml-2
    mb-6;
}

.react-datepicker__day-name {
  @apply font-medium
    uppercase;
}

.react-datepicker__week {
  @apply mb-px;
}

.react-datepicker__day,
.react-datepicker__day-name,
.react-datepicker__time-name {
  @apply text-gray-700
    text-iconSm
    leading-none
    m-0
    h-8
    w-8
    align-middle
    relative
    rounded-none;

  line-height: theme("height.8");
}

.ads-DatePicker-day-text {
  @apply rounded-full
    w-full
    inline-block
    relative
    z-20;
}

.react-datepicker__day:hover {
  @apply bg-transparent
  rounded-none;
}

.react-datepicker__day:hover .ads-DatePicker-day-text {
  @apply bg-gray-200;
}

.react-datepicker__day:focus {
  @apply outline-none;
}

.react-datepicker__day:focus .ads-DatePicker-day-text {
  @apply shadow-focus;
}

.react-datepicker__day--selected,
.react-datepicker__day--range-start,
.react-datepicker__day--range-end {
  @apply bg-transparent
    hover:bg-transparent;
}

.react-datepicker__day--in-range:not(.react-datepicker__day--range-start):not(.react-datepicker__day--range-end) {
  @apply bg-brandGreen-200
    bg-opacity-50;
}

.react-datepicker__day--selected .ads-DatePicker-day-text,
.react-datepicker__day--range-start .ads-DatePicker-day-text,
.react-datepicker__day--range-end .ads-DatePicker-day-text {
  @apply bg-brandGreen-400
    text-white;
}

.react-datepicker__day--range-start::before,
.react-datepicker__day--range-end::before,
.react-datepicker__day--in-selecting-range::before {
  content: "";
  @apply absolute
    top-0
    bottom-0
    z-10;

  width: 50%;
}

.react-datepicker__day--selecting-range-start:not(.react-datepicker__day--in-range)::before {
  @apply bg-gray-200;

  left: 50%;
}

.react-datepicker__day--selected:not(.react-datepicker__day--in-range).react-datepicker__day--selecting-range-start:hover::before {
  @apply bg-transparent;
}

.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range):not(.react-datepicker__day--selecting-range-start)::before {
  @apply bg-gray-200;

  left: 0;
}

.react-datepicker__day--selecting-range-end.react-datepicker__day--in-range:not(.react-datepicker__day--range-start):not(.react-datepicker__day--range-end):hover {
  @apply bg-brandGreen-200
    bg-opacity-50;
}

.react-datepicker__month--selecting-range .react-datepicker__day--in-range {
  @apply bg-transparent
    text-gray-700;
}

.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--selecting-range-start):not(.react-datepicker__day--selecting-range-end):not(.react-datepicker__day--in-range) {
  @apply bg-gray-200
    rounded-none
    hover:bg-transparent;
}

.react-datepicker__day--range-start.react-datepicker__day--in-selecting-range,
.react-datepicker__day--range-end.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--selecting-range-end),
.react-datepicker__day--disabled.react-datepicker__day--selected {
  @apply bg-gray-200;
}

.react-datepicker__day--range-start::before,
.react-datepicker__day--range-start:hover::before {
  @apply bg-brandGreen-200
    bg-opacity-50;

  left: 50%;
}

.react-datepicker__day--range-end::before {
  @apply bg-brandGreen-200
    bg-opacity-50;

  left: 0;
}

.react-datepicker__day--range-start.react-datepicker__day--range-end::before {
  @apply hidden;
}

.react-datepicker__day--disabled {
  @apply text-gray-500;
}

.react-datepicker__day--selected:hover .ads-DatePicker-day-text,
.react-datepicker__day--range-start:hover .ads-DatePicker-day-text,
.react-datepicker__day--range-end:hover .ads-DatePicker-day-text {
  @apply bg-brandGreen-500;
}

.react-datepicker__day--in-range:not(.react-datepicker__day--range-end):not(.react-datepicker__day--range-start):hover
  .ads-DatePicker-day-text {
  @apply bg-brandGreen-200
    bg-opacity-50;
}

.react-datepicker__day--outside-month::after {
  @apply absolute
    top-0
    bottom-0
    z-10
    w-full
    rounded-full;

  content: "";
  left: 0;
}

.react-datepicker__day--outside-month:not(.react-datepicker__day--disabled):not(.react-datepicker__day--in-range):hover::after {
  @apply bg-gray-200;
}

.react-datepicker__day--outside-month.react-datepicker__day--range-end::after {
  @apply bg-brandGreen-200;
}

.react-datepicker__day--disabled:hover,
.react-datepicker__day--disabled:hover .ads-DatePicker-day-text {
  @apply bg-transparent;
}

.react-datepicker__month {
  @apply m-2;
}