@use 'theme-variables' as *;

@include export-module('timepicker-theme') {
  #{&}.sf-timepicker.sf-popup {
    border: $timepicker-list-border;
    border-radius: $timepicker-popup-border-radius;
    box-shadow: $timepicker-popup-shadow;
    overflow: hidden;
  }

  .sf-timepicker-list {
    background: $timepicker-list-bg-color;
  }

  .sf-timepicker-item {
    border: $timepicker-list-default-border-style;
    color: $timepicker-list-default-font-color;
    &:hover {
      background: $timepicker-list-hover-bg-color;
    }
    
    &:focus,
    &.sf-focus {
      background: $timepicker-list-focus-bg-color;
    }
    
    &:active {
      background: $timepicker-list-active-bg-color;
    }

    &.sf-active {
      background: $timepicker-list-selected-bg-color;
      color: $timepicker-list-selected-text-color;
    }
  }
}