cyb/src/components/SearchItem/styles.module.scss

.containerSearchItem {
  padding: 12px 20px 12px 10px;
  display: flex;
  justify-content: space-between;
  background-color: #000;
  border-radius: 5px;
  margin-bottom: 10px;
}

.containerTextPreview {
  color: #fff;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 0px 10px;
  width: 100%;
}

.customPill {
  padding: 4px;
  width: 4px;
  height: 4px;
  display: flex;
  align-items: center;
  color: "#fff";
  border-radius: 50%;
}

.glow {
    color: #fff;
    text-align: center;
    -webkit-animation: glow 1s ease-in-out infinite alternate;
    -moz-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 1s ease-in-out infinite alternate;
  }

@keyframes glow {
    0% {
      box-shadow: 0 0 2px 0px #fff, 0 0 2px 0px #00b0ff;
    }
    100% {
      box-shadow: 0 0 3px 2px #fff, 0 0 3px 2px #00b8d4, 0 0 4px 2px #00b8d4,
        0 0 5px 2px #00b8d4, 0 0 6px 2px #00b8d4;
    }
  }

.rankVal1 {
    box-shadow: 0 0 3px #ff3d00;
  }
  
  .rankVal2 {
    box-shadow: 0 0 3px #ff9100;
  }
  
  .rankVal3 {
    box-shadow: 0 0 3px #ffea00;
  }
  
  .rankVal4 {
    box-shadow: 0 0 3px #64dd17;
  }
  
  .rankVal5 {
    box-shadow: 0 0 3px #00b0ff;
  }
  
  .rankVal6 {
    box-shadow: 0 0 3px #304ffe;
  }
  
  .rankVal7 {
    box-shadow: 0 0 3px #d500f9;
  }
  
  .rankValDefault {
    box-shadow: 0 0 3px #546e7a;
  }

  .rankVal1:hover {
    box-shadow: 0 0 7px #ff3d00;
  }
  
  .rankVal2:hover {
    box-shadow: 0 0 7px #ff9100;
  }
  
  .rankVal3:hover {
    box-shadow: 0 0 7px #ffea00;
  }
  
  .rankVal4:hover {
    box-shadow: 0 0 7px #64dd17;
  }
  
  .rankVal5:hover {
    box-shadow: 0 0 7px #00b0ff;
  }
  
  .rankVal6:hover {
    box-shadow: 0 0 7px #304ffe;
  }
  
  .rankVal7:hover {
    box-shadow: 0 0 7px #d500f9;
  }
  
  .rankValDefault:hover {
    box-shadow: 0 0 7px #546e7a;
  }