/* xG race — cumulative expected-goals step lines per team.
 * ---------------------------------------------------------------------- */

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

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

  .xg-race__grid line {
    stroke: var(--color-ink-lightest);
    stroke-width: 1;
  }

  .xg-race__axes line {
    stroke: var(--color-ink-lighter);
    stroke-width: 1;
  }

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

  /* The ground between the two lines: what one side was ahead by, at every
     moment of the match. Neutral on purpose, because it belongs to neither
     side. */
  .xg-race__band {
    fill: var(--color-ink-medium);
    fill-opacity: 0.12;
    stroke: none;
  }

  /* A goal, marked on the minute it went in and dropped to the line it moved. */
  .xg-race__marker {
    stroke: var(--series-color);
    stroke-dasharray: 3 3;
    stroke-opacity: 0.55;
    stroke-width: 1;
  }

  .xg-race__minute {
    fill: var(--series-color);
    font-family: var(--font-mono);
    font-weight: 600;
  }

  .xg-race__series path {
    fill: none;
    stroke: var(--series-color);
    stroke-width: 2;
    stroke-linejoin: round;
  }

  .xg-race__goal {
    fill: var(--series-color);
    stroke: var(--color-surface);
    stroke-width: 1.5;
  }

  .xg-race__label {
    fill: var(--series-color);
    font-family: var(--font-mono);
    font-weight: 700;
  }
}