@import "compass/css3/border-radius";

/**
  Misc utils
*/

@mixin absolutely($top, $left, $bottom, $right) {
  position: absolute;
  top: $top;
  left: $left;
  bottom: $bottom;
  right: $right;
}

@mixin absolutely-all() {
  @include absolutely(0, 0, 0, 0);
}

/**
  Use icon-fix to correctly vertical align SS-pika icons

  Deprecated: Use icon-fix-rel
*/
@mixin icon-fix {
  position: relative;
  top: 2px;
}

/**
  Icon fix relative to the font-size
*/
@mixin icon-fix-rel {
  position: relative;
  top: em(2);
}

/**
  Some icons, e.g. dropdown icon needs to be a bit lower
*/
@mixin dropdown-icon-fix {
 @include icon-fix-more;
}

@mixin icon-fix-more {
  position: relative;
  top: 3px;
}

/**
  Round notification badge
*/
@mixin badge($size) {
  width: $size;
  height: $size;
  line-height: $size - 1px;
  @include border-radius($size/2);
  text-align: center;
}

@mixin ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/**
  Include this mixin to make area without content clickable in IE.

  See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie
*/
@mixin clickable-area-ie {
  background-image: url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
}