// -----------------------------------------------------------------------------
//  These classes set up the architecture for our unicode icons
// -----------------------------------------------------------------------------


// -----------------------------------------------------------------------------
//  Icon sizes

%icon
  display: block
  background-repeat: no-repeat

%small-icon  
  @extend %icon
  width: 16px
  height: 16px

%regular-icon
  @extend %icon
  width: 32px
  height: 32px

// -----------------------------------------------------------------------------
// Helper extends for positioning icons at the horizontal extremes of an 
// element
// -----------------------------------------------------------------------------

%left-icon
  @extend %relative
  &:before
    @extend %benton-regular
    @extend %absolute-left
    @extend %small-icon
    pointer-events: none
    display: block

%right-icon
  @extend %relative
  &:after
    @extend %benton-regular
    @extend %absolute-right
    @extend %small-icon
    pointer-events: none
    display: block

// -----------------------------------------------------------------------------
// Hidden text with Icon
//
// When you want to have the element text for accessibility reasons, but want 
// it hidden: use either %left-icon or %right-icon and extend with one of the 
// below classes


%left-icon--hidden-text
  text-indent: -999em
  &:before
    text-indent: 0

%right-icon--hidden-text
  @extend %visually-hide
  &:after
    text-indent: 0



// -----------------------------------------------------------------------------
//  These classes set up the architecture for our unicode icons
// -----------------------------------------------------------------------------


// -----------------------------------------------------------------------------
//  Icon sizes


%small-icon  
  width: 16px
  height: 16px

%regular-icon
  width: 32px
  height: 32px

// -----------------------------------------------------------------------------
// Helper extends for positioning icons at the horizontal extremes of an 
// element
// -----------------------------------------------------------------------------

%left-icon
  position: relative
  &:before
    @extend %small-icon
    font-family: 'bentonsansregular'
    position: absolute
    left: 0
    display: block
    pointer-events: none

%right-icon
  position: relative
  &:after
    @extend %small-icon
    font-family: 'bentonsansregular'
    position: absolute
    right: 0
    display: block
    pointer-events: none

// -----------------------------------------------------------------------------
// Hidden text with Icon
//
// When you want to have the element text for accessibility reasons, but want 
// it hidden: use either %left-icon or %right-icon and extend with one of the 
// below classes


%left-icon--hidden-text
  text-indent: -999em
  &:before
    text-indent: 0

%right-icon--hidden-text
  @extend %visually-hide
  &:after
    text-indent: 0



Remove extends from icon setup
Remove extends from icon setup
