<script lang="ts">
  export let value: number;
</script>

<div class="progress-bar" style="--value: {value}%">
  <div class="value" />
  <div class="label">
    <slot>
      {value}%
    </slot>
  </div>
</div>

<style lang="scss">
  .progress-bar {
    width: 100%;
    height: 1em;
    background: white;
    position: relative;
  }

  .value {
    background: var(--primary-lightest);
    height: 100%;
    width: var(--value);
    transition: width 0.2s ease;
  }

  .progress-bar,
  .value {
    border-radius: 2px;
  }

  .label {
    font-size: 0.8em;
    color: white;
    z-index: 9;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    text-align: center;
    font-weight: bold;
    mix-blend-mode: difference;
  }
</style>
