@import '../../mixins/colors.scss';

:global {
  .react-datepicker {
    font-family: Nunito Sans, sans-serif !important;
    border: none !important;
  }

  .react-datepicker__day {
    cursor: pointer !important;
  }

  .react-datepicker__month-container {
    height: 280px !important;
    width: 245px !important;
  }

  .react-datepicker__header {
    background-color: chaser-color('White') !important;
    border-bottom: none !important;
  }

  .react-datepicker__day-name {
    font-size: 11px !important;
    text-transform: uppercase !important;
    color: chaser-color('Dark Neutral 1') !important;
  }

  .react-datepicker__day-names {
    display: inline-flex !important;
  }

  .react-datepicker__day {
    color: chaser-color('Dark Neutral 1') !important;
  }

  .react-datepicker__day--selected {
    color: white !important;
    border-radius: 100% !important;
    background-color: chaser-color('Dark Neutral 1') !important;
    
    &:hover {
      color: white !important;
      background-color: chaser-color('Mid Neutral 1') !important;
    }
  }

  .react-datepicker__day--in-range {
    background-color: chaser-color('Mid Neutral 3') !important;
    
    &:hover {
      background-color: chaser-color('Mid Neutral 2') !important;
    }
  }

  .react-datepicker__day--range-start {
    color: white !important;
    border-radius: 100% !important;
    background-color: chaser-color('Dark Neutral 1') !important;
  }

  .react-datepicker__day--in-selecting-range {
    color: white !important;
    background-color: chaser-color('Mid Neutral 3') !important;
  }

  .react-datepicker__day--keyboard-selected {
    background-color: transparent !important;
  }

  .react-datepicker__day--range-end {
    color: white !important;
    border-radius: 100% !important;
    background-color: chaser-color('Dark Neutral 1') !important;
    
    &:hover {
      color: white !important;
      background-color: chaser-color('Mid Neutral 1') !important;
    }
  }

  .react-datepicker__day--outside-month {
    color: chaser-color('Mid Neutral 2') !important;
  }

  .react-datepicker__day--disabled {
    color: chaser-color('Mid Neutral 3') !important;
    cursor: default !important;
  }
}

.datepicker {
  width: min-content;
}