ws-date-picker {

  // This overrides the styles of 720kb's datepicker to match Wealthsimple's theme. It's purposely not in SCSS to help
  // see deltas from the original css and the overridden styles in case of future updates.
  $datepicker-month-year: 15px;

  datepicker select,
  datepicker select:focus,
  datepicker select:hover,
  .datepicker select,
  .datepicker select:focus,
  .datepicker select:hover,
  [datepicker] select,
  [datepicker] select:focus,
  [datepicker] select:hover {
    color: $color-white;
  }

  datepicker,
  .datepicker,
  [datepicker],
  ._720kb-datepicker-calendar-header,
  ._720kb-datepicker-calendar-body,
  ._720kb-datepicker-calendar-days-header,
  ._720kb-datepicker-calendar-years-pagination-pages {
    font-family: inherit;
    font-size: inherit;
  }

  ._720kb-datepicker-calendar {
    box-shadow: none;
    z-index: 4;
  }

  ._720kb-datepicker-calendar._720kb-datepicker-open {
    border: 1px solid #cfcfcf; // Color from Fabric
  }

  ._720kb-datepicker-calendar-header:nth-child(odd) {
    background: $color-white;
  }

  ._720kb-datepicker-calendar-header:nth-child(even) {
    background: $color-white;
  }

  ._720kb-datepicker-calendar-month {
    color: $color-black;
  }

  ._720kb-datepicker-calendar-days-header {
    background: $color-white;
  }

  ._720kb-datepicker-calendar-header-middle,
  ._720kb-datepicker-calendar-header a,
  ._720kb-datepicker-calendar-header a:hover,
  ._720kb-datepicker-calendar-month span {
    font-size: $datepicker-month-year;
  }

  ._720kb-datepicker-calendar-month span {
    margin-left: -7px;
    color: $color-black;
    font-weight: 300;
  }

  ._720kb-datepicker-calendar-days-header div,
  ._720kb-datepicker-calendar-day {
    font-size: 14px;
  }
}
