@mixin clearfix {
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  };
}

/* ___ rounded ___ */

@mixin rounded($side, $radius: 10px, $important: false) {
  @if $important == true {
    $important: !important; }
  @else {
    $important: ""; }

  border-#{$side}-radius: $radius unquote($important);
  -moz-border-radius-#{$side}: $radius unquote($important);
  -webkit-border-#{$side}-radius: $radius unquote($important);
}

@mixin border-rounded($vert, $horz, $radius, $important: false) {
  @if $important == true {
    $important: !important; }
  @else {
    $important: ""; }

  border-#{$vert}-#{$horz}-radius: $radius unquote($important);
  -moz-border-radius-#{$vert}#{$horz}: $radius unquote($important);
  -webkit-border-#{$vert}-#{$horz}-radius: $radius unquote($important);
}

@mixin full-rounded($radius: 10px) {
  border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

/* ___ box shadow ___ */

@mixin box-shadow($hoffset, $voffset, $depth, $color) {
  box-shadow: $hoffset $voffset $depth $color;
  -moz-box-shadow: $hoffset $voffset $depth $color;
  -webkit-box-shadow: $hoffset $voffset $depth $color;
}

@mixin box-shadow-with-inset($color_top, $color_bottom: $color_top, $important: false) {
  $color_bottom: $color_top !default;

  @if $important == true {
    $important: " !important"; }
  @else {
    $important: ""; }

  box-shadow: inset 0 1px 0 0 $color_top, 0 1px 0 0 $color_bottom unquote($important);
  -moz-box-shadow: inset 0 1px 0 0 $color_top, 0 1px 0 0 $color_bottom unquote($important);
  -webkit-box-shadow: inset 0 1px 0 0 $color_top, 0 1px 0 0 $color_bottom unquote($important);
}

@mixin no-box-shadow($important: false) {
  @if $important == true {
    $important: " !important"; }
  @else {
    $important: ""; }

  box-shadow: none $important;
  -moz-box-shadow: none $important;
  -webkit-box-shadow: none $important;
}

@mixin popup-box {
  @include full-rounded(4px);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.17), 3px 3px 5px 0 rgba(0, 0, 0, 0.41);
  -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.17), 3px 3px 5px 0 rgba(0, 0, 0, 0.41);
  -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.17), 3px 3px 5px 0 rgba(0, 0, 0, 0.41);
}

/* ___ others ___ */

@mixin reset {
  padding: 0px;
  margin: 0px;
  list-style: none;

  a {
    text-decoration: none;
  }
}

@mixin absolute-position($vside, $vvalue, $hside, $hvalue, $display: block) {
  display: $display;
  position: absolute;
  #{$vside}: $vvalue;
  #{$hside}: $hvalue;
}

@mixin linear-background-gradient($from, $to) {
  background: mix($from, $to);
  background: -moz-linear-gradient(0% 100% 90deg, $to, $from);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
}

@mixin icon($where, $width, $height, $enabled: false, $top: 0, $left: 0) {
  position: relative;
  width: $width;
  height: $height;
  line-height: $height + 1;
  @if $enabled == true {
    background-position: -#{$width} $where; }
  @else {
    background-position: 0 $where; }
  top: $top;
  left: $left;
}