<commit_before>@import 'themes';
@import 'defaults';

.m-pulsating--small {
  box-shadow: 0 0 0 red;
  animation: pulse--small 1.5s infinite;
}

.m-pulsating--big {
  box-shadow: 0 0 0 red;
  animation: pulse--big 2s infinite;
}

@keyframes pulse--small {
  20% {
    box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.6);
  }
  99% {
    box-shadow: 0 0 0 7px rgba(244, 67, 54, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
  }
}

// ***************************************************

@keyframes pulse--big {
  0% {
    box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(244, 67, 54, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
  }
}

// ***************************************************

@keyframes blinkingEllipsis {
  0% {
    opacity: 0.2;
  }
  20% {
    opacity: 1;
    transform: scale(1.02);
  }
  100% {
    opacity: 0.2;
    transform: scale(0.95);
  }
}

.m-blinkingEllipsis__container {
  span {
    display: inline-block;
    height: 8px;
    width: 8px;
    margin: 0 6px;
    border-radius: 50%;
    animation-name: blinkingEllipsis;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    @include m-theme() {
      background-color: themed($m-textColor--tertiary);
    }
    &:nth-child(2) {
      animation-delay: 0.2s;
    }
    &:nth-child(3) {
      animation-delay: 0.4s;
    }
  }
}

// ***************************************************

@keyframes shimmer--text {
  0% {
    background-position: -100% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

span.m-animation__shimmer--text {
  @include m-theme() {
    color: rgba(themed($m-black), 0.1);

    background: -webkit-gradient(
      linear,
      left top,
      right top,
      from(themed($m-textColor--secondary)),
      to(themed($m-textColor--secondary)),
      color-stop(0.3, themed($m-aqua)),
      color-stop(0.6, #90edf3),
      color-stop(0.8, themed($m-aqua))
    );
    background-color: themed($m-textColor--secondary);
    background-size: 30px 150%;
    background-repeat: no-repeat;
    background-position: -100% 0;

    animation-name: shimmer--text;
    animation-duration: 1.4s;
    animation-iteration-count: 1;
    animation-delay: 0.6s;

    -webkit-background-clip: text;
    -moz-background-clip: text;
  }
}
// ***************************************************

@keyframes shimmer--icon {
  0% {
    background-position: 150% 0;
  }

  100% {
    background-position: -150% 0;
  }
}

@keyframes pulse--icon {
  0% {
    transform: scale(1);
    background-position: 150% 0;
  }
  40% {
    transform: scale(1.1);
  }
  100% {
    background-position: -150% 0;
  }
}

.m-animation__shimmer--icon > * {
  @include m-theme() {
    color: rgba(themed($m-black), 0.1);

    background: -webkit-gradient(
      linear,
      left top,
      right top,
      from(themed($m-textColor--secondary)),
      to(themed($m-textColor--secondary)),
      color-stop(0.3, themed($m-aqua)),
      color-stop(0.6, #90edf3),
      color-stop(0.8, themed($m-aqua))
    );
    background-color: themed($m-textColor--secondary);
    background-size: 30px 150%;
    background-repeat: no-repeat;
    background-position: -200% 0;
  }

  animation-name: shimmer--icon;
  animation-duration: 0.6s;
  animation-iteration-count: 1;
  animation-delay: 0.7s;
  @media screen and (max-width: $max-mobile) {
    background: none;
    animation-name: pulse--icon;
    animation-duration: 1s;
    animation-delay: 0.5s;
  }
}<commit_msg>Shimmer animation repeats every 5s<commit_after>@import 'themes';
@import 'defaults';

.m-pulsating--small {
  box-shadow: 0 0 0 red;
  animation: pulse--small 1.5s infinite;
}

.m-pulsating--big {
  box-shadow: 0 0 0 red;
  animation: pulse--big 2s infinite;
}

@keyframes pulse--small {
  20% {
    box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.6);
  }
  99% {
    box-shadow: 0 0 0 7px rgba(244, 67, 54, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
  }
}

// ***************************************************

@keyframes pulse--big {
  0% {
    box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(244, 67, 54, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
  }
}

// ***************************************************

@keyframes blinkingEllipsis {
  0% {
    opacity: 0.2;
  }
  20% {
    opacity: 1;
    transform: scale(1.02);
  }
  100% {
    opacity: 0.2;
    transform: scale(0.95);
  }
}

.m-blinkingEllipsis__container {
  span {
    display: inline-block;
    height: 8px;
    width: 8px;
    margin: 0 6px;
    border-radius: 50%;
    animation-name: blinkingEllipsis;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    @include m-theme() {
      background-color: themed($m-textColor--tertiary);
    }
    &:nth-child(2) {
      animation-delay: 0.2s;
    }
    &:nth-child(3) {
      animation-delay: 0.4s;
    }
  }
}

// ***************************************************

@keyframes shimmer--text {
  0% {
    background-position: -100% 0;
  }

  21% {
    background-position: 200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

span.m-animation__shimmer--text {
  @include m-theme() {
    color: rgba(themed($m-black), 0.1);

    background: -webkit-gradient(
      linear,
      left top,
      right top,
      from(themed($m-textColor--secondary)),
      to(themed($m-textColor--secondary)),
      color-stop(0.3, themed($m-aqua)),
      color-stop(0.6, #90edf3),
      color-stop(0.8, themed($m-aqua))
    );
    background-color: themed($m-textColor--secondary);
    background-size: 30px 150%;
    background-repeat: no-repeat;
    background-position: -100% 0;

    animation-name: shimmer--text;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-delay: 0.6s;

    -webkit-background-clip: text;
    -moz-background-clip: text;
  }
}
// ***************************************************

@keyframes shimmer--icon {
  0% {
    background-position: 150% 0;
  }
  12% {
    background-position: -150% 0;
  }
}

@keyframes shimmerPulse--icon {
  0% {
    transform: scale(1);
    background-position: 150% 0;
  }
  10% {
    transform: scale(1.1);
  }
  20% {
    background-position: -150% 0;
    transform: scale(1);
  }
}

.m-animation__shimmer--icon > * {
  @include m-theme() {
    color: rgba(themed($m-black), 0.1);

    background: -webkit-gradient(
      linear,
      left top,
      right top,
      from(themed($m-textColor--secondary)),
      to(themed($m-textColor--secondary)),
      color-stop(0.3, themed($m-aqua)),
      color-stop(0.6, #90edf3),
      color-stop(0.8, themed($m-aqua))
    );
    background-color: themed($m-textColor--secondary);
    background-size: 30px 150%;
    background-repeat: no-repeat;
    background-position: -200% 0;
  }

  animation-name: shimmer--icon;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-delay: 0.6s;
  @media screen and (max-width: $max-mobile) {
    background: none;
    animation-name: shimmerPulse--icon;
    animation-duration: 5s;
    animation-delay: 0.6s;
  }
}
{'fraction_non_alphanumeric': 0.2136502641089797, 'fraction_numerical': 0.0619961078676675, 'mean_word_length': 2.6320040383644625, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, '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': '4107195', 'n_tokens_mistral': 3041, 'n_tokens_neox': 2657, 'n_words': 538}