<template>
  <div 
    class="card-title-custom" 
    :style="{ '--left-offset': leftOffset }"
  >
    {{ props.title }}
  </div>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  leftOffset: {
    type: String,
    default: '-22px'
  }
})
</script>

<style scoped>
.card-title-custom {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  position: relative;
}
.card-title-custom::before {
  content: '';
  position: absolute;
  left: var(--left-offset, -22px);
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 16px;
  background-color: #1459BB;
}
</style>