/*
 *
 * Walden
 *
 */
@import 'shared';

// mixin to extend walden filter
// @mixin walden
// @param $filters... {filter} - Zero to many css filters to be added
// @example
//   img {
//     @include walden;
//   }
//   or
//   img {
//     @include walden(blur(2px));
//   }
//   or
//   img {
//     @include walden(blur(2px)) {
//       /*...*/
//     };
//   }
@mixin walden($filters...) {
  @include filter-base;
  filter: brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6) $filters;

  &::after {
    background: rgb(0, 68, 204);
    mix-blend-mode: screen;
    opacity: .3;
  }

  @content;
}

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