//** Susy Utilities **//

// An extension of the Compass Core Utilities
@import "compass/utilities";

// Apply to you container element(s) to show a grid image.
//  - You need to supply the image. Susy can't do everything.
@mixin show-grid($src) {
  background: {
    image: image-url($src);
    repeat: repeat;
    position: $side-gutter-width 0; }; }

// Brings IE in line with inline-block display
//  - Using hacks if called automatically because $hacks == true
//  - Or not, if you call it from ie.sass because $hacks == false
@mixin ie-inline-block($hack: false) {
  @if $hack {
    /* ugly hacks for IE6-7 */
    #display: inline;
    // fixes alignment against native input/button on IE6
    #vertical-align: auto;
    /* end ugly hacks */ }
  @else {
    display: inline;
    // fixes alignment against native input/button on IE6
    vertical-align: auto; } }

// An override for compass inline-block that lets you take advantage
// of Susys $hacks constant. if true, hacks. if false, use ie-inline-block
// to help ie along in your ie.sass
@mixin inline-block {
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  display: inline-block;
  vertical-align: middle;
  @if $hacks {
    @include ie-inline-block(true); } }

// An inline-block list that works in IE
// For those awkward moments when a floated horizontal list just wont cut it
// NOTE: If global !hacks == false:
//  - you'll need to fix list items in ie.sass with +ie-inline-block
@mixin inline-block-list($hpad: 0) {
  @include horizontal-list-container;
  li {
    @include no-bullet;
    @include inline-block;
    white-space: no-wrap;
    padding: {
      left: $hpad;
      right: $hpad; }; } }

// Hide an element from the viewport, but keep it around for accessability
@mixin hide {
  position: absolute;
  top: -9999em; }

// Apply to skip-to-content accessibility links that will appear on focus.
//  - Set the location arguments if you care where it appears.
@mixin skip-link($t: 0, $r: false, $b: false, $l: false) {
  @include hide;
  display: block;
  &:focus {
    @if $t {
      top: $t; }
    @if $r {
      right: $r; }
    @if $b {
      bottom: $b; }
    @if $l {
      left: $l; }
    z-index: 999; } }