/**
 * This code is based on CSS gram:
 * https://github.com/una/CSSgram/tree/master
 *
 * Due to the packaging options available, the source has been duplicated and
 * adapted here to best fit our specific needs.
 */

/* From https://github.com/una/CSSgram/blob/0.1.12/source/scss/_shared.scss */
@mixin pseudo-elem {
	content: "";
	display: block;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	position: absolute;
	pointer-events: none;
}

@mixin filter-base {
	position: relative;

	img {
		width: 100%;
		z-index: 1;
	}

	&::before {

		@include pseudo-elem;
		z-index: 2;
	}

	&::after {

		@include pseudo-elem;
		z-index: 3;
	}
}

/**
 * 1977
 * From https://github.com/una/CSSgram/blob/0.1.12/source/scss/1977.scss
 */
@mixin gram1977( $filters... ) {

	@include filter-base;
	filter: contrast(1.1) brightness(1.1) saturate(1.3) $filters;

	&::after {
		background: rgba(243, 106, 188, 0.3);
		mix-blend-mode: screen;
	}

	@content;
}

/*
 * Clarendon
 * From https://github.com/una/CSSgram/blob/0.1.12/source/scss/clarendon.scss
 */
@mixin clarendon( $filters... ) {

	@include filter-base;
	filter: contrast(1.2) saturate(1.35) $filters;

	&::before {
		background: rgba(127, 187, 227, 0.2);
		mix-blend-mode: overlay;
	}

	@content;
}

/**
 * Gingham
 * From https://github.com/una/CSSgram/blob/0.1.12/source/scss/gingham.scss
 */
@mixin gingham( $filters... ) {

	@include filter-base;
	filter: brightness(1.05) hue-rotate(-10deg) $filters;

	&::after {
		background: rgb(230, 230, 250);
		mix-blend-mode: soft-light;
	}

	@content;
}
