<script>
export default {
  name: "valueUnit",
  props: ["value", "unit"]
}
</script>

<template>
  <section class="valueUnit" :class="[$attrs.size]" :style="{color:$attrs.color}">
    {{ value }}<p v-text="unit"/>
  </section>
</template>

<style scoped lang="scss">
.valueUnit {
  font-family: DINAlternate-Bold,serif;
  font-weight: 700;
  font-size: 22px;
  color: #02FEFF;
  display: flex;
  letter-spacing: 0;
  line-height: 36px;
  align-items: baseline;

  & > p {
    margin-left: 2px;
    font-size: 14px;
    font-weight: 400;
  }

  &.mini {
    font-size: 16px;
    line-height: 20px;

    & > p {
      font-size: 12px;
    }
  }

  &.large {
    font-size: 32px;
  }
}
</style>
