$blue: #3f8fba;
$red: red;
$background: rgb(252, 252, 252);

$speed: 0.1s;
$easing: linear;

@mixin mobile-box {
  margin: 10px;
  padding: 0 15px;
  border: 1px #999 solid;
  -moz-border-radius: 15px;
  border-radius: 15px;
}

@mixin border-radius($tl, $tr:$tl, $br:$tl, $bl:$tl){
  -moz-border-radius: $tl $tr $br $bl;
  -webkit-border-radius: $tl $tr $br $bl;
  border-radius: $tl $tr $br $bl;
}

@mixin box-shadow($left, $top, $blur, $color:#000){
  -webkit-box-shadow: $left $top $blur $color; 
  -moz-box-shadow: $left $top $blur $color; 
  box-shadow: $left $top $blur $color; 
}

@mixin linear-gradient($from, $to, $start:0%, $end:100%){
  background: mix($from,$to);

  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=$from, endColorstr=$to);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#{$from}, endColorstr=#{$to})";
  
  background: -webkit-gradient(linear, 0% $start, 0% $end, from($from), to($to));
  background: -moz-linear-gradient(top, $from $start, $to $end);
}

@mixin opacity($val){
  filter: alpha(opacity= $val* 100);
  -moz-opacity: $val;
  -khtml-opacity: $val;
  opacity: $val;
}

@mixin user-select($val){
  -webkit-user-select: $val;
  -moz-user-select: $val;
}

@mixin transition($type, $speed:$speed, $easing:$easing){
  -webkit-transition: $type $speed $easing;
  -moz-transition: $type $speed $easing;
  -o-transition: $type $speed $easing;
  transition: $type $speed $easing;
}