:root {
  --progress-bar-gradient-width-1: 0.5rem;
  --progress-bar-gradient-width-2: 1rem;
  --progress-bar-gradient-color: var(--primary-color);
  --progress-bar-gradient-color-light: var(--primary-color-light);
  --progress-bar-width-small: var(--width-small);
  --progress-bar-width-medium: var(--width-medium);
  --progress-bar-width-large: var(--width-large);
  --progress-bar-height: 0.5rem;
}

.cosmo-progress-bar__label {
  font-size: var(--font-size);
  color: var(--black);
  display: block;
}

.cosmo-progress-bar {
  --progress-bar-background: repeating-linear-gradient(
    -45deg,
    var(--primary-color),
    var(--primary-color) var(--progress-bar-gradient-width-1),
    var(--primary-color-light) var(--progress-bar-gradient-width-1),
    var(--primary-color-light) var(--progress-bar-gradient-width-2)
  );

  display: inline-block;
  vertical-align: baseline;
  appearance: none;
  width: var(--progress-bar-width-medium);
  height: var(--progress-bar-height);
  overflow: hidden;
  border: 0;
  background-color: var(--control-border-color);
  color: var(--primary-color);
  border-radius: var(--border-radius);
}

.cosmo-progress-bar.is--small {
  width: var(--progress-bar-width-small);
}

.cosmo-progress-bar.is--large {
  width: var(--progress-bar-width-large);
}

.cosmo-progress-bar.is--negative {
  --progress-bar-background: repeating-linear-gradient(
    -45deg,
    var(--negative-color),
    var(--negative-color) var(--progress-bar-gradient-width-1),
    var(--negative-color-dark) var(--progress-bar-gradient-width-1),
    var(--negative-color-dark) var(--progress-bar-gradient-width-2)
  );
}

.cosmo-progress-bar.is--positive {
  --progress-bar-background: repeating-linear-gradient(
    -45deg,
    var(--positive-color),
    var(--positive-color) var(--progress-bar-gradient-width-1),
    var(--positive-color-dark) var(--progress-bar-gradient-width-1),
    var(--positive-color-dark) var(--progress-bar-gradient-width-2)
  );
}

.cosmo-progress-bar.is--warning {
  --progress-bar-background: repeating-linear-gradient(
    -45deg,
    var(--warning-color),
    var(--warning-color) var(--progress-bar-gradient-width-1),
    var(--warning-color-dark) var(--progress-bar-gradient-width-1),
    var(--warning-color-dark) var(--progress-bar-gradient-width-2)
  );
}

.cosmo-progress-bar.is--information {
  --progress-bar-background: repeating-linear-gradient(
    -45deg,
    var(--information-color),
    var(--information-color) var(--progress-bar-gradient-width-1),
    var(--information-color-dark) var(--progress-bar-gradient-width-1),
    var(--information-color-dark) var(--progress-bar-gradient-width-2)
  );
}

.cosmo-progress-bar::-webkit-progress-bar {
  background: transparent;
}

.cosmo-progress-bar[value]::-webkit-progress-value {
  border-radius: var(--border-radius);
  background: var(--progress-bar-background);
}

.cosmo-progress-bar::-moz-progress-bar {
  border-radius: var(--border-radius);
  background: var(--progress-bar-background);
}

@media (prefers-reduced-motion: no-preference) {
  .cosmo-progress-bar:indeterminate {
    --progress-background: var(--control-border-color)
      linear-gradient(to right, var(--primary-color) 30%, var(--control-border-color) 30%) top left/150% 150% no-repeat;
    animation: progressIndeterminate 1s linear infinite;
    background: var(--progress-background);
  }

  .cosmo-progress-bar.is--negative:indeterminate {
    --progress-background: var(--control-border-color)
      linear-gradient(to right, var(--negative-color) 30%, var(--control-border-color) 30%) top left/150% 150% no-repeat;
  }

  .cosmo-progress-bar.is--positive:indeterminate {
    --progress-background: var(--control-border-color)
      linear-gradient(to right, var(--positive-color) 30%, var(--control-border-color) 30%) top left/150% 150% no-repeat;
  }

  .cosmo-progress-bar.is--warning:indeterminate {
    --progress-background: var(--control-border-color)
      linear-gradient(to right, var(--warning-color) 30%, var(--control-border-color) 30%) top left/150% 150% no-repeat;
  }

  .cosmo-progress-bar.is--information:indeterminate {
    --progress-background: var(--control-border-color)
      linear-gradient(to right, var(--information-color) 30%, var(--control-border-color) 30%) top left/150% 150%
      no-repeat;
  }

  .cosmo-progress-bar:indeterminate[value]::-webkit-progress-value {
    background: transparent;
  }

  .cosmo-progress-bar:indeterminate::-moz-progress-bar {
    background: transparent;
  }
}

@keyframes progressIndeterminate {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}