.progress {
  --track: var(--color-border-light);
  --progress: var(--color-primary);

  background-color: var(--track);
  border-radius: var(--rounded-full);
  block-size: var(--size-4);
  inline-size: var(--size-full);
  overflow: hidden;

  &:indeterminate {
    background: linear-gradient(to right, var(--track) 45%, var(--progress) 0%, var(--progress) 55%, var(--track) 0%);
    background-size: 225% 100%;
    background-position: right;
    animation: progress-loading 2s infinite ease;
  }

  /*  Safari/Chromium  */
  &::-webkit-progress-bar {
    background-color: var(--track);
  }

  &::-webkit-progress-value {
    background-color: var(--progress);
  }

  &:indeterminate::-webkit-progress-bar {
    background-color: transparent;
  }

  /* Firefox */
  &::-moz-progress-bar {
    background-color: var(--progress);
  }

  &:indeterminate::-moz-progress-bar {
    background-color: transparent;
  }

  &.primary {
    --progress: var(--color-primary);
  }
  
  &.secondary {
    --progress: var(--color-secondary);
  }
  
  &.success,
  &.positive {
    --progress: var(--color-positive);
  }
  
  &.danger,
  &.error,
  &.negative {
    --progress: var(--color-negative);
  }

  &.info {
    --progress: var(--color-info);
  }

  &.warning {
    --progress: var(--color-warning);
  }

  &.slim { height: .5rem; }
}

@keyframes progress-loading {
  50% {
    background-position: left;
  }
}