@import 'bootstrap/functions';
@import 'variables';
@import 'bootstrap/mixins';
@import 'adminlte/mixins';

.ui-timepicker-wrapper {
  // scss-docs-start dropdown-css-vars
  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
  --#{$prefix}dropdown-color: #{$dropdown-color};
  --#{$prefix}dropdown-bg: #{$dropdown-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
  // scss-docs-end dropdown-css-vars

	overflow-y: auto;
	max-height: 150px;
	width: auto;
	background: var(--#{$prefix}dropdown-bg);
	border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color);
	// -webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
	// -moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
	// box-shadow:0 5px 10px rgba(0,0,0,0.2);
	@include box-shadow(var(--#{$prefix}dropdown-box-shadow));
	outline: none;
	z-index: var(--#{$prefix}dropdown-zindex);
	margin: 0;
}

.ui-timepicker-wrapper .ui-timepicker-list li {
    padding-right: 20px;
}

.ui-timepicker-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ui-timepicker-duration {
	margin-left: 5px;
	color: #888;
}

.ui-timepicker-list:hover .ui-timepicker-duration {
	color: #888;
}

.ui-timepicker-list li { //***
	padding: 3px 0 3px 5px;
	cursor: pointer;
	white-space: nowrap;
	color: var(--#{$prefix}dropdown-color);
	list-style: none;
	margin: 0;
}

.ui-timepicker-list:hover .ui-timepicker-selected {
	background: var(--#{$prefix}dropdown-bg);
	color: var(--#{$prefix}dropdown-color);
}

li.ui-timepicker-selected,
.ui-timepicker-list li:hover,
.ui-timepicker-list .ui-timepicker-selected:hover {
	background: var(--#{$prefix}dropdown-link-active-bg);
	color: var(--#{$prefix}dropdown-link-active-color);
}

li.ui-timepicker-selected .ui-timepicker-duration,
.ui-timepicker-list li:hover .ui-timepicker-duration {
	color: #ccc;
}

.ui-timepicker-list li.ui-timepicker-disabled,
.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
	color: var(--#{$prefix}dropdown-link-disabled-color);
	cursor: default;
}

// .ui-timepicker-list li.ui-timepicker-disabled:hover,
// .ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
// 	background: #f2f2f2;
// }

@include dark-mode () {
	.ui-timepicker-wrapper {
		--#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
	}
}