<template>
  <div 
    class="flex row items-center no-wrap logo-component"
    >
    <svg
      class="iconcolor"
      viewBox="0 0 8.4666662 8.4666662"
      version="1.1"
      id="svg1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:svg="http://www.w3.org/2000/svg"
      >
      <defs id="defs1" />
      <g id="layer1">
        <rect
          class="fill-brand"
          style="stroke-width:0.233149"
          id="rect5"
          width="6.9885192"
          height="0.35581663"
          x="3.114475"
          y="0.86827624"
          transform="matrix(0.77578367,0.63099897,-0.77578367,0.63099897,0,0)"
        />
        <rect
          class="fill-brand"
          style="stroke-width:0.24961"
          id="rect5-7"
          width="7.4819207"
          height="0.3809379"
          x="-3.9267058"
          y="5.7988153"
          transform="matrix(-0.70756824,0.70664502,0.70756824,0.70664502,0,0)"
        />
        <circle
          class="fill-brand"
          style="stroke-width:0.134869"
          id="path5-8"
          cx="1.5875"
          cy="6.8791666"
          r="1.0583333"
        />
        <circle
          class="fill-brand"
          style="stroke-width:0.168586"
          id="path5-8-5"
          cx="7.1437502"
          cy="7.1437502"
          r="1.3229166"
        />
        <circle
          class="fill-brand"
          style="stroke-width:0.118011"
          id="path5-8-5-1"
          cx="1.4552083"
          cy="2.5135417"
          r="0.92604166"
        />
        <circle
          class="fill-brand"
          style="stroke-width:0.101152"
          id="path5-8-5-1-7"
          cx="7.1437502"
          cy="1.3229166"
          r="0.79374999"
        />
        <circle
          style="stroke-width:0.23602"
          id="path5"
          cx="3.96875"
          cy="4.4979167"
          r="1.8520833"
        />
      </g>
    </svg>

    <span
      class="text-brand"
      style="margin-right: 0.075em;"
      >
      tg
    </span>

    <span class="text-brand2 text-bold">
      Crew
    </span>
  </div>
</template>

<script setup lang="ts">
</script>

<style lang="scss" scoped>
  .logo-component {
    svg {
      width: 1em;
      height: 1em;
      margin-right: 0.125em;
    }

    span {
      line-height: 1;
    }
  }

  .fill-brand {
    fill: $brand;
  }

  @keyframes blink {
    100%,
    0% {
      fill: $brand2;
    }
    60% {
      fill: $brand2;
      opacity: 0.8;
    }
  }

  #path5 {
    animation: blink 3s infinite;
  }
</style>
