<template>
  <div class="progress-bar">
    <div class="progress-bar-fill" :style="progressBarStyle" />
  </div>
</template>

<script>
export default {
  name: "l-progress-bar",
  props: {
    /**
     * The color for the proportion bar.
     */
    color: {
      type: String,
    },
    /**
     * The proportion the bar needs to fill.
     */
    proportion: {
      type: String,
    },
  },
  computed: {
    progressBarStyle() {
      return {
        "--color": this.color,
        "--proportion": this.proportion + "%",
      };
    },
  },
};
</script>

<style>
.progress-bar {
  width: 100%;
  border-radius: var(--radius-lg);
  background-color: var(--neutral-200);
}

.progress-bar-fill {
  border-radius: var(--radius-lg);
  border-radius: var(--radius-lg);
  background-color: var(--color);
  width: var(--proportion);
  height: 3px;
}
</style>
