<script setup lang="ts">
// Relay 브랜드 마크(더블 셰브론) — 색상 로고 타일 안에 들어가는 심볼.
// 색상/그라데이션 배경 타일에는 white, 흰/투명 배경에는 기본(인디고)을 사용한다.
import markWhite from '@/assets/images/logo/svg/relay-mark-white.svg'
import mark from '@/assets/images/logo/svg/relay-mark.svg'

withDefaults(defineProps<{ white?: boolean }>(), { white: false })
</script>

<template>
  <!-- 부모 타일이 어떤 정렬을 쓰든 중앙에 오도록 자체 중앙 정렬 -->
  <span class="relay-mark">
    <img
      :src="white ? markWhite : mark"
      alt=""
      aria-hidden="true"
      draggable="false"
    >
  </span>
</template>

<style scoped>
.relay-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.relay-mark img {
  width: 66%;
  height: 66%;
  object-fit: contain;
}
</style>
