<script lang="ts">
  /**
   * A linear progress bar (Buffer) visually represents the progress of a task along a horizontal track, often indicating both current progress and a secondary buffered state. This type of progress bar is commonly used for loading processes, file uploads, or streaming indicators, where part of the task is completed while another portion is preloaded or buffered. It provides users with real-time feedback on task advancement.
   */
  interface Props {
    [key: string]: any;
    /**
     * Allows to define the progress bar size.
     */
    size?: 's' | 'm' | 'l';
    /**
     * The current value of the progress bar.
     */
    value?: number;
  }

  let { value = 0, size = 'm', class: className, ...attrs }: Props = $props();
</script>

<div class={['mc-linear-progressbar-buffer', `mc-linear-progressbar-buffer--${size}`, className]}>
  <div
    class="mc-linear-progressbar-buffer__indicator"
    role="progressbar"
    style={`--progress-value: ${value};`}
    aria-valuenow={value}
    aria-valuemin="0"
    aria-valuemax="100"
    {...attrs}
  ></div>
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-linear-progressbar-buffer {
  --progress-value: 40;
  background-color: var(--progressbar-color-background, #c9d0de);
  height: 0.25rem;
  position: relative;
  min-width: 6rem;
  border-radius: var(--border-radius-l, 1rem);
}
.mc-linear-progressbar-buffer__indicator {
  background-color: var(--progressbar-color-indicator, #464e63);
  height: 100%;
  transition: width 0.4s ease;
  overflow: hidden;
  border-radius: var(--border-radius-l, 1rem);
  box-sizing: border-box;
  width: calc(var(--progress-value) * 1%);
}
.mc-linear-progressbar-buffer--s {
  height: 0.125rem;
}
.mc-linear-progressbar-buffer--l {
  height: 0.5rem;
}</style>
