// datepicker plugin - https://github.com/chmln/flatpickr
@import "../../external/flatpickr";

.datepicker {
  // Overriding a vendored style sheet
  // scss-lint:disable SelectorFormat

  @mixin override-range-cell {
    background: $colour-grey-light;
    border-color: $colour-grey-light;
    border-radius: 0;
    color: #fff;
  }

  @mixin override-selected-cell {
    background-color: $colour-blue;
    border-color: $colour-blue;
    color: #fff;

    &:hover,
    &:focus {
      background-color: $colour-blue-dark;
      border-color: $colour-blue-dark;
    }
  }

  font-family: inherit;
  color: $color-font-default;
  font-size: $font-size-default;
  line-height: $font-line-height-default;

  .flatpickr-day {
    // vendored CSS
    // scss-lint:disable NestingDepth
    border-radius: 0;
    margin: 1px;
    color: $colour-blue;

    &.prevMonthDay,
    &.nextMonthDay {
      color: $colour-blue-light;

      &:hover {
        @include override-range-cell;
      }
    }

    &.inRange {
      @include override-range-cell;
      box-shadow: -5px 0 0 $colour-grey-light, 5px 0 0 $colour-grey-light;

      &.prevMonthDay,
      &.nextMonthDay {
        @include override-range-cell;

        &:hover,
        &:focus {
          @include override-range-cell;
        }
      }
    }

    &.startRange,
    &.endRange {
      border-radius: 0;

      &.prevMonthDay,
      &.nextMonthDay {
        @include override-selected-cell;
      }
    }

    &.disabled {
      color: scale-color($color-font-default, $lightness: 80%);
      text-decoration: line-through;

      &.prevMonthDay,
      &.nextMonthDay {
        color: scale-color($color-font-default, $lightness: 90%);
      }
    }
  }

  .selected,
  .endRange,
  .startRange {
    @include override-selected-cell;
  }

  .flatpickr-weekday {
    color: $colour-grey-dark;
  }

  .flatpickr-current-month {
    // because overriding vendored CSS
    // scss-lint:disable NestingDepth
    font-size: 1.285714em;
    padding-top: 0;

    .cur-month {
      font-weight: $font-weight-semibold;

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

    .cur-year:hover {
      cursor: text;
    }
  }

  .datepicker__highlight {
    // because overriding vendored CSS
    // scss-lint:disable NestingDepth
    background-color: $colour-blue-light;
    border-color: $colour-blue-light;
    color: #fff;

    &:hover {
      background-color: $colour-blue;
      border-color: $colour-blue;
    }

    &.prevMonthDay,
    &.nextMonthDay {
      background-color: #fff;
      border-color: #fff;

      &:hover {
        @include override-range-cell;
      }
    }
  }
}