/* app/assets/stylesheets/time_wheel.css
 *
 * Plain CSS — no framework required. If you use cssbundling/Tailwind, you can
 * keep this as a component layer or translate to utilities; the dynamic
 * per-row transform/colour is applied inline by the Stimulus controller.
 *
 * Theme it by overriding the custom properties on .time-wheel. */

.time-wheel {
  --item-h: 56px;          /* row height */
  --visible: 5;            /* rows shown (odd: centre + N above/below) */
  --tw-line: #e6e6e6;
  --tw-colon: #1c1c1e;

  display: block;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Using your design-system fonts instead? e.g.
     font-family: "DM Sans", sans-serif;  (keep tabular-nums on the slots) */
}

.time-wheel__picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  padding: 14px 26px;
}

.time-wheel__wheel {
  position: relative;
  width: 118px;
  height: calc(var(--item-h) * var(--visible));
  overflow: hidden;
  cursor: grab;
  outline: none;
  touch-action: none; /* gestures handled in JS */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 26%,
    #000 74%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 26%,
    #000 74%,
    transparent 100%
  );
}

.time-wheel__wheel.is-grabbing {
  cursor: grabbing;
}

.time-wheel__wheel:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(28, 28, 30, 0.2);
  border-radius: 12px;
}

/* the two lines framing the centre row */
.time-wheel__wheel::before,
.time-wheel__wheel::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  height: 1px;
  background: var(--tw-line);
  z-index: 2;
  pointer-events: none;
}
.time-wheel__wheel::before {
  top: calc(50% - var(--item-h) / 2);
}
.time-wheel__wheel::after {
  top: calc(50% + var(--item-h) / 2);
}

.time-wheel__colon {
  font-size: 38px;
  font-weight: 600;
  line-height: 1;
  color: var(--tw-colon);
  transform: translateY(-2px);
  padding: 0 2px;
}

/* one row. Base layout only; transform/colour/opacity/weight set inline. */
.time-wheel__slot {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--item-h);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  transform-origin: center center;
  will-change: transform;
  pointer-events: none;
}