@import '../variables';
@import '../theme-colors';

// Date time picker
.bootstrap-datetimepicker-widget {
  direction: ltr !important;
  // clock icon
  .fa {
    &.fa-clock-o {
      font: normal normal 700 1.25rem 'Font Awesome 5 Free';
      padding-top: 1rem;

      &:before {
        content: '\f017';
      }
    }
  }

  // up down icon
  .timepicker-picker {
    .fa-chevron-up:hover {
      color: $brand-color;
    }

    .fa-chevron-down:hover {
      color: $brand-color;
    }
  }
}

[theme='dark'] {
  .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
    border-bottom-color: var(--default-card-bg);
  }

  .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background: var(--base-color);
  }

  .bootstrap-datetimepicker-widget table td.day:hover,
  .bootstrap-datetimepicker-widget table td.hour:hover,
  .bootstrap-datetimepicker-widget table td.minute:hover,
  .bootstrap-datetimepicker-widget table td.second:hover {
    background: var(--base-color);
  }

  .bootstrap-datetimepicker-widget table td.active,
  .bootstrap-datetimepicker-widget table td.active:hover {
    background: var(--base-color);
  }

  .bootstrap-datetimepicker-widget table td.disabled,
  .bootstrap-datetimepicker-widget table td.disabled:hover {
    background: none;
  }

  .bootstrap-datetimepicker-widget table td span:hover,
  .bootstrap-datetimepicker-widget table td i:hover {
    background: var(--base-color);
  }
}
