<template>
    <div class="outer center" :class="threshold.calc(threshold.value).toString().toLocaleLowerCase()">
        <div class="inner">
            &nbsp;
        </div>
    </div>
</template>

<script setup lang="ts">
import type { Threshold } from '~/classes/Threshold';

defineProps<{
  threshold: Threshold
}>();
</script>

<style scoped>
.outer {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.75rem;
    user-select: none;
}
.inner {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.5rem;
    animation: pulse 2s infinite;
}
.outer.green {
  background-color: rgb(139, 255, 139);
}
.outer.green .inner {
  background-color: #11cc11;
}

.outer.orange {
  background-color: rgb(255, 192, 151);
}
.outer.orange .inner {
  background-color: rgb(255, 132, 31);
}

.outer.red {
  background-color: rgb(255, 130, 130);
}
.outer.red .inner {
  background-color: rgb(219, 12, 12);
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>