// Survival ✚ Kit

@import "compass/typography/text/replacement";

// Replace an A tag with an a background-image.
// @var $image string path to the image
// @var $inline boolean embed via data.
@mixin image-link($image, $inline:false) {
  @include image-background($image, $inline);
  cursor:pointer;
  @extend .ext-hide-text;
}

// Replace an A tag with an a background-image sprite. You need to provide it with
// the dimentions of the image and the x-pos/y-pos
//
// @var $image string path to the image, inherit is useful.
// @var $height width
// @var $height pixels
// @var $x-pos pixels
// @var $y-pos pixels
// @var $inline boolean embed via data.
@mixin image-sprite-link($image, $width, $height, $x-pos, $y-pos, $inline: false) {
  @include sk-background(transparent, $image, $x-pos, $y-pos, no-repeat, $inline);
  width:$width;
  height:$height;
  @extend .ext-hide-text;
}

// Replace a Header>a tag with a background image. Made specifically for logos.
// @var $image string path to the image
// @var $inline boolean embed via data.
@mixin logo($image, $inline:false) {
  @include no-mp;
  width: image-width($image);
  height: image-height($image);
  a {
    @include image-link($image, $inline);
    &:hover { opacity: 0.7;}
  }
}

// Area for a header link, meant to be used when it inherits a background image.
// This should be invoked on the H1-6 Tag and not in the link, the needed structure is:2
//   <h1><a href=""></a></h1>
@mixin logo-area($width, $height, $debugging: false) {
  @include no-mp;
  width:$width;
  height:$height;
  a {
    @include link-area($width, $height, $debugging);
  }
}

// An area which should be clickable. It's meant to be a low level mixin, you should
// use the alternatuves.
// - debugging enables a background color to know the position.
@mixin link-area($width, $height, $debugging: false) {
  width:$width;
  height:$height;
  @if $debugging {
    @include debug($debugging);
  }
  @extend .ext-hide-text;
}

// Mixin for quickly replacing images for any given element.
// @var $image string path to the image
// @var $inline boolean embed via data.
@mixin image-replace($image, $inline:false) {
  @include image-background($image, $inline);
  @extend .ext-hide-text;
}
@mixin image-replace-url($image, $width, $height) {
  background:transparent url($image) left top no-repeat;
  @include link-area($width, $height);
}

// Just adds the image as a background and sets the width/height accordingly.
// @var $image string path to the image
// @var $inline boolean embed via data.
@mixin image-background($image, $inline:false) {
  @include sk-background(transparent, $image, no-repeat, top, left, $inline);
  width: image-width($image);
  height: image-height($image);
}

// Add a background by passing the exact same parameters as a normal one. With
// one more parameter $inline. Which will use inline-image and add backward
// compatibility to IE7 via *background.
//
// @var $color
// @var $image string can be a path to an image or inherit (will insert tags separately)
// @var $horizontal
// @var $vertical
// @var $repeat
// @var $inline
@mixin sk-background($color, $image, $horizontal, $vertical, $repeat, $inline: false) {
  @if $image == inherit {
    background-color: $color;
    background-repeat: $repeat;
    background-position: $horizontal $vertical;
  } @else {
    @if $inline == true {
      background  : $color inline-image($image) $horizontal $vertical $repeat;
      *background : $color image-url($image) $horizontal $vertical $repeat;
    } @else {
      background: $color image-url($image) $horizontal $vertical $repeat;
    }
  }
}


// Common styles needed by our Image Mixins.
// Depends on Compass.
.ext-hide-text {
  @include hide-text;
  display:block;
  direction: ltr;
  outline:none;
}