vuestic-ui/dist/es/VaTimePickerColumn.css

Vue 3 UI Framework

.va-time-picker-column {
  --va-time-picker-cell-height: 30px;
  --va-time-picker-column-gap-height: calc(var(--va-time-picker-cell-height) * 2);
  --va-time-picker-column-border-right: 1px solid var(--va-background-element);
  --va-time-picker-cell-width: 40px;
  --va-time-picker-cell-cursor: pointer;
  --va-time-picker-cell-active-background: var(--va-primary);
  --va-time-picker-cell-active-color: var(--va-primary);
  --va-time-picker-cell-background-color-hover: transparent;
  --va-time-picker-cell-active-background-opacity: 0.05;
  --va-time-picker-cell-active-background-opacity-hover: 0.1;
}
.va-time-picker-column {
  overflow-y: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  color: currentColor;
  height: 100%;
  border-right: var(--va-time-picker-column-border-right);
}
.va-time-picker-column::-webkit-scrollbar { /* WebKit */
  display: none;
}
.va-time-picker-column::before, .va-time-picker-column::after {
  content: "";
  display: block;
  height: var(--va-time-picker-column-gap-height);
  width: 100%;
}
.va-time-picker-column:last-child {
  border-right: 0;
}
.va-time-picker-column .va-time-picker-cell {
  height: var(--va-time-picker-cell-height);
  line-height: var(--va-time-picker-cell-height);
  width: var(--va-time-picker-cell-width);
  text-align: center;
  cursor: var(--va-time-picker-cell-cursor);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.va-time-picker-column .va-time-picker-cell--active {
  position: relative;
  color: var(--va-time-picker-cell-active-color);
  z-index: 0;
}
.va-time-picker-column .va-time-picker-cell--active::before {
  background: var(--va-time-picker-cell-active-background);
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  right: 0;
  content: "";
  z-index: -1;
  opacity: var(--va-time-picker-cell-active-background-opacity);
}
.va-time-picker-column .va-time-picker-cell:hover {
  background: var(--va-time-picker-cell-background-color-hover);
}
.va-time-picker-column:focus-visible {
  outline: none;
}
.va-time-picker-column:focus-visible .va-time-picker-cell--active {
  outline: 2px solid var(--va-focus) !important;
  border-radius: 4px;
  outline-offset: -2px;
}