/*
 * Акцент нового раздела хитмапов.
 * Геометрию ссылки намеренно не задаём: отступы, высота и разделитель
 * наследуются от штатных строк списка серверов.
 */
@keyframes automix-hitmap-nav-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.extra-stats .extra-nav ul > li.automix-hitmap-nav-item {
  position: relative;
  border-left-color: rgba(68, 218, 229, .56) !important;
  background: linear-gradient(90deg,
    rgba(27, 161, 177, .17) 0%,
    rgba(31, 102, 132, .08) 52%,
    rgba(13, 29, 45, 0) 100%) !important;
}

.extra-stats .extra-nav ul > li.automix-hitmap-nav-item:hover,
.extra-stats .extra-nav ul > li.automix-hitmap-nav-item.active {
  border-left-color: rgba(104, 242, 231, .92) !important;
  background: linear-gradient(90deg,
    rgba(30, 188, 196, .27) 0%,
    rgba(42, 112, 145, .13) 58%,
    rgba(13, 29, 45, .02) 100%) !important;
}

.extra-stats .extra-nav .automix-hitmap-nav-link {
  font-weight: 700 !important;
}

.extra-stats .extra-nav .automix-hitmap-nav-icon,
.extra-stats .extra-nav .automix-hitmap-nav-text {
  display: inline-block;
  background-image: linear-gradient(90deg,
    #37dbe7 0%,
    #70f2ca 25%,
    #ffe18a 50%,
    #66c9ff 75%,
    #37dbe7 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  animation: automix-hitmap-nav-flow 7s ease-in-out infinite;
  will-change: background-position;
}

.extra-stats .extra-nav .automix-hitmap-nav-icon {
  margin-right: 8px;
  font-size: 16px;
  vertical-align: -1px;
  filter: drop-shadow(0 0 5px rgba(50, 219, 230, .24));
}

@media (prefers-reduced-motion: reduce) {
  .extra-stats .extra-nav .automix-hitmap-nav-icon,
  .extra-stats .extra-nav .automix-hitmap-nav-text {
    animation: none;
    background-position: 45% 50%;
  }
}