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

<div
  class="progress-bar"
  class:indeterminate={value == undefined}
  style="--value: {value}%"
>
  <div class="value" />
  <div class="label">
    <slot>
      {value ? Math.round(value) : "?"}%
    </slot>
  </div>
</div>

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

  .value {
    background: var(--primary);
    height: 100%;
    width: var(--value, 100%);
    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;
  }

  .progress-bar.indeterminate {
    .value {
      animation-name: indeterminate;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
    }
  }

  @keyframes indeterminate {
    0% {
      background-color: var(--primary);
    }
    50% {
      background-color: var(--primary-lighter);
    }
    100% {
      background-color: var(--primary);
    }
  }
</style>
