//todo need to account for year and week view and all that....
.uib-datepicker {
  * {
    border: 0;
    border-radius: $datepicker-border-radius;
  }

  &.well {
    padding: 0;
  }

  //sizing
  tbody .btn,
  th > button {
    height: $datepicker-row-height;
    width: 100%;
  }

  //if month view
  .uib-monthpicker td {
    height: $datepicker-row-height;
    width: 85px;
  }

  //if year view
  .uib-yearpicker td {
    width: 50px;
  }

  //colors

  //top header
  th > .btn-default {
    background-color: $wk-primary-blue;
    color: $wk-primary-white;
    font-size: 1em;

    //hover
    &:hover {
      background-color: $wk-primary-blue-tint1;
    }
  }

  //days of the week
  th > small[aria-label='Saturday'],
  th > small[aria-label='Sunday'] {
    color: $wk-primary-red;
  }

  //actual date buttons
  td > .btn-default {
    background-color: $wk-primary-white;
    color: $wk-primary-blue;

    //hover & active
    &:hover,
    &.active {
      background-color: $wk-primary-blue-tint3;
      color: $wk-primary-blue;
    }
  }
}