<script setup lang="ts">
import type { TimelineClipData, TimelineTrackData } from '@/lib/Timeline';
import Default from './Default.vue';

const {
  width,
} = defineProps<{
  track: TimelineTrackData,
  clip: TimelineClipData,
  width: number,
}>();
</script>
<template>
  <div class="tw:absolute tw:w-full fade-out-gradient" />

  <Default :track :clip :width />
</template>
<style scoped>
.fade-out {
  border-style: solid;
  border-color: transparent;
  border-top-color: black;
  border-right-color: black;
}

.fade-out-gradient {
  left: 0;
  top: 0;
  /* TODO: hardcoded bottom line offset */
  height: calc(100% - calc(var(--tw-spacing) * 5.5) - 1px);
  background-image:
    linear-gradient(to top right,
      transparent 49.9%,
      rgba(0, 0, 0, 0.5) 50%);
}
</style>
