@keyframes ring {
  0% {
    transform: rotate(-10deg);
  }

  20% {
    transform: rotate(10deg);
  }

  40% {
    transform: rotate(-10deg);
  }

  100% {
    transform: rotate(0);
  }
}

.wrap {
  fill: white;
  position: relative;
  outline: none;
  color: white;
  word-wrap: initial;
  white-space: initial;

  &.active {
    .icon {
      opacity: 1;
    }
  }

  &.is_new {
    .icon {
      animation: ring 1s infinite alternate;
      opacity: 1;

      svg {
        fill: $red;
      }
    }
  }
}

.icon {
  outline: none;
  cursor: pointer;
  opacity: 0.5;
}