// This overrides some styling properties of the "Light" flatpickr theme
// sass-lint:disable force-element-nesting force-attribute-nesting force-pseudo-nesting no-vendor-prefixes no-important class-name-format

$vl-flatpickr-today: #f4f4f4;

.flatpickr-calendar {
  $vl-gray-shadow: rgba($vl-black, .3);
  background: $vl-white;
  border-radius: 0;
  box-shadow: 0 0 2.1rem 0 $vl-gray-shadow;

  &.arrowTop,
  &.arrowBottom {
    &::before,
    &::after {
      margin-left: -9px;
    }
  }

  &.arrowTop {
    &::before,
    &::after {
      border-bottom-color: $vl-white;
    }
  }

  &.arrowBottom {
    &::before,
    &::after {
      border-top-color: $vl-white;
    }
  }

  &::before,
  &::after {
    left: 20px;
  }

  &.rightMost {
    &::before,
    &::after {
      right: 20px;
    }
  }

  // sass-lint:disable no-vendor-prefixes force-attribute-nesting no-qualifying-elements
  .numInput[type="number"],
  input[type="number"] {
    -moz-appearance: textfield;

    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  }
  // sass-lint:enable no-vendor-prefixes force-attribute-nesting no-qualifying-elements
}

.flatpickr-innerContainer {
  border-bottom: 0;
}

.flatpickr-days {
  border: 0;
}

.flatpickr-day {
  font-size: 16px;
  line-height: 37px;
  height: 40px;

  &.today {
    border: 0;

    .flatpickr-calendar.mark-today & {
      &:not(.selected) {
        background: $vl-flatpickr-today;
      }
    }
  }

  &.flatpickr-disabled {
    opacity: 0.2;

    &:hover {
      background: transparent !important;
      font-weight: 400 !important;
      cursor: default;
    }
  }

  &.prevMonthDay,
  &.nextMonthDay {
    color: $vl-friar-gray;
  }

  &.selected { // reset all styles for theme
    &,
    &.prevMonthDay,
    &.nextMonthDay {
      background: 0;
      color: $vl-science-blue;
      border-color: transparent;
      font-weight: 500;

      &:hover,
      &:focus {
        background: $vl-accent-color;
        color: $vl-text-color;
        border-color: transparent;
      }
    }

    &.startRange,
    &.endRange {
      background: $vl-accent-color;
      border-color: $vl-accent-color;
      color: $vl-text-color;
    }
  }

  &.selected,
  &.startRange,
  &.endRange {
    background-color: $vl-accent-color;
    border-color: $vl-accent-color;

    &.prevMonthDay,
    &.nextMonthDay {
      background-color: $vl-accent-color;
      border-color: $vl-accent-color;
    }

    &.startRange {
      & + .endRange {
        box-shadow: -10px 0 0 $vl-accent-color;
      }
    }
  }

  &.inRange,
  &.nextMonthDay.inRange,
  &.prevMonthDay.inRange {
    background: $vl-athens-gray;
    box-shadow: -5px 0 0 $vl-athens-gray, 5px 0 0 $vl-athens-gray;
    border-color: $vl-athens-gray;
  }

  &.startRange,
  &.endRange {
    &.inRange {
      background: $vl-accent-color;
      border-color: $vl-accent-color;
      color: $vl-text-color;
    }
  }

  &:hover,
  &:focus { // reset all styles for theme
    color: $vl-curious-blue !important;
    background: $vl-athens-gray !important;
    border-color: transparent !important;
    font-weight: 500;
  }

  &.selected.startRange + .endRange:not(:nth-child(7n+1)),
  &.startRange.startRange + .endRange:not(:nth-child(7n+1)),
  &.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    box-shadow: -10px 0 0 $vl-athens-gray;
  }
}

.flatpickr-months {
  position: relative;

  .flatpickr-month {
    border-radius: 0;
    background: 0;
    border-bottom: 1px solid $vl-ghost;
    height: 45px;
  }
}

.flatpickr-weekdays {
  background: 0;

  span {
    &.flatpickr-weekday {
      background: 0;
      color: inherit;
      text-transform: uppercase;
    }
  }
}

.flatpickr-current-month {
  font-size: 120%;
  color: $vl-text-color;
  padding-top: 12px;

  .flatpickr-monthDropdown-months {
    appearance: none;
    border: none;
    border-radius: 0;
    font-size: $vl-base-font-size;
    font-weight: 500;
    font-family: $vl-base-font;
    color: $vl-action-color;
    text-decoration: underline;
    background: transparent;
  }

  span,
  input {
    &.cur-month,
    &.cur-year {
      font-weight: 500;
    }

    &.cur-year {
      color: $vl-science-blue;
      text-decoration: underline;
      appearance: none;
    }
  }

  input,
  select {
    &:hover,
    &:focus {
      text-decoration: none;
    }
  }
}

.flatpickr-prev-month,
.flatpickr-next-month {
  .flatpickr-months & {
    background: $vl-athens-gray;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    top: 50%;
    transform: translateY(-50%);

    svg {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      right: 0;
      margin: auto;
      fill: $vl-text-color;
      stroke: $vl-text-color;
      stroke-width: 2px;
      width: 10px;
      height: 10px;
    }

    &:hover,
    &:focus {
      background: $vl-action-color;

      svg {
        fill: $vl-white;
        stroke: $vl-white;
      }
    }
  }
}

.flatpickr-prev-month { // flatpickr theme override, avoiding !important
  &.flatpickr-prev-month {
    .flatpickr-months & {
      left: 1rem;
    }
  }
}

.flatpickr-next-month { // flatpickr theme override, avoiding !important
  &.flatpickr-next-month {
    .flatpickr-months & {
      right: 1rem;
    }
  }
}

.numInputWrapper {
  &:hover {
    background-color: transparent;
  }
}