<template>
  <div class="flex row items-center no-wrap logo-component">
    <LogoIcon
      v-bind="$attrs"
      class="logo-svg" 
      :class="{ 
        'is-animated': animated, 
        'hide-bg': !withBackground
      }"
      :style="{ color: iconColor }"
    />

    <div
      :class="'text-' + textColor"
      class="logo-text"
      style="margin-left: 0.05em;"
      >
      <span>tg</span>
      <span class="text-bold">Crew</span>
    </div>
  </div>
</template>

<script setup>
  import LogoIcon from 'components/BaseLogoSvg.vue'

  defineProps({
    textColor: {
      type: String,
      default: 'primary'
    },
    iconColor: {
      type: String,
      default: 'white'
    },
    withBackground: {
      type: Boolean,
      default: true
    },
    animated: {
      type: Boolean,
      default: true
    }
  })
</script>

<style lang="scss" scoped>
  .logo-svg {
    height: 1em;
    width: 1em;

    :deep(.logo-bg) {
      transition: opacity 0.3s;
    }

    &.hide-bg :deep(.logo-bg) {
      display: none;
    }

    :deep(.x), :deep(.c) { 
      transform-box: fill-box; 
    }
    
    &.is-animated {
      :deep(.x) { animation: expand-r 6s ease-in-out infinite; }
      :deep(.c) { animation: o 6s ease-in-out infinite; }
      :deep(.l) {
        stroke-dasharray: 1; 
        stroke-dashoffset: 1;
        stroke-width: 1.5;
        animation: draw 6s ease-in-out infinite;
      }
    }
  }

  @keyframes expand-r { 50% { r: 8px; } }
  @keyframes o { 50% { transform: var(--t); } }
  @keyframes draw {
    0%, 100% { stroke-dashoffset: 0; }
    50% { stroke-dashoffset: 1; }
  }
</style>
