/**
 * @file
 * Cover Flow style picker (− 1 2 [3] 4 5 +) and total for the lottery order form.
 *
 * Colours follow the still theme: $color-secondary (#928abb) for the
 * selected value, $color-primary (#cadbda) for the neighbours.
 */

.lottery-stepper {
  --lottery-selected: #928abb;
  --lottery-neighbour: #cadbda;
  --lottery-tile: 6rem;
  --lottery-tile-small: 3.75rem;
  --lottery-tile-far: 2.75rem;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  /* The theme's control wrapper is a flex row; auto margins centre us in it. */
  margin-inline: auto;
  /* Room for the reflection below the tiles. */
  padding-bottom: 1.25rem;
}

.lottery-stepper__track {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  perspective: 500px;
  touch-action: pan-y;
  user-select: none;
}

/* Shared tile look for the selected value and its neighbours. */
.lottery-stepper input[type="number"],
.lottery-stepper__neighbour {
  border-radius: 8px;
  font-weight: bold;
  text-align: center;
  transform: var(--lottery-transform, none);
  transition: transform 0.2s ease, opacity 0.2s ease;
  -webkit-box-reflect: below 3px linear-gradient(transparent 55%, rgba(0, 0, 0, 0.18));
}

/* The current value: front-facing, largest tile in the middle. */
.lottery-stepper input[type="number"] {
  position: relative;
  z-index: 2;
  flex: 0 0 var(--lottery-tile);
  width: var(--lottery-tile);
  height: var(--lottery-tile);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--lottery-selected);
  box-shadow: 0 6px 16px rgba(60, 50, 110, 0.25);
  color: #fff;
  font-size: 2.75rem;
  line-height: var(--lottery-tile);
  -moz-appearance: textfield;
}

.lottery-stepper input[type="number"]:focus {
  outline: 3px solid var(--lottery-neighbour);
  outline-offset: 2px;
}

.lottery-stepper input[type="number"]::-webkit-inner-spin-button,
.lottery-stepper input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Previous / next value: smaller tiles turned away, tucked behind the middle. */
.lottery-stepper__neighbour {
  position: relative;
  z-index: 1;
  flex: 0 0 var(--lottery-tile-small);
  width: var(--lottery-tile-small);
  height: var(--lottery-tile-small);
  padding: 0;
  border: 0;
  background: var(--lottery-neighbour);
  color: #4a4470;
  font-size: 1.1rem;
  opacity: 0.75;
}

.lottery-stepper__neighbour--prev {
  --lottery-transform: rotateY(50deg);
  margin-right: -0.6rem;
}

.lottery-stepper__neighbour--next {
  --lottery-transform: rotateY(-50deg);
  margin-left: -0.6rem;
}

.lottery-stepper__neighbour--far {
  z-index: 0;
  flex-basis: var(--lottery-tile-far);
  width: var(--lottery-tile-far);
  height: var(--lottery-tile-far);
  font-size: 0.9rem;
  opacity: 0.55;
}

.lottery-stepper__neighbour--prev.lottery-stepper__neighbour--far {
  --lottery-transform: rotateY(60deg);
}

.lottery-stepper__neighbour--next.lottery-stepper__neighbour--far {
  --lottery-transform: rotateY(-60deg);
}

.lottery-stepper__neighbour:hover {
  opacity: 1;
}

.lottery-stepper__neighbour.is-empty {
  visibility: hidden;
}

.lottery-stepper__button {
  flex: 0 0 auto;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 2px solid var(--lottery-selected);
  border-radius: 50%;
  background: transparent;
  color: var(--lottery-selected);
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1;
}

.lottery-stepper__button:hover:not(:disabled) {
  background: var(--lottery-selected);
  color: #fff;
}

.lottery-stepper__button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

@media (prefers-reduced-motion: no-preference) {
  .lottery-stepper.is-changing-up .lottery-stepper__track > * {
    animation: lottery-flow-up 0.22s ease-out;
  }

  .lottery-stepper.is-changing-down .lottery-stepper__track > * {
    animation: lottery-flow-down 0.22s ease-out;
  }
}

@keyframes lottery-flow-up {
  from {
    opacity: 0.4;
    transform: translateX(1.5rem) var(--lottery-transform, rotateY(0deg));
  }
}

@keyframes lottery-flow-down {
  from {
    opacity: 0.4;
    transform: translateX(-1.5rem) var(--lottery-transform, rotateY(0deg));
  }
}

/* Keep the whole row within a 320px viewport. */
@media (max-width: 24rem) {
  .lottery-stepper {
    --lottery-tile: 4.5rem;
    --lottery-tile-small: 2.75rem;
    --lottery-tile-far: 2rem;

    gap: 0.4rem;
  }
}

/* Centre the label, picker and total on the page. */
.lottery-ticket-picker {
  text-align: center;
}

.lottery-ticket-total {
  margin-top: 0.25rem;
  font-weight: bold;
}

.lottery-ticket-total:empty {
  display: none;
}

/* Block title ("Koop een lot") above the order form. */
.lottery-order-block__title {
  text-align: center;
}