@import '../../../styles/common.scss';

.calendar {
  @include boxSizing;

  width: 325px;
  border: none;

  /** Default Styles from the Calendar Library */
  &:global(.react-calendar) {
    max-width: 100%;
    background: white;
  }
  :global(.react-calendar--doubleView .react-calendar__viewContainer) {
    display: flex;
    margin: -0.5em;
  }
  :global(.react-calendar--doubleView .react-calendar__viewContainer) > * {
    width: 50%;
    margin: 0.5em;
  }
  &:global(.react-calendar),
  &:global(.react-calendar) *,
  &:global(.react-calendar) *:before,
  &:global(.react-calendar) *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  &:global(.react-calendar) button {
    margin: 0;
    border: 0;
    outline: none;
  }
  &:global(.react-calendar) button:enabled:hover {
    cursor: pointer;
  }
  :global(.react-calendar__navigation) button[disabled] {
    background-color: var(--datepicker-navigation-button-disabled-bg, $datepicker-navigation-button-disabled-bg);
  }
  :global(.react-calendar__month-view__weekdays) {
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    // font-size: 0.75em;
  }
  :global(.react-calendar__month-view__weekdays__weekday) {
    font-size: 18px;
    padding: 8px;
  }
  :global(.react-calendar__month-view__weekNumbers) {
    font-weight: bold;
  }
  :global(.react-calendar__month-view__weekNumbers .react-calendar__tile) {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75em;
    padding: calc(0.75em / 0.75) calc(0.5em / 0.75);
  }
  :global(.react-calendar__month-view__days__day--neighboringMonth) {
    color: var(--datepicker-neighbor-month-color, $datepicker-neighbor-month-color);
  }
  :global(.react-calendar__year-view) :global(.react-calendar__tile),
  :global(.react-calendar__decade-view) :global(.react-calendar__tile),
  :global(.react-calendar__century-view) :global(.react-calendar__tile) {
    padding: 2em 0.5em;
  }
  :global(.react-calendar__tile) {
    max-width: 100%;
    text-align: center;
    padding: 0.5em 0.5em;
    font-size: 16px;
    background: none;
  }
  :global(.react-calendar__tile):disabled {
    background-color: var(--datepicker-tile-disabled-bg, $datepicker-tile-disabled-bg);
  }
  :global(.react-calendar__tile):enabled:hover {
    background-color: var(--datepicker-tile-hover-bg, $datepicker-tile-hover-bg);
  }
  :global(.react-calendar__tile--hasActive) {
    background: var(--datepicker-tile-has-active-bg, $datepicker-tile-has-active-bg);
  }
  :global(.react-calendar__tile--hasActive):enabled:hover,
  :global(.react-calendar__tile--hasActive):enabled:focus {
    background: var(--datepicker-tile-has-active-hover-bg, $datepicker-tile-has-active-hover-bg);
  }
  :global(.react-calendar__tile--active) {
    background: var(--datepicker-tile-active-bg, $datepicker-tile-active-bg);
    color: white;
  }
  :global(.react-calendar__tile--active):enabled:hover,
  :global(.react-calendar__tile--active):enabled:focus {
    background: var(--datepicker-tile-active-hover-bg, $datepicker-tile-active-hover-bg);
  }
  :global(.react-calendar--selectRange) :global(.react-calendar__tile--hover) {
    background-color: var(--datepicker-select-range-hover-bg, $datepicker-select-range-hover-bg);
  }

  :global(.react-calendar__tile) {
    transition: background-color 0.15s ease-in-out 0s;

    color: var(--datepicker-tile-text-color, $datepicker-tile-text-color);

    * {
      color: var(--datepicker-tile-text-color, $datepicker-tile-text-color);
    }

    &:hover {
      background-color: var(
        --calendar-tile-active-hover,
        $calendar-tile-active-hover
      );
    }
  }

  :global(.react-calendar__navigation) {
    height: 40px;
    margin-bottom: 0;
    background-color: white;

    button:hover {
      background-color: var(
        --calendar-tile-active-hover,
        $calendar-tile-active-hover
      );
    }

    button,
    button * {
      background-color: unset;
      width: 40px;
      font-size: 20px;
      padding: 0;
      color: var(--calendar-tile-active, $calendar-tile-active);
      font-weight: bold;

      svg {
        height: 18px;

        * {
          stroke: var(
            --calendar-button-stroke-color,
            $calendar-button-stroke-color
          );
        }
      }
    }

    :global(.react-calendar__navigation__prev2-button),
    :global(.react-calendar__navigation__next2-button) {
      display: none;
    }
  }

  :global(.react-calendar__month-view__weekdays) {
    font-size: 20px;
    color: var(--calendar-title-color, $calendar-title-color);
    font-weight: bold;
    text-transform: none;
    height: 40px;

    * {
      text-decoration: unset;
    }
  }

  :global(.react-calendar__month-view__days) {
    height: 210px;
  }

  :global(.react-calendar__month-view__days__day--neighboringMonth) * {
    color: var(--datepicker-neighbor-month-light-color, $datepicker-neighbor-month-light-color);
  }

  :global(.react-calendar__tile--active),
  :global(.react-calendar__tile--hasActive),
  :global(.react-calendar__tile--active:enabled:focus) {
    background-color: var(--calendar-tile-active, $calendar-tile-active);
    color: white;

    * {
      color: white;
    }
  }
}
