// box-shadow
@mixin box-shadow($value...){
  -webkit-box-shadow:  $value;
  -moz-box-shadow:  $value;
  box-shadow:  $value;
}

// border-radius
@mixin border-radius($corner...){
  -webkit-border-radius: $corner;
  -moz-border-radius: $corner;
  border-radius: $corner;
}

@mixin clearfix(){
  &:after{
    content: '';
    display: block;
    clear: both;
    visibility: hidden;
  }
}

@mixin transform($value){
  -webkit-transform: $value;
  -moz-transform: $value;
  -ms-transform: $value;
  -o-transform: $value;
  transform: $value;
}

@mixin transition($value...){
  -webkit-transition: $value;
  -moz-transition: $value;
  -ms-transition: $value;
  -o-transition: $value;
  transition: $value;
}

@mixin animation($value){
  animation: $value;
  -webkit-animation: $value;
}

@mixin linear-gradient($direct, $colors){
  background: linear-gradient($direct, $colors);
  background: -webkit-linear-gradient($direct, $colors);
  background: -moz-linear-gradient($direct, $colors);
}

@mixin backdrop-filter($value){
  backdrop-filter: $value ;
  -webkit-backdrop-filter: $value;
}


/*
  Extension
*/

.unselectable {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.btn-like{
  cursor: pointer;
  &:active{
    @include transform(translateY(2px))
  }
}