<script setup lang="ts">
import { ProgressBarStatus } from '.';
const props = defineProps<{
  percentage?: number;
  status: ProgressBarStatus;
}>();

</script>

<template>
  <div class="wide-progress">
    <div class="progress-background"></div>
    <div 
      :class="`fill-${props.status}`"
      class="progress-fill"
      :style="`transform: scaleX(${(props.percentage ?? 0) / 100});`"
    ></div>
  </div>
</template>

<style lang="scss">
.wide-progress {
  position: relative;
  width: 401px;
  height: 24px;
}

.progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: left;
  transition: transform 0.5s ease-in-out;
  &::before {
    position: absolute;
    content: ' ';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
  }
}

.fill-preparing {
  background: transparent;
}

.fill-processing {
  background: #0062DC;
  &::before {
    box-shadow: 4px 8px 12px 0px #005CDB40;
  }
}

.fill-error {
  background: #E32020;
  &::before {
    box-shadow: 4px 8px 12px 0px #E2202040;
  }
}

.fill-wrapper {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
}

.progress-background {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--o-border-color-lighter) 1px, transparent 0);
  background-size: 4px 100%;
}
</style>