//
// Pulse
//


// Base
.pulse {
  position: relative;

  .pulse-ring {
    display: block;
    border-radius: 40px;
    height: 40px;
    width: 40px;
    position: absolute;
    top: 2px;
    left: 2px;
    animation: animation-pulse 3.5s ease-out;
    animation-iteration-count: infinite;
    opacity: 0;
    border-width: 2px;
    border-style: solid;
    border-color: $gray-300;

    @include for-ie11 {
      top: 2px;
      left: 2px;
    }
  }

  // Theme Colors
  @each $name, $color in $theme-colors {
    &.pulse-#{$name} {
      .pulse-ring {
        border-color: rgba($color, 0.75);
      }
    }
  }
}


@keyframes animation-pulse {
  0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
  60% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
  65% {opacity: 1;}
  100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}