{{- if site.Params.banner }}
<div class="hextra-banner hx:max-md:sticky hx:top-0 hx:z-20 hx:px-6 hx:text-center hx:text-slate-50 hx:dark:text-white hx:bg-neutral-900 hx:dark:bg-neutral-800 hx:print:[display:none]">
  <div class="hx:relative hx:flex hx:items-center hx:justify-center hx:font-medium hx:text-sm hx:py-2.5">
    {{- with partial "custom/banner.html" . -}}
      {{- . -}}
    {{- else -}}
      <div style="white-space: pre-wrap" class="hx:px-8">
        {{- site.Params.banner.message | default "🎉 Welcome! This is a banner message." | .RenderString -}}
      </div>
    {{- end -}}
    <button
      class="hextra-banner-close-button hx:cursor-pointer hx:absolute hx:right-0 hx:text-white hx:font-bold hx:leading-none hx:hover:opacity-75 hx:transition hx:w-10 hx:h-10 hx:-mr-2 hx:md:mr-0 hx:flex hx:items-center hx:justify-center"
    >
      {{- partial "utils/icon.html" (dict "name" "x" "attributes" "height=16") -}}
    </button>
  </div>
</div>
{{- end -}}