/* ==========================================================================
   Niveus — Time picker
   --------------------------------------------------------------------------
     <div class="nv-timepicker nv-surface" data-nv-timepicker
          data-nv-value="09:30" data-nv-step="5" data-nv-format-toggle></div>

   Wheels, as on a phone: each column scrolls and snaps, and whatever sits in
   the lens across the middle is the value. Scrolling, snapping, momentum and
   touch are the browser's; niveus.js builds the columns, reads which row is
   centred, and exposes the value as data-nv-value and an `nv:time` event.

   The lens is the selection colour laid over the centre row, so it follows the
   brand. Rows fade towards the top and bottom with a mask rather than a
   coloured gradient, which keeps the fade right on any surface — solid, or
   Glaze with something moving behind it.

   The format is 24-hour unless told otherwise. With data-nv-format-toggle a
   24H / AM/PM switch sits under the wheels and adds an AM/PM wheel when chosen;
   the value stays 24-hour either way, so a form never has to know which the
   person used.

   Without niveus.js the element is empty. For a no-script fallback, use a
   native <input type="time" class="nv-input">.
   ========================================================================== */

.nv-timepicker {
  --_row: 2.25rem;
  --_rows: 5;

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nv-space-2);
  padding: var(--nv-space-2) var(--nv-space-3) var(--nv-space-3);
  border-radius: var(--nv-radius-xl);
  color: var(--nv-color-text-primary);
}

.nv-timepicker__wheels {
  position: relative;
  display: flex;
  gap: var(--nv-space-1);
}

/* The lens. It belongs to the wheels, not the picker, so the switch beneath
   them never moves the centre. */
.nv-timepicker__wheels::before {
  content: "";
  position: absolute;
  inset-inline: calc(var(--nv-space-2) * -1);
  inset-block-start: 50%;
  block-size: var(--_row);
  translate: 0 -50%;
  background-color: var(--nv-color-selection);
  border-radius: var(--nv-radius-md);
  box-shadow: var(--nv-highlight-top);
  pointer-events: none;
}

.nv-timepicker__column {
  position: relative;
  inline-size: 3.5rem;
  block-size: calc(var(--_row) * var(--_rows));
  margin: 0;
  padding: calc(var(--_row) * (var(--_rows) - 1) / 2) 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  mask-image: linear-gradient(
    transparent,
    currentcolor 28%,
    currentcolor 72%,
    transparent
  );
}

.nv-timepicker__column::-webkit-scrollbar {
  display: none;
}

.nv-timepicker__column:focus-visible {
  outline: none;
  border-radius: var(--nv-radius-md);
  box-shadow: var(--nv-focus-ring);
}

.nv-timepicker__option {
  display: grid;
  place-items: center;
  block-size: var(--_row);
  scroll-snap-align: center;
  color: var(--nv-color-text-tertiary);
  font: var(--nv-font-label);
  font-size: var(--nv-font-size-lg);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: var(--nv-transition-colors);
}

.nv-timepicker__option[aria-selected="true"] {
  color: var(--nv-color-text-primary);
  font-weight: var(--nv-font-weight-semibold);
}

/* 24H / AM/PM. A button group under the wheels; the pressed one is the format
   in use. 24-hour is the default, so it starts pressed. */
.nv-timepicker__format {
  align-self: center;
}

/* Pressed reads as pushed in: the format in use is a key held down. */
.nv-timepicker__format .nv-button[aria-pressed="true"] {
  background-color: var(--nv-color-accent-subtle);
  background-image: none;
  color: var(--nv-color-accent-text);
  box-shadow: var(--nv-elevation-inset-sm), var(--nv-ledge);
}

.nv-timepicker__separator {
  display: grid;
  place-items: center;
  align-self: center;
  color: var(--nv-color-text-tertiary);
  font: var(--nv-font-label);
  font-size: var(--nv-font-size-lg);
}