{{! template-lint-disable no-invalid-interactive --}}
{{#if labelComponent}}
  {{component labelComponent}}
{{else if label}}
  <label class="overlay-label">{{label}}</label>
{{/if}}
<div class="overlay-border">
  <div
    class="target"
    onmouseenter={{action "beginHover"}}
    onmouseleave={{action "endHover"}}
    onclick={{action "targetClicked" }}
  >
    {{#if reveal}}{{yield}}{{/if}}
  </div>
</div>

{{#liquid-if focused containerless=true use=scrimFader}}
  <div class="overlay-scrim top"    onclick={{action "dismiss"}}></div>
  <div class="overlay-scrim bottom" onclick={{action "dismiss"}}></div>
  <div class="overlay-scrim left"   onclick={{action "dismiss"}}></div>
  <div class="overlay-scrim right"  onclick={{action "dismiss"}}></div>
{{/liquid-if}}