// ----
// PULSE BUTTON (CIRCLE FROM CENTER ON HOVER)
// ----
@mixin pulse-center {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.btn-pulse {
  $height: 2.8em;
  $width: 100px;
  $btn-pulse-color: rgba(#2a65a0, 0.8);
  $btn-pulse-hover-color: #fff;
  $btn-pulse-bg: #f1f1f1;
  $btn-pulse-hover-bg: #3884cd;

  width: $width;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 10px;
  color: $btn-pulse-color;
  border: 1px solid $btn-pulse-color;
  border-radius: 3px;
  transition: color 0.3s 0.1s ease-out;
  background-color: $btn-pulse-bg;

  .wrapper {
    display: inline-block;
    @include pulse-center;
    height: 100%;
    width: $width;
    overflow: hidden;

    .inner {
      display: block;
      @include pulse-center;
      border-radius: 50%;
      width: $width*2;
      height: $width*2;
      // align center horizontally and vertically
      top: 50%;
      left: 50%;
      transition: box-shadow 0.5s ease-out;
      transform: translateX(-50%) translateY(-50%);
    }
  }

  &:hover {
    color: $btn-pulse-hover-color;

    .inner {
      box-shadow: inset 0 0 0 $width rgba($btn-pulse-hover-bg, 0.8);
    }
  }

  &:active {
    top: 1px;
  }

  .text {
    // to move text front
    position: relative;
  }
}