@import './media-queries.scss';
@import './variables.scss';
@import './functions.scss';
@import './typography.scss';

@mixin box-shadow-small {
  box-shadow: 0 pxToRem(4) pxToRem(12) addColorOpacity($color-default-shadow, 0.07);
}

@mixin box-shadow-small-top {
  box-shadow: 0 pxToRem(-4) pxToRem(12) addColorOpacity($color-default-shadow, 0.07);
}

@mixin box-shadow-medium {
  box-shadow: pxToRem(3) pxToRem(10) pxToRem(8) addColorOpacity($color-default-shadow, 0.1);
}

@mixin box-shadow-medium-bottom {
  box-shadow: pxToRem(-3) pxToRem(10) pxToRem(8) addColorOpacity($color-default-shadow, 0.1);
}

@mixin box-shadow-large {
  box-shadow: 0 pxToRem(10) pxToRem(16) addColorOpacity($color-default-shadow, 0.08);
}

@mixin box-shadow-large-top {
  box-shadow: 0 pxToRem(-10) pxToRem(16) addColorOpacity($color-default-shadow, 0.07);
}

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

@mixin transform-translate-y-3d($value) {
  -webkit-transform: translate3d(0, $value, 0);
  -moz-transform: translate3d(0, $value, 0);
  -o-transform: translate3d(0, $value, 0);
  -ms-transform: translate3d(0, $value, 0);
  transform: translate3d(0, $value, 0);
}

@mixin fade-in-translateY {
  @keyframes fadeInTranslateY {
    @content;
  }

  @-moz-keyframes fadeInTranslateY {
    @content;
  }

  @-webkit-keyframes fadeInTranslateY {
    @content;
  }

  @-o-keyframes fadeInTranslateY {
    @content;
  }

  @-ms-keyframes fadeInTranslateY {
    @content;
  }
}