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


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

=flex($justify: space-between, $alignItem: initial)
  display: -webkit-box      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox      /* TWEENER - IE 10 */
  display: -webkit-flex     /* NEW - Chrome */
  display: flex



  -moz-justify-content: $justify
  -ms-justify-content: $justify
  -webkit-justify-content: $justify
  justify-content: $justify

  -moz-align-items: $alignItem
  -ms-align-items: $alignItem
  -webkit-align-items: $alignItem
  align-items: $alignItem