@import '../../lib/commonStyles/colors';
$fixed-icon-width: 21px;
$fixed-avatar-width: 35px;
$avatar-basis: 45.5px;

.callIcon {
  display: inline-flex;
  font-size: 22px;
  color: #666;
  width: $fixed-icon-width;
}

@keyframes ringing {
  0% {
    text-shadow: 0px 0px 1px $active;
  }
  100% {
    color: #2ce44d;
    text-shadow: 0px 0px 10px #2ce44d;
  }
}

.activeCall.ringing {
  animation-name: ringing;
  animation-direction: alternate;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
}

.avatar {
  width: $fixed-avatar-width;
  height: $fixed-avatar-width;
  margin-left: auto;
  margin-right: auto;
  color: $primary-color;
  overflow: hidden;
  flex-basis: $avatar-basis;
  .icon {
    display: block;
    font-size: $fixed-avatar-width;
    opacity: 0.3;
  }
}

.newCallIcon {
  width: $fixed-icon-width;
  svg {
    fill: #6a7186;
  }
}
@keyframes newRinging {
  from {
    filter: drop-shadow(0 0 1px $active);
  }
  to {
    fill: #2ce44d;
    filter: drop-shadow(0 0 10px #2ce44d);
  }
}
.activeCall.newRinging {
  animation-name: newRinging;
  animation-direction: alternate;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
}