// 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
//
// @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(){
  user-select: none;
}

// frontend
@mixin frontendContainerStyle() {
  // do not use this; add toolBarColors class to your element, and / or optionally use
  // opacity: $toolBarOpacity
  background-color: $toolBarBackgroundColor;
  color: $toolBarFontColor;
  opacity: $toolBarOpacity;
}
@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;
  }
}
