<template>
  <span class="inline-flex items-center gap-2">
    <svg
      width="20"
      height="15"
      viewBox="0 0 160 120"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="shrink-0"
    >
      <!-- Top block -->
      <polygon
        points="80,10 140,30 80,50 20,30"
        fill="var(--ui-primary)"
        opacity="0.85"
      />
      <!-- Second block left face -->
      <polygon
        points="20,30 80,50 80,80 20,60"
        fill="var(--ui-primary)"
        opacity="0.65"
      />
      <!-- Second block right face -->
      <polygon
        points="80,50 140,30 140,60 80,80"
        fill="var(--ui-primary)"
        opacity="0.55"
      />
      <!-- Third block left face -->
      <polygon
        points="20,60 80,80 80,110 20,90"
        fill="var(--ui-primary)"
        opacity="0.45"
      />
      <!-- Third block right face -->
      <polygon
        points="80,80 140,60 140,90 80,110"
        fill="var(--ui-primary)"
        opacity="0.35"
      />
      <!-- Fourth block left face -->
      <polygon
        points="20,90 80,110 80,140 20,120"
        fill="var(--ui-primary)"
        opacity="0.25"
      />
      <!-- Fourth block right face -->
      <polygon
        points="80,110 140,90 140,120 80,140"
        fill="var(--ui-primary)"
        opacity="0.15"
      />
    </svg>
    <span class="font-bold tracking-[-0.04em] text-base">Enesis</span>
    <span class="font-medium tracking-[0.08em] uppercase text-[0.7rem] text-(--ui-text-muted)">Editor</span>
  </span>
</template>
