@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 .25s ease-in-out, box-shadow .25s ease-in-out

  &:focus
    +focused-element