@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);
}

// Accessible focus indicator. Use on any custom-built interactive element
// (elements with role="button"/tabindex, native button/a that need a consistent
// ring) so keyboard users get a visible focus state. Only shows for keyboard
// focus (:focus-visible), never on mouse/touch.
@mixin focus-ring($offset: 2px, $color: var(--ion-color-primary, #7026df)) {
  &:focus {
    outline: none;
  }

  &:focus-visible {
    outline: pxToRem(2) solid $color;
    outline-offset: $offset;
    border-radius: inherit;
  }
}

@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;
  }
}