/* Amount field of the tip page */

/* Amount field: a white strip across the column, rounded, no lines; the digits in the middle with air above and below,
   the currency sign at the right edge. The sides share the free space (flex 1 1 0), the right one never narrower than the sign
   (its min-content): a number too long for the middle moves left and stops at the sign. The input lies over the mirror of its text,
   so its box is as wide as the digits. The field shows its states by colour only: the caret green with the focus,
   the digits (the grey «0» of the empty field) and the caret red while marked */
.amount-field {
  padding: var(--amount-air) var(--space-ml);
  border-radius: var(--radius-m);
  background: var(--color-surface);
  line-height: var(--leading-digits);
  cursor: text;
}
.amount-side { flex: 1 1 0; }
.amount-side[data-variant="unit"] { text-align: end; }
.amount-box {
  position: relative;
  flex: none;
  max-inline-size: 100%;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--tip-amount);
  letter-spacing: var(--tracking-tighter);
  font-variant-numeric: tabular-nums;
}
.amount-mirror { display: block; padding-inline: var(--space-3xs); white-space: pre; visibility: hidden; }
/* Our caret while the field has no focus: a bar as high as the digits right after the last one (after the grey «0» of the empty field),
   blinking once a second (steady with less motion, styles.css); it takes no width (its margins add up to zero), so the digits stay in the middle.
   With the focus the browser caret of the same colour stands instead */
.amount-mirror::after {
  content: "";
  display: inline-block;
  inline-size: var(--caret);
  block-size: .7em;
  block-size: 1cap;
  margin-inline: var(--space-3xs) calc(-1 * (var(--caret) + var(--space-3xs)));
  background: var(--color-accent);
  visibility: visible;
  animation: caret-blink var(--dur-blink) steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
.amount-field:focus-within .amount-mirror::after { content: none; }
.amount-field[data-state="invalid"] .amount-mirror::after { background: var(--color-invalid); }
.amount-input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  padding-block: 0;
  padding-inline: var(--space-3xs);
  border: 0;
  background: none;
  text-align: center;
  letter-spacing: inherit;
  line-height: var(--leading-tight);
  caret-color: var(--color-accent);
}
.amount-input:focus-visible { outline: none; }
.amount-input::placeholder { color: var(--color-line); }
.amount-field[data-state="invalid"] .amount-input { color: var(--color-invalid); caret-color: var(--color-invalid); }
.amount-field[data-state="invalid"] .amount-input::placeholder { color: var(--color-invalid); }
.amount-unit { font-family: var(--font-display); font-weight: var(--weight-heavy); font-size: var(--size-xl); color: var(--color-text-muted); white-space: nowrap; }