icon.css

.icon {
  display: inline-block;
  font-size: 0.875rem;
  width: 1em;
  height: 1em;
  color: var(--color-main-fg);
  transition: all 0.2s;
}

.icon.type,
.icon.data-constructor {
  color: var(--color-icon-type);
}

.icon.test {
  color: var(--color-icon-test);
}

.icon.term {
  color: var(--color-icon-term);
}

.icon.ability,
.icon.ability-constructor {
  color: var(--color-icon-ability);
}

.icon.doc {
  color: var(--color-icon-doc);
}

.icon.patch {
  color: var(--color-icon-patch);
}

.icon.animate.search .search-shine,
.icon.animate.search .search-shine-trail-1,
.icon.animate.search .search-shine-trail-2,
.icon.animate.search .search-shine-trail-3 {
  animation: spin 2s var(--anim-elastic) infinite;
  transform-origin: 6px 6px;
  will-change: transform;
}

.icon.animate.search .search-shine {
  fill: var(--color-icon-1, currentColor);
  animation-delay: var(--icon-animation-delay, 0s);
}

.icon.animate.search .search-shine-trail-1 {
  fill: var(--color-icon-2, var(--color-transparent, transparent));
  animation-delay: calc(0.1s + var(--icon-animation-delay, 0s));
  transition-delay: var(--icon-transition-delay, 0s);
}

.icon.animate.search .search-shine-trail-2 {
  fill: var(--color-icon-3, var(--color-transparent, transparent));
  animation-delay: calc(0.2s + var(--icon-animation-delay, 0s));
  transition-delay: var(--icon-transition-delay, 0s);
}

.icon.animate.search .search-shine-trail-3 {
  fill: var(--color-icon-4, var(--color-transparent, transparent));
  animation-delay: calc(0.3s + var(--icon-animation-delay, 0s));
  transition-delay: var(--icon-transition-delay, 0s);
}