wheel-number-picker,
.wheel-number-picker {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  column-gap: var(--wnp-arrow-gap, 8px);
  width: var(--wnp-width, 160px);
  user-select: none;
  touch-action: none;
  outline: none;
  font-family: var(--wnp-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  color: var(--wnp-color, #111);
}

.wheel-number-picker__window {
  position: relative;
  height: var(--wnp-height, calc(var(--wnp-item-height, 44px) * var(--wnp-visible-items, 5)));
  overflow: hidden;
  border-radius: var(--wnp-radius, 20px);
  background: var(
    --wnp-background,
    linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(255,255,255,0.4) 28%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.4) 72%, rgba(255,255,255,0.95))
  );
  border: var(--wnp-border, 1px solid #ddd);
  grid-column: 1;
  grid-row: 1;
}

.wheel-number-picker__list {
  will-change: transform;
}

.wheel-number-picker__item {
  box-sizing: border-box;
  height: var(--wnp-item-height, 44px);
  min-height: var(--wnp-item-height, 44px);
  display: grid;
  place-items: center;
  line-height: 1;
  font-size: var(--wnp-item-font-size, clamp(12px, calc(var(--wnp-item-height, 44px) * 0.5), 22px));
  color: var(--wnp-muted-color, #aaa);
  transition: color 120ms ease, font-size 120ms ease, opacity 120ms ease;
}

.wheel-number-picker__item--active {
  color: var(--wnp-active-color, var(--wnp-color, #111));
  line-height: 1;
  font-size: var(--wnp-active-font-size, clamp(16px, calc(var(--wnp-item-height, 44px) * 0.72), 34px));
  font-weight: var(--wnp-active-font-weight, 750);
}

.wheel-number-picker__highlight {
  position: absolute;
  left: var(--wnp-highlight-inset, 14px);
  right: var(--wnp-highlight-inset, 14px);
  top: 50%;
  height: var(--wnp-item-height, 44px);
  transform: translateY(-50%);
  border-top: var(--wnp-highlight-border, 1px solid #ddd);
  border-bottom: var(--wnp-highlight-border, 1px solid #ddd);
  pointer-events: none;
}

.wheel-number-picker__fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--wnp-fade, linear-gradient(to bottom, white 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, white 100%));
}

.wheel-number-picker__arrows {
  display: var(--wnp-arrows-display, none);
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  gap: var(--wnp-arrow-button-gap, 2px);
  width: var(--wnp-arrow-column-width, 24px);
}

.wheel-number-picker__arrow {
  width: var(--wnp-arrow-size, 20px);
  height: var(--wnp-arrow-size, 20px);
  display: grid;
  place-items: center;
  border: var(--wnp-arrow-border, 0);
  border-radius: var(--wnp-arrow-radius, 999px);
  background: var(--wnp-arrow-background, transparent);
  color: var(--wnp-arrow-color, var(--wnp-muted-color, #777));
  font: inherit;
  font-size: var(--wnp-arrow-font-size, 12px);
  line-height: 1;
  opacity: var(--wnp-arrow-opacity, 0.6);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  padding: 0;
}

.wheel-number-picker__arrow:hover {
  color: var(--wnp-arrow-hover-color, var(--wnp-active-color, var(--wnp-color, #111)));
  background: var(--wnp-arrow-hover-background, transparent);
  opacity: 1;
}

.wheel-number-picker__arrow:active {
  transform: scale(0.94);
}