.highlight HOVER | CLICK

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300')

body
  background: black
  font-family: 'Open Sans', sans-serif
  display: flex
  flex-direction: column
  justify-content: space-around
  align-items: center
  height: 100vh

// pulse animation
@keyframes pulse
  from
    box-shadow: 0 0 0 0 rgba(3,149,229,.4)
  to
    box-shadow: 0 0 0 45px rgba(3,149,229,0)

// config

$border-width: 1px
$t_dur: .1s
$a_dur: 1s
$blue: #0395E5
$box-width: 200px
$box-height: 60px
$font-size: 15px
$letter-spacing: 3px
$border-radius: 2px // keep below 5px

// highlight styles

.highlight
  position: relative
  width: $box-width
  height: $box-height
  border: 1px solid rgba(white, 0.2)
  border-radius: $border-radius
  line-height: $box-height
  color: white
  text-align: center
  font-size: $font-size
  letter-spacing: $letter-spacing
  cursor: pointer
  user-select: none

  &:before, &:after
    content: ''
    width: 0%
    height: 0%
    position: absolute
    visibility: hidden
    border-radius: $border-radius

  &:before
    border-top: $border-width solid $blue
    border-right: $border-width solid $blue
    transition: width $t_dur ease $t_dur * 3, height $t_dur ease $t_dur * 2, visibility 0s $t_dur * 4
    top: 0
    left: 0

  &:after
    border-left: $border-width solid $blue
    border-bottom: $border-width solid $blue
    bottom: 0
    right: 0
    transition: width $t_dur ease $t_dur, height $t_dur ease, visibility 0s $t_dur * 2

  &:hover
    animation: pulse $a_dur ease-out $t_dur * 4
    color: $blue
    &:before, &:after
      width: 100%
      height: 100%
      visibility: visible
    &:before
      transition: width $t_dur ease, height $t_dur ease $t_dur
    &:after
      transition: width $t_dur ease $t_dur * 2, height $t_dur ease $t_dur * 3, visibility 0s $t_dur * 2

/*
  Ripple effect
  --------------------
  Draws a background radial gradient on the clicked element around the event mouse coordinates,
  then it uses a RAF loop to expand the gradients radius untill it reaches 100%
  
  improvments:
  - get background colour - (convert to hsl ?) - use that as a base with the highlight being lighter or darker
*/

const ripple = el => {
  let d = el.dataset.ripple.split('-'),
     s = 'rgba(3,149,229,0.4)',
     e = 'rgba(3,149,229,1)';
  d[2] = Number(d[2]) + 4;
  el.dataset.ripple = d.join('-');
  el.style.background = `radial-gradient(circle at ${d[0]}px ${d[1]}px, ${s} 0%, ${s} ${d[2]}%, ${e} ${d[2] + 0.1}%)`;
  
  window.requestAnimationFrame(() => {
    if (el.dataset.ripple && d[2] < 100) ripple(el)
  });
};

const start = ev => {
  ev.target.dataset.ripple = `${ev.offsetX}-${ev.offsetY}-0`
  ripple(ev.target);
};

const stop = ev => {
  let el = document.querySelector('[data-ripple]');
  delete el.dataset.ripple;
  el.style.background = 'none';
};

// Events
document.querySelectorAll('.highlight').forEach( el => el.addEventListener( 'mousedown', start ));
document.addEventListener( 'mouseup', stop );