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

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

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

@mixin box-shadow($value) {
  -webkit-box-shadow: $value;
  -o-box-shadow: $value;
  -ms-box-shadow: $value;
  box-shadow: $value;
}

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

@mixin header {
  width: 100%;
  display: flex;
  background: $header-bg-2;
  align-items: center;
  padding: 0.5em;
  margin-bottom: 0.1em;
  border: $title-border;
  border-radius: 1em;
  box-shadow: $title-shadow;
  font-weight: normal;
  font-size: 1em;
}

