@mixin focused-element
  border-color: desaturate($brand-primary, 10%)
  outline: 0
  box-shadow: inset 0 1px 1px rgba($black, .075), inset 0 0 grid-row(.4) rgba(lighten(desaturate($brand-primary, 25%), 10%),.3)


@mixin attribute-focus
  +transition(border-color ease-in-out .25s, box-shadow ease-in-out .25s)
  &:focus
    +focused-element

// Shake animation
+keyframes(shake1)
  0%
    transform: translate3d(.5px, .25px, 0)
  10%
    transform: translate3d(-.25px, -.5px, 0)
  20%
    transform: translate3d(-.75px, 0px, 0)
  30%
    transform: translate3d(0px, .5px, 0)
  40%
    transform: translate3d(.25px, -.25px, 0)
  50%
    transform: translate3d(-.25px, .5px, 0)
  60%
    transform: translate3d(-.75px, .25px, 0)
  70%
    transform: translate3d(.5px, .25px, 0)
  80%
    transform: translate3d(-.25px, -.25px, 0)
  90%
    transform: translate3d(.5px, .5px, 0)
  100%
    transform: translate3d(.25px, -.5px, 0)

+keyframes(shake2)
  0%
    transform: translate3d(.25px, -.5px, 0)
  10%
    transform: translate3d(.5px, .5px, 0)
  20%
    transform: translate3d(-.25px, -.25px, 0)
  30%
    transform: translate3d(.5px, .25px, 0)
  40%
    transform: translate3d(-.75px, .25px, 0)
  50%
    transform: translate3d(-.25px, .5px, 0)
  60%
    transform: translate3d(.25px, -.25px, 0)
  70%
    transform: translate3d(0px, .5px, 0)
  80%
    transform: translate3d(-.75px, 0px, 0)
  90%
    transform: translate3d(-.25px, -.5px, 0)
  100%
    transform: translate3d(.5px, .25px, 0)