mixins.scss

@import './include-media.scss';

@mixin touch {
  /* smartphones, touchscreens */
  @media (hover: none) and (pointer: coarse) {
    @content;
  }
}

@mixin pointer {
  /* mouse, touch pad */
  @media (hover: hover) and (pointer: fine) {
    @content;
  }
}

@mixin opacitySetting($delay: 0s, $duration: 3s) {
  opacity: 0;
  animation: opacitygrow $duration linear;
  animation-delay: $delay;
  animation-fill-mode: forwards;
}

@mixin mobile {
  @include media('screen', '<tablet') {
    @content;
  }
}

@mixin tablet {
  @include media('screen', '<desktop') {
    @content;
  }
}

@mixin desktop {
  @include media('screen', '>=desktop') {
    @content;
  }
}