styles.scss

@import "variables";

/*!
 * https://github.com/NateRadebaugh/react-datetime
 */

.rdtPicker {
  display: inline-block;
  min-width: 250px;
  background: $dropdown-bg;
  border: $dropdown-border-width solid $dropdown-border-color;
  border-radius: $dropdown-border-radius;
  color: $dropdown-color;
  font-size: $dropdown-font-size;

  &:not(.rdtStatic) {
    box-shadow: $dropdown-box-shadow;
    margin-top: $dropdown-spacer;
    margin-bottom: $dropdown-spacer;
  }

  .rdtTimeToggle {
    padding-top: $dropdown-item-padding-y;
    padding-bottom: $dropdown-item-padding-y;
    text-align: center;
  }

  table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
  }
  td,
  th {
    text-align: center;
    height: 30px;
  }
  td {
    cursor: pointer;
  }

  .rdtCounter .rdtBtn,
  .rdtYear,
  .rdtMonth,
  .rdtDay,
  .rdtHour,
  .rdtMinute,
  .rdtSecond,
  .rdtTimeToggle {
    color: $dropdown-link-color;

    &:hover {
      background: $dropdown-link-hover-bg;
      color: $dropdown-link-hover-color;
      cursor: pointer;
    }
  }

  .rdtOld,
  .rdtNew {
    color: rgba($dropdown-link-color, 0.3);
  }

  .rdtToday {
    position: relative;

    &:before {
      content: "";
      display: inline-block;
      border-left: 7px solid transparent;
      border-bottom: 7px solid $dropdown-link-active-bg;
      position: absolute;
      bottom: 4px;
      right: 4px;
    }
  }

  th {
    border-bottom: $dropdown-border-width solid $dropdown-divider-bg;
  }
  .dow {
    width: 14.2857%;
    border-bottom: none;
    cursor: default;
  }

  .rdtPrev,
  .rdtSwitch,
  .rdtNext {
    padding-top: $dropdown-item-padding-y;
    padding-bottom: $dropdown-item-padding-y;
    color: $dropdown-link-color;
  }

  .rdtNext,
  .rdtPrev {
    width: 36px;
    font-size: $font-size-lg;
    vertical-align: top;
  }

  .rdtCounter .rdtBtn {
    display: block;
    user-select: none;
  }

  th.rdtDisabled,
  th.rdtDisabled:hover {
    background: none;
    color: $dropdown-link-disabled-color;
    cursor: not-allowed;
  }
  thead tr:first-child th {
    cursor: pointer;
  }
  thead tr:first-child th:hover {
    background: $dropdown-link-hover-bg;
  }

  .rdtTimeToggle {
    border-top: $dropdown-border-width solid $dropdown-divider-bg;
  }

  button {
    border: none;
    background: none;
    cursor: pointer;

    &:hover {
      background-color: $dropdown-link-hover-bg;
    }
  }

  thead button {
    width: 100%;
    height: 100%;
  }

  .rdtDays {
    min-width: 250px;
  }

  .rdtMonth,
  .rdtYear {
    height: 50px;
    width: 25%;
    cursor: pointer;

    &:hover {
      color: $dropdown-link-hover-color;
      background: $dropdown-link-hover-bg;
    }
  }

  .rdtActive {
    background-color: $dropdown-link-active-bg;
    color: $dropdown-link-active-color;
    border-radius: $dropdown-border-radius;

    &:hover {
      background-color: darken($dropdown-link-active-bg, 10%);
      color: $dropdown-link-active-color;
    }

    .rdtToday:before {
      border-bottom-color: $dropdown-link-active-color;
    }
  }

  .rdtDisabled,
  .rdtDisabled:hover {
    background: none;
    color: $dropdown-link-disabled-color;
    cursor: not-allowed;
  }

  .rdtDays {
    display: inline-block;
  }

  .rdtCounters {
    display: inline-block;

    & > div {
      float: left;
    }
  }

  .rdtCounter {
    width: 40px;

    .rdtBtn {
      line-height: 40px;
      cursor: pointer;

      &:hover {
        background: $dropdown-link-hover-bg;
      }
    }

    .rdtCount {
      line-height: 20px;
      font-size: $font-size-lg;
    }
  }

  .rdtCounterSeparator {
    line-height: 100px;
  }

  .rdtTime td {
    cursor: default;
  }
}