@use '../../theme/styles' as theme;

.wr-progress {
  position: relative;
  display: block;
  overflow: hidden;

  // Defaults — color modifiers override the bar color.
  --wr-progress-height: 0.5rem;
  --wr-progress-radius: var(--wr-border-radius-pill);
  --wr-progress-track: rgba(var(--wr-color-light-rgb), 0.35);
  --wr-progress-bar: var(--wr-color-primary);

  // `flex: 1 1 100%` here would claim 100% basis on the flex MAIN axis —
  // fine in a row wrapper (=full width), broken in a column wrapper
  // (8 bars each demanding 100% of the column height → each shrinks to
  // 1/8). Use `flex: 0 1 auto` so the explicit `height` wins regardless,
  // and consumers who need it row-stretched set `flex: 1` on the wrapper.
  flex: 0 1 auto;
  width: 100%;
  min-width: 0;
  height: var(--wr-progress-height);
  border-radius: var(--wr-progress-radius);
  background: var(--wr-progress-track);

  &__bar {
    height: 100%;
    background: var(--wr-progress-bar);
    border-radius: inherit;
    transition: width var(--wr-transition-base);
  }

  @each $name in theme.$colors {
    &--#{$name} {
      --wr-progress-track: rgba(var(--wr-color-#{$name}-rgb), 0.2);
      --wr-progress-bar: var(--wr-color-#{$name});
    }
  }
}