/*------------------------------------------------------------
HEADER
====================================*/

@import '~flatpickr/dist/flatpickr.css';

/* Variables Custom - retrocompatibility */
$calendar-icon-color: $gray-500 !default;
$calendar-icon: url("data:image/svg+xml,%3Csvg fill='#{$calendar-icon-color}' version='1.1' viewBox='0 0 50 50' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M41,1h-2v5H11V1H9v5H1v14v29h48V20V6h-8V1z M47,47H3V20h44V47z M47,8v10H3V8h6v5h2V8h28v5h2V8H47z'/%3E%3C/svg%3E") !default;
$calendar-icon-width: 1.8rem !default;
$calendar-icon-height: $calendar-icon-width !default;

$calendar-border: $input-focus-width solid $input-focus-border-color !default;
$calendar-border-radius: $border-radius !default;
$calendar-box-shadow: $input-focus-box-shadow !default;

$calendar-header-bg: $primary !default;
$calendar-header-color: $white !default;

$calendar-day-color: $dark !default;
$calendar-day-bg: transparent !default;
$calendar-day-border-color: transparent !default;
$calendar-day-hover-color: $dark !default;
$calendar-day-hover-bg: $light !default;
$calendar-day-hover-border-color: $light !default;

$calendar-today-color: $calendar-day-color !default;
$calendar-today-bg: transparent !default;
$calendar-today-border-color: $calendar-day-color !default;
$calendar-today-hover-color: $calendar-day-hover-color !default;
$calendar-today-hover-bg: $calendar-day-hover-bg !default;
$calendar-today-hover-border-color: $calendar-today-border-color !default;

$calendar-day-selected-bg: $primary !default;
$calendar-day-selected-color: $white !default;

$calendar-day-disabled-color: $gray-400 !default;
/***************************************/

// CALENDAR
.flatpickr-calendar {
  border: $calendar-border;
  border-radius: $calendar-border-radius;
  box-shadow: $calendar-box-shadow;

  &.arrowTop {
    &:before {
      border-bottom-color: rgba(72,72,72,0.2);
    }
    &:after {
      border-bottom-color: $calendar-header-bg;
    }
  }
  &.arrowBottom {
    &:before {
      border-top-color: rgba(72,72,72,0.2);
    }
    &:after {
      border-top-color: $calendar-header-bg;
    }
  }
}

// HEADER
.flatpickr-months {
  .flatpickr-month {
    background: $calendar-header-bg;
    color: $calendar-header-color;
    fill: $calendar-header-color;
  }
  .flatpickr-prev-month,
  .flatpickr-next-month {
    color: $calendar-header-color;
    fill: $calendar-header-color;

    &:hover {
      svg {
        fill: rgba($calendar-header-color, 0.5);
      }
    }
  }
}
.flatpickr-current-month {
  .flatpickr-monthDropdown-months {
    background: $calendar-header-bg;
  }
  .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background-color: $calendar-header-bg;
  }
}
.flatpickr-weekdays {
  background: $calendar-header-bg;
}
span.flatpickr-weekday {
  background: $calendar-header-bg;
  color: rgba($calendar-header-color,0.54);
}

// DAYS
.flatpickr-day,
.flatpickr-day.inRange {
  color: $calendar-day-color;
  background: $calendar-day-bg;
  border-color: $calendar-day-border-color;

  // Hover
  &:hover, &:focus {
    color: $calendar-day-hover-color;
    background: $calendar-day-hover-bg;
    border-color: $calendar-day-hover-border-color;
  }

  // Today
  &.today {
    color: $calendar-today-color;
    background: $calendar-today-bg;
    border-color: $calendar-today-border-color;

    &:hover, &:focus {
      color: $calendar-today-hover-color;
      background: $calendar-today-hover-bg;
      border-color: $calendar-today-hover-border-color;
    }

    &.flatpickr-disabled, &.flatpickr-disabled:hover {
      border-color: $calendar-day-disabled-color;
    }
  }

  // Selected
  &.selected, &.selected:hover, &.selected:focus,
  &.startRange, &.startRange:focus, &.startRange:hover,
  &.endRange, &.endRange:focus, &.endRange:hover {
    color: $calendar-day-selected-color;
    background: $calendar-day-selected-bg;
    border-color: $calendar-day-selected-bg;
  }

  // Disabled
  &.flatpickr-disabled,
  &.flatpickr-disabled:hover {
    color: $calendar-day-disabled-color;
    background: transparent;
    border-color: transparent;
  }
}

// INPUT
.flatpickr-input,
.flatpickr-input + .input {
  background-image: str_replace($calendar-icon, "#", "%23");
  background-position: center right calc(#{$input-height-inner} - 1rem - #{$calendar-icon-width});
  background-repeat: no-repeat;
  background-size: $calendar-icon-width $calendar-icon-height;
}
