{% import 'item/preview.macros.njk' as preview %}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <base target="_parent">

  <title>sizes</title>

  {% if customPreviewCSS %}
    <!-- App preview CSS -->
    <style>
      {{ customPreviewCSS | safe }}
    </style>
  {% endif %}

  <!-- Herman iframe styles -->
  <link rel="stylesheet" href="assets/webpack/iframe_styles.min.css" />

  {% if fontsHTML %}
    <!-- Custom Font HTML -->
    {{ fontsHTML|safe }}
  {% endif %}
</head>
<body data-herman-preview="size">
  {%- set args = item.sizes -%}

  {{ preview.size_table(
    data=sassjson.sizes[args.key],
    style=args.style or 'text'
  ) }}
</body>
</html>
