{{/*  Source:https://gitlab.com/Roneo/hugo-shortcode-roneo-collection  */}}

{{/* Available box types: warning, info, important, tip */}}
{{- $boxType := .Get 0 | default "info" -}}

{{/* Workaround markdownify inconsistency for single/multiple paragraphs */}}
{{- $raw := (markdownify .Inner | chomp) -}}
{{- $block := findRE "(?is)^<(?:address|article|aside|blockquote|canvas|dd|div|dl|dt|fieldset|figcaption|figure|footer|form|h(?:1|2|3|4|5|6)|header|hgroup|hr|li|main|nav|noscript|ol|output|p|pre|section|table|tfoot|ul|video)\\b" $raw 1 -}}

{{/* Count how many times we've called this shortcode and load the css if it's the first time */}}
{{- if not ($.Page.Scratch.Get "box_count") -}}

  <style type="text/css">
    .box-shortcode {
      padding: 1.2em;
      padding-top: 1em;
      line-height: 1em;
      margin-top: 1em;
      margin-bottom: 2em;
      border-radius: 3px;
      color: var(--text);
      background: #f3ebe850;
    }

    .box-title {
      margin: -18px -18px 12px;
      padding: 4px 18px;
      border-radius: 3px 3px 0 0;
      font-weight: 700;
      color: var(--text);
      background: #6ab0de;
    }
    .box-shortcode.warning .box-title {
      background: #ff6b6b;
    }
    .box-shortcode.warning {
      background: #ff6b6b4f;
    }
    .box-shortcode.info .box-title {
      background: #0089e488;
    }
    .box-shortcode.info {
      background: #0089e41c;
    }
    .box-shortcode.important .box-title {
      background: #f7ec2c;
    }
    .box-shortcode.important {
      background: #f7ec2c7d;
    }
    .box-shortcode.tip .box-title {
      background: #a3ffa34d;
    }
    .box-shortcode.tip {
      background: #a3ffa34d;
    }
    .icon-box {
      display: inline-flex;
      align-self: center;
      margin-right: 8px;
    }
    .icon-box img,
    .icon-box svg {
      height: 1em;
      width: 1em;
      fill: var(--text-dim);
    }
    .icon-box img,
    .icon-box.baseline svg {
      top: 0.125em;
      position: relative;
    }
    .box-shortcode p {
      margin-bottom: 0.6em;
    }
    .box-shortcode p:first-of-type {
      display: inline;
    }
    .box-shortcode p:nth-of-type(2) {
      margin-top: 0.6em;
    }
    .box-shortcode p:last-child {
      margin-bottom: 0;
    }
  </style>

  {{/*  SVG icons  */}}
  <svg width="0" height="0" display="none" xmlns="http://www.w3.org/2000/svg">
    <symbol id="tip-box" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
      <path
        d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"/>
    </symbol>
    <symbol id="important-box" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
      <path
        d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"/>
    </symbol>
    <symbol id="warning-box" viewBox="0 0 576 512" preserveAspectRatio="xMidYMid meet">
      <path
        d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"/>
    </symbol>
    <symbol id="info-box" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
      <path
        d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"/>
    </symbol>
  </svg>

{{- end -}}

{{- $.Page.Scratch.Add "box_count" 1 -}}

<div class="box box-shortcode {{ $boxType }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>
    <span class="icon-box baseline">
      <svg><use href="#{{- $boxType -}}-box"></use></svg>
    </span>
  {{- if or $block (not $raw) }}
    {{ $raw }}
  {{ else }}
    <p>{{ $raw }}</p>
  {{ end -}}
</div>