//************************************** // Animations

@mixin transition

-webkit-transition: 1.0s
-moz-transition: 1.0s
-o-transition: 1.0s
transition: 1.0s

// check out github.com/at-import/animation-studio // for more mixins

@mixin alerted()

&:before 
  content: ''
  position: absolute
  top: 6px 
  right: 6px
  height: 8px 
  width: 8px
  +border-radius(10px)
  background-color: gold

&:after 
  content: ''
  position: absolute
  top: 0 
  right: 0
  height: 20px 
  width: 20px
  +border-radius(20px)
  background-color: transparent
  border: solid gold
  border-width: 2px // animates
  +box-sizing(border-box)
  +animation($name: alertMe)

@keyframes alertMe

// -vendor prefixes omitted for brevity, but should be used in production
from 
  border-width: 3px
  border-color: gold

to 
  border-width: 0
  border-color: rgba(gold, .1)