/*------------------------------------*\
  #VISUALLYHIDDEN MIXIN
\*------------------------------------*/

@mixin visuallyhidden($focusable: true){
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  
  @if ($focusable == true){
    &:focus {
      position: relative;
      overflow: visible;
      clip: auto;
      height: auto;
      width: auto;
    }
  }
}

%visuallyhidden {
  @include visuallyhidden();
}