@mixin calc($property, $expression) { 
  #{$property}: -moz-calc(#{$expression});  
  #{$property}: -webkit-calc(#{$expression}); 
  #{$property}: calc(#{$expression}); 
}

@mixin font-smoothing($val: antialiased) {
  -webkit-font-smoothing: $val;
  -moz-font-smoothing: $val;
  -ms-font-smoothing: $val;
}

// New flexbox -----
@mixin flexbox {
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-box !important;
  display: box !important;
}

@mixin flex-center-center {
  @include box-orient(vertical);
  @include box-align(center);
  @include box-pack(center);
}

@mixin flex-left-center {
  @include box-orient(vertical);
  @include box-align(left);
  @include box-pack(center);
}

@mixin flex-right-center {
  @include box-orient(vertical);
  @include box-align(end);
  @include box-pack(center);
}

@mixin display-flex() {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
}

@mixin justify-content($val) {
  -webkit-justify-content: $val;
  -moz-justify-content: $val;
  -ms-justify-content: $val;
  justify-content: $val;
}

@mixin align-items($val) {
  -webkit-align-items: $val;
  -moz-align-items: $val;
  -ms-align-items: $val;
  align-items: $val;
}

@mixin align-self($val) {
  -webkit-align-self: $val;
  -moz-align-self: $val;
  align-self: $val;
}

@mixin flex-direction($val) {
  -webkit-flex-direction: $val;
  -moz-flex-direction: $val;
  -ms-flex-direction: $val;
  flex-direction: $val;
}

@mixin order($val) {
  -webkit-order: $val;
  -moz-order: $val;
  -ms-order: $val;
  order: $val;
}

@mixin flex($val) {
  -webkit-flex: $val;
  -moz-flex: $val;
  -ms-flex: $val;
  flex: $val;
}

// -----

@mixin filter($val) {
  -webkit-filter: $val;
  -moz-filter: $val;
  -ms-filter: $val;
  filter: $val;
}

@mixin highlight-color($color: $brand-yellow) {
  -webkit-tap-highlight-color: $color;
  -moz-tap-highlight-color: $color;
  -ms-tap-highlight-color: $color;
  tap-highlight-color: $color;
}

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

@mixin width-max-content() {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: -ms-max-content;
  width: max-content;
}

@mixin width-min-content() {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: -ms-min-content;
  width: min-content;
}

@mixin width-fit-content() {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: -ms-fit-content;
  width: fit-content;
}

@mixin mask($val) {
  -webkit-mask: $val;
  -moz-mask: $val;
  -ms-mask: $val;
  mask: $val;
}

@mixin mask-image($val) {
  -webkit-mask-image: $val;
  -moz-mask-image: $val;
  -ms-mask-image: $val;
  mask-image: $val;
}

@mixin mask-position($val) {
  -webkit-mask-position: $val;
  -moz-mask-position: $val;
  -ms-mask-position: $val;
  mask-position: $val;
}

@mixin mask-size($val) {
  -webkit-mask-size: $val;
  -moz-mask-size: $val;
  -ms-mask-size: $val;
  mask-size: $val;
}


