// overrides react-datepicker/dist/react-datepicker.css

$date-picker-bg: $co-color__fg__back--low;
$date-picker-header-bg: $co-color__fg__back;
$date-picker-font-size: $co-font__size--small;
$date-picker-text-color: $co-color__fg__text;

@mixin o-date-picker-popper {
  .react-datepicker-popper[data-placement^='bottom'] {
    .react-datepicker__triangle,
    .react-datepicker__triangle::before {
      border-bottom-color: $date-picker-header-bg;
    }
  }

  .react-datepicker-popper[data-placement^='top'] {
    .react-datepicker__triangle,
    .react-datepicker__triangle::before {
      border-top-color: $date-picker-bg;
    }
  }

  .react-datepicker-wrapper,
  .react-datepicker__input-container {
    width: 100%;
  }
}

@mixin o-date-picker-calendar {
  border: 0;
  border-radius: 0;
  background-color: $date-picker-bg;
  box-shadow: $co-shadow--higher;
  color: $date-picker-text-color;
  font-family: inherit;
  font-size: $date-picker-font-size;

  * {
    border-radius: 0;
    color: $date-picker-text-color;
    font-family: inherit;
    font-size: $date-picker-font-size;
  }

  .react-datepicker {
    &__navigation {
      &--previous {
        border-right-color: $date-picker-text-color;
      }

      &--next {
        border-left-color: $date-picker-text-color;
      }
    }

    &__header {
      border: 0;
      background-color: $date-picker-header-bg;

      * {
        background-color: $date-picker-header-bg;
      }

      &__dropdown {
        margin-top: calc($co-margin / 3);

        select {
          padding: $co-component__spacing / 2;
          border: 0;
          background: $date-picker-bg;
        }
      }
    }

    &__day {
      border-radius: 0;

      &--today {
        background: $date-picker-header-bg;
      }

      &:hover,
      &--selected {
        border-radius: 0;
        background: $co-color__primary;
      }
    }

    &__day-name {
      margin-top: calc($co-margin / 3);
      color: $co-color__fg__text--lower;
      font-size: $co-font__size--xsmall;
    }
  }
}
