/**
 * 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 _1977( $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;
}
