.date-range-filter {
  .range-divider {
    color: $gray;
  }
}

#ui-datepicker-div {
  border-color: $color-3;
  border-radius: $border-radius;
  padding: 0;
  margin-top: 10px;
  width: auto;

  &:before {
    content: '';
    position: absolute;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid $color-3;
    top: 0px;
    margin-top: -10px;
    left: 25px;
    z-index: 1;
    display: block;
  }

  .ui-datepicker-header {
    padding: 0;
    background-image: none;
    background-color: $color-3;
    border: none;
    border-bottom: none;
    border-radius: 0;
    height: 32px;

    .ui-datepicker-prev, .ui-datepicker-next {
      border-radius: 0;
      top: 0;
      height: 32px;

      &:hover {
        border: none;
        background-image: none;
        background-color: $color-3;
        cursor: pointer;
      }

      .ui-icon {
        @extend .fa;

        background-image: none;
        text-indent: 0;
        color: $color-1;
        width: 13px;
        margin-left: -5px;

        &:hover {
          color: very-light($color-2, 25);
        }
      }
    }
    .ui-datepicker-prev {
      left: 0;

      .ui-icon {
        @extend .fa-arrow-left;
      }
    }

    .ui-datepicker-next {
      right: 0;

      .ui-icon {
        @extend .fa-arrow-right;
      }

      &:hover {
        .ui-icon {
          margin-left: -5px;
        }
      }
    }

    .ui-datepicker-title {
      color: $color-1;
      font-size: 85% !important;
      padding: 6px 10px;
    }
  }

  table.ui-datepicker-calendar {
    border: none;

    thead {
      th {
        border-bottom: 1px solid $color-border;
        border-right: 1px solid $color-border;
        color: $body-color;
        width: 33px;

        &:last-child {
          border-right: none;
        }
      }
    }
    tbody {
      tr:hover {
        td {
          background-color: transparent !important;
        }
      }
      &:last-child tr:last-child td {
        border-bottom: none;
      }
      td {
        a {
          border: 1px solid transparent;
          background-color: $color-1;
          background-image: none;
          font-size: 85%;
          color: $body-color;

          &.ui-state-active {
            background-color: $color-2;
            color: $color-1;
          }

          &:hover {
            background-color: $color-2;
            color: $color-1;
            border-color: darken($color-2, 5);

          }
        }

        &.ui-state-disabled {
          .ui-state-default {
            border: none;
            background-image: none;
            background-color: transparent;
          }
        }

        &.ui-datepicker-today {
          a {
            background-color: $color-6;
            color: $color-1;
            border: 1px solid darken($color-6, 5);
          }
        }
      }
    }
  }
}