/*
 * Lo-fi
 *
 */
@import 'shared';

// mixin to extend lofi filter
// @mixin lofi
// @param $filters... {filter} - Zero to many css filters to be added
// @example
//   img {
//     @include lofi;
//   }
//   or
//   img {
//     @include lofi(blur(2px));
//   }
//   or
//   img {
//     @include lofi(blur(2px)) {
//       /*...*/
//     };
//   }
@mixin lofi($filters...) {
  @include filter-base;
  filter: saturate(1.1) contrast(1.5) $filters;

  &::after {
    background: radial-gradient(circle, transparent 70%, rgb(34, 34, 34) 150%);
    mix-blend-mode: multiply;
  }

  @content;
}

// lofi Instagram filter
%lofi,
.lofi {
  @include lofi;
}