@import "compass/layout/stretching";
@import "compass/utilities";
@import "compass/css3";

// XXXVH: use this position mixins instead of "pos"
@mixin position($args){
  $top:nth($args, 1);
  $right:nth($args, 2);
  $bottom:nth($args, 3);
  $left:nth($args, 4);

  @if($top != ''){top:$top;}
  @if($right != ''){right:$right;}
  @if($bottom != ''){bottom:$bottom;}
  @if($left != ''){left:$left;}
}
@mixin absolute($args){
  position:absolute;
  @include position($args);
}
@mixin fixed($args){
  position:fixed !important; //dirty
  @include position($args);
}
@mixin relative($args){
  position:relative;
  @include position($args);
}


//
// positioning helper mixin
// compass -> stretch not support empty values
//
// @deprecated
@mixin pos($top, $right, $bottom, $left){
  position:absolute;

  @if($top != ''){top:$top;}
  @if($right != ''){right:$right;}
  @if($bottom != ''){bottom:$bottom;}
  @if($left != ''){left:$left;}
}
@mixin noUserSelect(){
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

// frontend
@mixin frontendContainerStyle(){
  color:$lightFontColor;
  background-color:darken($contentColor, 60%); //IE8 & 9 fallback
  background-color:rgba(0,0,0,0.8);
}
@mixin smartphones(){
  @media only screen
  and (min-width : 320px)
  and (max-width : 600px)
  {
    @content;
  }
}
@mixin desktops(){
  @media only screen
  and (min-width : 601px) {
    @content;
  }
}

@mixin bp-large {
  @media only screen and (max-width: 60em) {
    @content;
  }
}

@mixin bp-medium {
  @media only screen and (max-width: 40em) {
    @content;
  }
}

@mixin bp-small {
  @media only screen and (max-width: 30em) {
    @content;
  }
}

@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

%clearfix {
  *zoom: 1;
  &:before, &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}