// Time Picker 
//
// Styling the Time Picker consists of the following: 
//
// 1. minor time values
//    .dijitTimePickerTick - set text color, size, background color of minor values
//    .dijitTimePickerTickHover - set hover style of minor time values
//    dijitTimePickerTickSelected - set selected style of minor time values
//
// 2. major time values - 1:00, 2:00, times on the hour 
//    set text color, size, background color, left/right margins for "zoom" affect
//    .dijitTimePickerMarkerHover - to set hover style of major time values
//    .dijitTimePickerMarkerSelected - set selected style of major time values
// 
// 3. up and down arrow buttons
//    .dijitTimePicker .dijitButtonNode - background-color, border
//    .dijitTimePicker .dijitUpArrowHover, .dijitTimePicker .dijitDownArrowHover - set background-color for hover state
//
//  Other classes provide the fundamental structure of the TimePicker and should not be modified. 
//
.#{$theme-name} {
  .dijitTimePickerPopup {
    @include calcite-box-shadow-dropdown;
  }
  .dijitTimePicker {
    font-size: $font-size-base;
    background-color: $dropdown-bg;
    border: 1px solid $dropdown-fallback-border; // fallback
    border: 1px solid $dropdown-border;
  }
  .dijitTimePickerItem {
    padding: 0;
    @include button-variant($btn-default-color, $btn-default-bg);
    &,
    &:hover,
    &:active,
    &:focus {
      color: $dropdown-link-color;
    }
    .dijitTimePickerItemInner {
      padding: $padding-base-vertical;
      line-height: $line-height-base;
    }
  }
  .dijitTimePickerMarker {
    // major value - 1:00, 2:00, times on the hour
    background-color: $timepicker-marker-bg;
    font-weight: bold;
    white-space: nowrap;
    border: 0 none;
  }
  .dijitTimePickerMarkerSelected,
  .dijitTimePickerTickSelected {
    &,
    &:hover,
    &:focus {
      @include button-variant-default-active;
      color: $dropdown-link-color;
    }
    &.dijitTimePickerTick {
      font-weight: normal;
    }
  }
}

