.fizz-progress {
  --progress: 20%;
  background: linear-gradient(90deg, rgba(0,143,190,1) var(--progress), rgba(217,222,224,1) var(--progress));
  width: 100%;
  height: 2px;
}

.fizz-progress-tracker {
  --progress: 20%;
  --left-color: #{$color-background-success};
  --right-color: #{$color-background-inactive};
  background: linear-gradient(90deg, var(--left-color) var(--progress), var(--right-color) var(--progress));
  width: 100%;
  height: $spacing-8;
  border-radius: $spacing-4;
}
.fizz-progress-tracker[data-type="credit-utilization"] {
  --left-color: #{$color-navy-600};
  --right-color: #{$color-red-600};
}

[class*="fizz-key"] {
  padding-left: $spacing-24; 
  position: relative;
}

[class*="fizz-key"]:before {
  content: "";
  display: block;
  width: $spacing-16;
  height: $spacing-16;
  border-radius: $border-radius-medium;
  background-color: $color-background-inactive;
  position: absolute;
  left: 0;
  top: 2px;
}

.fizz-key-red:before {
  background-color: $color-red-600;
}
.fizz-key-green:before {
  background-color: $color-background-success;
}
.fizz-key-blue:before {
  background-color: $color-navy-600;
}