@import "pack/seed-dash/_index";
@import "../configs/color";

.c-ProgressBar {
  @import "../resets/base";
  $height: 6px;
  $sizes: (
    lg: (
      height: 10px,
    ),
    md: (
      height: $height,
    ),
    sm: (
      height: 2px,
    ),
  );
  background-color: _color(grey, 300);
  border-radius: 200px;
  height: $height;
  width: 100%;

  &__bar {
    background: linear-gradient(to right, _color(green, 400), _color(green, 500));
    border-radius: 200px;
    height: 100%;
    transition: width 0.3s ease;
    width: 0%;
  }

  // Sizes
  @each $size, $values in $sizes {
    &.is-#{$size} {
      $sz: _get($values, height);
      height: $sz;
    }
  }
}