@use 'theme-variables' as *;

@mixin timepicker-list-size($max-height, $item-height, $font-size) {
  min-width: $timepicker-popup-width;
  max-height: $max-height;
  font-size: $font-size;
  .sf-timepicker-item {
    height: $item-height;
    line-height: $item-height;
  }
}

@include export-module('timepicker-layout') {
  
  .sf-timepicker-list {
    overflow: auto;
    width: 100%;
    padding: 0;
    margin: 0;
    &.sf-ul {
      width: auto;
      border-radius: $timepicker-popup-border-radius;
    }
  }
  
  .sf-timepicker-list-sm {
    @include timepicker-list-size($timepicker-popup-height-sm, $timepicker-item-height-sm, $timepicker-font-size-sm);
  }
  
  .sf-timepicker-list-me {
    @include timepicker-list-size($timepicker-popup-height-me, $timepicker-item-height-me, $timepicker-font-size-me);
  }
  
  .sf-timepicker-list-la {
    @include timepicker-list-size($timepicker-popup-height-la, $timepicker-item-height-la, $timepicker-font-size-la);
    &.sf-ul {
      border-radius: $timepicker-popup-border-radius-la;
    }
  }

  .sf-timepicker-item {
    cursor: default;
    font-size: $timepicker-list-normal-font-size;
    font-weight: $timepicker-font-weight-style;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
    width: 100%;
    text-indent: $timepicker-default-text-indent;

    &:hover {
      cursor: pointer;
    }
  }
}

.sf-timepicker-mob {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: $timepicker-mobile-bg-color;

  .sf-ul {
    max-height: none;
    height: auto;
    padding: 0;
    margin: 0;
  }
}

.sf-timepicker-header {
  display: flex;
  align-items: center;
  width: 100%;
  gap: $timepicker-mobile-header-spacing;
  padding: $timepicker-modal-list-item-padding;
  background: $timepicker-mobile-header-color;
}

.sf-timepicker-title {
  font-size: $timepicker-font-size-me;
  color: $timepicker-mobile-text-color;
}