<commit_before>@import '@teamleader/ui-animations';
@import '@teamleader/ui-colors';

.loading-bar {
  width: 100%;
  height: 3px;

  overflow: hidden;

  &-indicator {
    width: 20%;
    height: 100%;

    position: relative;
    left: -25%;

    border-radius: 4px;

    animation: slideOut calc(var(--animation-duration) * 5) ease infinite;
  }
}

.is-neutral {
  background-color: var(--color-neutral-lightest);

  & .loading-bar-indicator {
    background-color: var(--color-neutral);
  }
}

.is-mint {
  background-color: var(--color-mint-lightest);

  & .loading-bar-indicator {
    background-color: var(--color-mint);
  }
}

.is-violet {
  background-color: var(--color-violet-lightest);

  & .loading-bar-indicator {
    background-color: var(--color-violet);
  }
}

.is-ruby {
  background-color: var(--color-ruby-lightest);

  & .loading-bar-indicator {
    background-color: var(--color-ruby);
  }
}

.is-gold {
  background-color: var(--color-gold-lightest);

  & .loading-bar-indicator {
    background-color: var(--color-gold);
  }
}

.is-aqua {
  background-color: var(--color-aqua-lightest);

  & .loading-bar-indicator {
    background-color: var(--color-aqua);
  }
}

.is-teal {
  background-color: var(--color-teal-lightest);

  & .loading-bar-indicator {
    background-color: var(--color-teal);
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(650%);
  }
}
<commit_msg>Update color values as the previous values did not allow to change the tint<commit_after>@import '@teamleader/ui-animations';
@import '@teamleader/ui-colors';

.loading-bar {
  width: 100%;
  height: 3px;

  overflow: hidden;

  &-indicator {
    width: 20%;
    height: 100%;

    position: relative;
    left: -25%;

    border-radius: 4px;

    animation: slideOut calc(var(--animation-duration) * 5) ease infinite;
  }
}

.is-neutral {
  background-color: color(var(--color-neutral) a(18%));

  & .loading-bar-indicator {
    background-color: var(--color-neutral);
  }
}

.is-mint {
  background-color: color(var(--color-mint) a(18%));

  & .loading-bar-indicator {
    background-color: var(--color-mint);
  }
}

.is-violet {
  background-color: color(var(--color-violet) a(18%));

  & .loading-bar-indicator {
    background-color: var(--color-violet);
  }
}

.is-ruby {
  background-color: color(var(--color-ruby) a(18%));

  & .loading-bar-indicator {
    background-color: var(--color-ruby);
  }
}

.is-gold {
  background-color: color(var(--color-gold) a(18%));

  & .loading-bar-indicator {
    background-color: var(--color-gold);
  }
}

.is-aqua {
  background-color: color(var(--color-aqua) a(18%));

  & .loading-bar-indicator {
    background-color: var(--color-aqua);
  }
}

.is-teal {
  background-color: color(var(--color-teal) a(18%));

  & .loading-bar-indicator {
    background-color: var(--color-teal);
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(650%);
  }
}

{'fraction_non_alphanumeric': 0.1841841841841842, 'fraction_numerical': 0.016016016016016016, 'mean_word_length': 2.9138381201044385, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3286560', 'n_tokens_mistral': 1204, 'n_tokens_neox': 1124, 'n_words': 176}