// 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 {
  &:active {
    @include transform(translateY(2px));
  }
}