@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