<script lang="ts">
  let {
    density = "regular",
    size = "md",
    tone = "neutral",
  }: {
    density?: "regular" | "tight";
    size?: "sm" | "md" | "lg";
    tone?: "neutral" | "accent" | "danger";
  } = $props();
</script>

<div
  class="corner-bracket-frame"
  data-density={density}
  data-size={size}
  data-tone={tone}
  aria-hidden="true"
>
  <span data-corner="top-left"></span>
  <span data-corner="top-right"></span>
  <span data-corner="bottom-left"></span>
  <span data-corner="bottom-right"></span>
</div>

<style>
  .corner-bracket-frame {
    --corner-color: var(--ui-color-line-strong);
    --corner-offset: 0.5rem;
    --corner-size: 1.45rem;
    position: relative;
    min-height: 5rem;
    border: 1px solid transparent;
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--corner-color), transparent 78%) 1px, transparent 1px),
      linear-gradient(color-mix(in srgb, var(--corner-color), transparent 84%) 1px, transparent 1px),
      rgba(2, 3, 2, 0.64);
    background-size: 2rem 2rem, 2rem 2rem, auto;
  }

  span {
    position: absolute;
    width: var(--corner-size);
    height: var(--corner-size);
    border-color: var(--corner-color);
  }

  [data-corner="top-left"] {
    top: var(--corner-offset);
    left: var(--corner-offset);
    border-top: 1px solid;
    border-left: 1px solid;
  }

  [data-corner="top-right"] {
    top: var(--corner-offset);
    right: var(--corner-offset);
    border-top: 1px solid;
    border-right: 1px solid;
  }

  [data-corner="bottom-left"] {
    bottom: var(--corner-offset);
    left: var(--corner-offset);
    border-bottom: 1px solid;
    border-left: 1px solid;
  }

  [data-corner="bottom-right"] {
    right: var(--corner-offset);
    bottom: var(--corner-offset);
    border-right: 1px solid;
    border-bottom: 1px solid;
  }

  .corner-bracket-frame[data-density="tight"] {
    --corner-offset: 0.28rem;
  }

  .corner-bracket-frame[data-size="sm"] {
    --corner-size: 0.95rem;
    min-height: 3rem;
  }

  .corner-bracket-frame[data-size="lg"] {
    --corner-size: 2.25rem;
    min-height: 8rem;
  }

  .corner-bracket-frame[data-tone="accent"] {
    --corner-color: var(--ui-color-accent);
  }

  .corner-bracket-frame[data-tone="danger"] {
    --corner-color: var(--ui-color-danger);
  }
</style>
