@mixin checked {
  background-color: $primary-color;
  color: $white;
  font-weight: bold;
  cursor: pointer;
}

@mixin td-disabled {
  color: $component-disabled-color;
  opacity: 1;
  cursor: not-allowed;
  &:hover {
    box-shadow: none;
  }
}

$time-picker-prefix: #{$prefix}-time-picker;
@mixin ne-timePicker {
  .#{$time-picker-prefix} {
    // &-input {
    //   width: 168px;
    // }
    &-tooltip {
      .ne-tooltip-content {
        padding: 0;
      }
    }
  }
  .#{$prefix}-time-panel-body {
    display: flex;
    overflow: hidden;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    width: $time-picker-width;
    height: map-get($sizes-map, medium) * 7;
    .#{$prefix}-time-panel-cell {
      overflow: hidden;
      width: 33%;
      &:hover {
        overflow-y: auto;
      }
      &:not(:last-child) {
        border-right: 1px solid $calendar-hr-color;
      }
      &-padding {
        width: 100%;
        height: map-get($sizes-map, medium) * 6;
      }
      .#{$prefix}-time-panel-item {
        width: 100%;
        height: map-get($sizes-map, medium);
        padding: 0 10px;
        border-radius: 0;
        cursor: pointer;
        &:hover,
        &:focus {
          font-weight: bold;
        }
        &-checked {
          @include checked;
        }
        &[disabled] {
          @include td-disabled;
        }
      }
    }
  }
}