Анимация перехода фокуса для контура не работает при расфокусировке ввода HTML

У меня есть базовый ввод, для которого я пытаюсь выделить красивый контур, но по какой-то причине анимация unfocus не происходит.

Что мне здесь не хватает?

Я даже закомментировал all: unset, чтобы я мог явно установить outline: transparent, чтобы дать нормальную статистику, в надежде, что это исправит.

Любые советы будут огромной помощью!

Ваше здоровье!

Ссылка на Codesandbox: https://codesandbox.io/s/custom-input-yo98mc?file=/src/components/CInput.vue

CВход

<template>
  <input class="c-input" :value="value" />
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    value: { type: String, default: '' },
    color: { type: String, default: '#AB92F0' },
  }
  ,
  setup(){

  }
})

</script>
<style lang="sass">
.c-input
  // all: unset
  border: none
  outline: none
  display: flex
  min-width: 200px
  width: 100%
  font-size: 36px
  padding: 14px
  border-radius: 6px
  background-color: white
  transition: all 300ms ease-in-out
  &:focus
    outline: 4px solid red
</style>