figure[data-chart="xy"] {
  --chart-xy-height: 12rem;

  min-width: 0;
  margin: 0;
  line-height: 1;

  > [data-chart="plot"] {
    position: relative;
  }

  svg {
    display: block;
    width: 100%;
    height: var(--chart-xy-height);
    overflow: visible;
  }

  [data-chart="xy-line"] {
    fill: none;
    stroke: var(--color, var(--gray));
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.75;
    vector-effect: non-scaling-stroke;
  }

  [data-chart="xy-point"] {
    fill: var(--color, var(--white));
    stroke: var(--black);
    stroke-width: 1.75;
    vector-effect: non-scaling-stroke;
  }

  [data-chart="xy-guide"] {
    opacity: 0;
    stroke: var(--white);
    stroke-dasharray: 2 4;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
  }

  svg[data-xy-hover="true"] [data-chart="xy-guide"] {
    opacity: 1;
  }

  [data-chart-marker="xy"] {
    color: var(--black);
    background: var(--white);
    text-transform: uppercase;
  }
}
