.np-progress {
  border-radius: var(--radius-small);
  width: 100%;
  height: var(--size-8);

  &::-webkit-progress-bar {
    background-color: var(--color-background-neutral);
    border-radius: var(--radius-small);
  }

  &::-webkit-progress-value {
    background-color: var(--color-content-accent);
    border-radius: var(--radius-small);

    .np-theme-personal & {
      background-color: var(--color-interactive-primary);
    }
  }

  &::-moz-progress-bar {
    background-color: var(--color-content-accent);
    border-radius: var(--radius-small);

    .np-theme-personal & {
      background-color: var(--color-interactive-primary);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    &::-webkit-progress-value {
      transition: width 0.5s ease;
      transition-delay: 0.2s;
    }

    &::-moz-progress-bar {
      transition: width 0.5s ease;
      transition-delay: 0.2s;
    }
  }
}