/* Shot map — pitch outline with xG-scaled shot dots.
 * ---------------------------------------------------------------------- */

@layer components {
  .shot-map {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: 36rem;
    position: relative;
  }

  .shot-map__shot:hover {
    fill-opacity: 0.9;
  }

  .shot-map--half {
    max-inline-size: 26rem;
  }

  /* The same half stood on its end: 68 wide by 52.5 tall, so it wants less
     room than the whole pitch and more than the half lying down. */
  .shot-map--attacking-half {
    max-inline-size: 30rem;
  }

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

  .shot-map__pitch rect,
  .shot-map__pitch line,
  .shot-map__pitch circle {
    fill: none;
    stroke: var(--color-ink-lighter);
    stroke-width: 0.4;
  }

  .shot-map__pitch .shot-map__spot {
    fill: var(--color-ink-lighter);
    stroke: none;
  }

  .shot-map__shot {
    fill-opacity: 0.45;
    stroke-width: 0.3;
  }

  .shot-map__shot--home {
    fill: var(--theme-home, oklch(var(--lch-blue-dark)));
    stroke: var(--theme-home, oklch(var(--lch-blue-dark)));
  }

  .shot-map__shot--away {
    fill: var(--theme-away, oklch(var(--lch-pink-medium)));
    stroke: var(--theme-away, oklch(var(--lch-pink-medium)));
  }

  .shot-map__shot--goal {
    fill-opacity: 0.9;
    stroke: var(--color-ink);
    stroke-width: 0.5;
  }

}