.shinyBar {
  width: 100%;
  > div {
    height: 4px;
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  &.active {
    background: #26a304;
  }
  &.onHold {
    background: #ff8800;
  }
  &.callEnd {
    background: #9e9e9e;
  }

  &.ringing {
    &::before {
      content: '';
      top: 0;
      transform: translateX(100%);
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 1;
      animation: slide 1s infinite;

      background: linear-gradient(
        to right,
        rgba(8, 255, 0, 0) 0%,
        rgba(8, 255, 0, 0.8) 50%,
        rgba(128, 186, 232, 0) 99%,
        rgba(125, 185, 232, 0) 100%
      );
    }
  }
}

@keyframes slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}