/* Momentum — smoothed xT-difference curve, home above the axis, away below,
 * with every goal marked where it went in.
 * ---------------------------------------------------------------------- */

@layer components {
  /* A key under the drawing, so the wrapper is a column and the drawing
     takes what the key leaves. */
  .momentum {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
    inline-size: 100%;
  }

  .momentum__svg {
    inline-size: 100%;
    block-size: auto;
  }

  .momentum__area--home {
    fill: var(--theme-home, oklch(var(--lch-blue-dark)));
    fill-opacity: 0.75;
  }

  .momentum__area--away {
    fill: var(--theme-away, oklch(var(--lch-pink-medium)));
    fill-opacity: 0.75;
  }

  /* The two washes say who was on top; the line through them is the shape of
     the match, which is easier to follow than the edge of a fill. */
  .momentum__curve {
    fill: none;
    stroke: var(--color-ink);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-opacity: 0.35;
    stroke-width: 1.25;
  }

  .momentum__axis {
    stroke: var(--color-ink-lighter);
    stroke-width: 1;
  }

  .momentum__ticks text {
    fill: var(--color-ink-medium);
    font-family: var(--font-mono);
  }

  /* A dashed line alone says something happened here. The dot at its head and
     the minute beside it say what. */
  .momentum__goal-line {
    stroke-dasharray: 3 4;
    stroke-width: 1.5;
  }

  .momentum__goal-label {
    font-family: var(--font-mono);
    font-size: 0.8em;
    font-weight: 700;
  }

  .momentum__goal--home .momentum__goal-line,
  .momentum__goal--home .momentum__goal-dot {
    stroke: var(--theme-home, oklch(var(--lch-blue-dark)));
  }

  .momentum__goal--home .momentum__goal-dot,
  .momentum__goal--home .momentum__goal-label {
    fill: var(--theme-home, oklch(var(--lch-blue-dark)));
  }

  .momentum__goal--away .momentum__goal-line,
  .momentum__goal--away .momentum__goal-dot {
    stroke: var(--theme-away, oklch(var(--lch-pink-medium)));
  }

  .momentum__goal--away .momentum__goal-dot,
  .momentum__goal--away .momentum__goal-label {
    fill: var(--theme-away, oklch(var(--lch-pink-medium)));
  }
}