.icon {
  display: inline-block;
  fill: currentColor;

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

  &.default {
    svg {
      fill: var(--progress-bar-default);
    }
  }

  &.error {
    svg {
      fill: var(--color-error-darker);
    }
  }

  &.accept {
    svg {
      fill: var(--color-success);
    }
  }

  &.muted {
    svg {
      fill: var(--bg-gray-darkest);
    }
  }

  &.errors-and-warnings {
    svg {
      fill: var(--progress-bar-errors-and-warnings);
    }
  }

  &.unfinished {
    svg {
      fill: var(--progress-bar-unfinished);
    }
  }

  &.in-progress {
    svg {
      fill: var(--progress-bar-in-progress);
    }
  }

  &.first-entry-finished {
    svg {
      fill: var(--progress-bar-first-entry-finished);
    }
  }

  &.definitive {
    svg {
      fill: var(--progress-bar-definitive);
    }
  }

  &.not-started {
    svg {
      fill: var(--progress-bar-not-started);
    }
  }

  &.status-not-started {
    svg {
      fill: var(--status-not-started);
    }
  }

  &.xs {
    width: 1rem;
    height: 1rem;
  }

  &.sm {
    width: 1.25rem;
    height: 1.25rem;
  }

  &.md {
    width: 1.5rem;
    height: 1.5rem;
  }

  &.lg {
    width: 2rem;
    height: 2rem;
  }

  &.xl {
    width: 2.5rem;
    height: 2.5rem;
  }
}
