/* Standalone wheel picker - minimal, themeable styling */
.np-wheel-picker {
  /* User-customizable */
  --np-wheel-item-height: 48px;
  --np-wheel-font-family: 'Geist Mono', monospace;
  --np-wheel-font-size: 1.25rem;
  --np-wheel-color: #e7edf2;
  --np-wheel-accent-color: #3edcff;
  --np-wheel-unit-color: #8e77b5;
  width: 100%;
}

.np-wheel-picker .np-wheel-container {
  position: relative;
  width: 100%;
  /* Base protections inherited from .picker-surface */
}

.np-wheel-picker .np-wheel-item {
  min-height: var(--np-wheel-item-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding-inline: 12px;
  font-family: var(--np-wheel-font-family);
  font-size: var(--np-wheel-font-size);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  color: var(--np-wheel-color);
  /* Hardcoded for consistency */
  transition: color 0.2s cubic-bezier(0.32, 0.94, 0.6, 1),
              transform 0.2s cubic-bezier(0.32, 0.94, 0.6, 1);
}

.np-wheel-picker .np-wheel-item-selected {
  font-weight: 600;
  color: var(--np-wheel-accent-color);
  transform: scale(1.04);
}

.np-wheel-picker .np-wheel-unit {
  font-size: 0.85rem;
  color: var(--np-wheel-unit-color);
}

@media (prefers-reduced-motion: reduce) {
  .np-wheel-picker .np-wheel-item {
    transition: none;
  }
  .np-wheel-picker .np-wheel-item-selected {
    transform: none;
  }
}