:root {
  --vs-crossref--anchor-text-decoration: none;
  --vs-crossref--anchor-text-decoration-on-hover: underline;
  --vs-crossref--call-display: inline;
  --vs-crossref--call-fig-content: 'Figure '
    target-counter(
      attr(href),
      vs-counter-fig,
      var(--vs-crossref--counter-style)
    );
  --vs-crossref--call-tbl-content: 'Table '
    target-counter(
      attr(href),
      vs-counter-tbl,
      var(--vs-crossref--counter-style)
    );
  --vs-crossref--call-cite-content: '['
    target-counter(attr(href), vs-counter-cite) ']';
  --vs-crossref--call-margin-inline: 0;
  --vs-crossref--counter-style: decimal;
  --vs-crossref--marker-display: inline;
  --vs-crossref--marker-fig-content: 'Figure '
    counter(vs-counter-fig, var(--vs-crossref--counter-style)) ': ';
  --vs-crossref--marker-tbl-content: 'Table '
    counter(vs-counter-tbl, var(--vs-crossref--counter-style)) ': ';
  --vs-crossref--marker-cite-content: '[' counter(vs-counter-cite) ']';
  --vs-crossref--marker-margin-inline: 0;
  --vs-crossref--root-counter-reset: vs-counter-fig
    var(--vs-crossref--root-counter-fig,) vs-counter-tbl
    var(--vs-crossref--root-counter-tbl,) vs-counter-cite
    var(--vs-crossref--root-counter-cite,);

  /* displays dummy content on screen media that doesn't support target-counter() */
  --vs-crossref--call-fig-content-on-screen: 'Figure ???';
  --vs-crossref--call-tbl-content-on-screen: 'Table ???';
  --vs-crossref--call-cite-content-on-screen: '[???]';
}

:root:lang(ja) {
  --vs-crossref--call-fig-content: '図'
    target-counter(
      attr(href),
      vs-counter-fig,
      var(--vs-crossref--counter-style)
    );
  --vs-crossref--call-tbl-content: '表'
    target-counter(
      attr(href),
      vs-counter-tbl,
      var(--vs-crossref--counter-style)
    );
  --vs-crossref--marker-fig-content: '図'
    counter(vs-counter-fig, var(--vs-crossref--counter-style)) ': ';
  --vs-crossref--marker-tbl-content: '表'
    counter(vs-counter-tbl, var(--vs-crossref--counter-style)) ': ';
  --vs-crossref--call-fig-content-on-screen: '図???';
  --vs-crossref--call-tbl-content-on-screen: '表???';
}

a:is([data-ref='fig'], a[data-ref='tbl'], a[data-ref='cite']) {
  text-decoration: var(--vs-crossref--anchor-text-decoration);
  margin-inline: var(--vs-crossref--call-margin-inline);
}

a:is([data-ref='fig'], a[data-ref='tbl'], a[data-ref='cite']):hover {
  text-decoration: var(--vs-crossref--anchor-text-decoration-on-hover);
}

/**
 * Figure
 */

a[data-ref='fig']::before {
  display: var(--vs-crossref--call-display);
  content: var(--vs-crossref--call-fig-content);
}

@media screen {
  a[data-ref='fig']::before {
    content: var(--vs-crossref--call-fig-content-on-screen);
  }
}

figure:is(.fig, :has(> :is(img, picture))) {
  counter-increment: vs-counter-fig;
}

figure:is(.fig, :has(> :is(img, picture))) figcaption::before {
  display: var(--vs-crossref--marker-display);
  content: var(--vs-crossref--marker-fig-content);
  margin-inline: var(
    --vs-crossref--marker-fig-margin-inline,
    var(--vs-crossref--marker-margin-inline)
  );
}

/**
 * Table
 */

a[data-ref='tbl']::before {
  display: var(--vs-crossref--call-display);
  content: var(--vs-crossref--call-tbl-content);
}

@media screen {
  a[data-ref='tbl']::before {
    content: var(--vs-crossref--call-tbl-content-on-screen);
  }
}

figure:is(.tbl, :has(table)),
table:has(caption) {
  counter-increment: vs-counter-tbl;
}

figure:is(.tbl, :has(table)) figcaption::before,
table caption::before {
  display: var(--vs-crossref--marker-display);
  content: var(--vs-crossref--marker-tbl-content);
  margin-inline: var(
    --vs-crossref--marker-tbl-margin-inline,
    var(--vs-crossref--marker-margin-inline)
  );
}

/*
 * Citation
 */

a[data-ref='cite']::before {
  display: var(--vs-crossref--call-display);
  content: var(--vs-crossref--call-cite-content);
}

ol.cite-items {
  list-style: none;
}

ol.cite-items > li {
  counter-increment: vs-counter-cite;
  position: relative;
}

ol.cite-items > li::before {
  position: absolute;
  inset-inline-start: -2rem;
  display: var(--vs-crossref--marker-display);
  content: var(--vs-crossref--marker-cite-content);
  margin-inline: var(
    --vs-crossref--marker-cite-margin-inline,
    var(--vs-crossref--marker-margin-inline)
  );
}