<script setup lang="ts">
interface Props {
	/** The extension type of the file */
	ext: string;
}

defineProps<Props>();
</script>

<template>
	<div class="icon" :class="{ right: ext.length >= 4 }">
		<v-icon name="insert_drive_file" />
		<span class="label">{{ ext }}</span>
	</div>
</template>

<style lang="scss" scoped>
/*

	Available Variables:

		--v-icon-file-color             [var(--theme--primary)]
		--v-icon-file-background-color  [var(--theme--background-normal)]

*/

.icon {
	--v-icon-size: 64px;
	--v-icon-color: var(--v-icon-file-color, var(--theme--primary));
	color: var(--v-icon-file-color, var(--theme--primary));
	position: relative;

	.label {
		position: absolute;
		text-transform: uppercase;
		left: 50%;
		transform: translateX(-50%);
		top: 55%;
		font-size: 12px;
		font-weight: 800;
		line-height: 1;
		padding: 2px 0;
		text-align: center;
	}

	&.right {
		.label {
			background-color: var(--v-icon-file-background-color, var(--theme--background-normal));
			left: calc(100% - 12px - 3ch);
			text-align: left;
			transform: none;
			padding-right: 8px;
		}
	}
}
</style>
