$background-grey: $lighter-grey;
$background-blue: $color-3;

// scss-lint:disable SelectorFormat

.flatpickr-calendar {
  border-radius: 0;

  // Disable animation
  &.animate.open {
    animation: none;
  }

  &.arrowBottom::after {
    border-top-color: $background-grey;
  }

  &.arrowTop::after {
    border-bottom-color: $background-blue;
  }

  .flatpickr-months .flatpickr-month {
    border-radius: 0;
  }

  .flatpickr-months .flatpickr-month,
  .flatpickr-current-month .flatpickr-monthDropdown-months {
    background: $background-blue;
  }

  .flatpickr-weekdays {
    background: $background-blue;

    .flatpickr-weekday {
      background: $background-blue;
      color: white;
    }
  }

  .flatpickr-day.selected,
  .flatpickr-day.startRange,
  .flatpickr-day.endRange,
  .flatpickr-day.selected.inRange,
  .flatpickr-day.startRange.inRange,
  .flatpickr-day.endRange.inRange,
  .flatpickr-day.selected:focus,
  .flatpickr-day.startRange:focus,
  .flatpickr-day.endRange:focus,
  .flatpickr-day.selected:hover,
  .flatpickr-day.startRange:hover,
  .flatpickr-day.endRange:hover,
  .flatpickr-day.selected.prevMonthDay,
  .flatpickr-day.startRange.prevMonthDay,
  .flatpickr-day.endRange.prevMonthDay,
  .flatpickr-day.selected.nextMonthDay,
  .flatpickr-day.startRange.nextMonthDay,
  .flatpickr-day.endRange.nextMonthDay {
    background: $background-blue;
    border-color: $background-blue;
  }
}

// scss-lint:enable SelectorFormat

// customization for shortcut-buttons
.shortcut-buttons-flatpickr-wrapper > .shortcut-buttons-flatpickr-buttons {
  justify-content: space-between;
  flex-grow: 1;
}

// material-ui colors customization ("~flatpickr/dist/themes/material_blue")
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
  box-shadow: -10px 0 0 #e2e2e2;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months #admin-menu ul li.selected a.flatpickr-prev-month svg,
#admin-menu ul li.selected .flatpickr-months a.flatpickr-prev-month svg,
.flatpickr-months #sub-menu ul li.selected a.flatpickr-prev-month svg,
#sub-menu ul li.selected .flatpickr-months a.flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month:hover svg,
.flatpickr-months #admin-menu ul li.selected a.flatpickr-next-month svg,
#admin-menu ul li.selected .flatpickr-months a.flatpickr-next-month svg,
.flatpickr-months #sub-menu ul li.selected a.flatpickr-next-month svg,
#sub-menu ul li.selected .flatpickr-months a.flatpickr-next-month svg {
  fill: white;
}
