///
/// Atmosphere by Pixelarity
/// pixelarity.com | hello@pixelarity.com
/// License: pixelarity.com/license
///

/* Wrapper */

	/// Sets the colors of the wrapper's top/bottom edges.
	/// @param {string} $color Color.
	@mixin wrapper-edges-color($color: black) {
		&:before, &:after {
			background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><polygon points="0,0 0,100 100,100" style="fill:#{$color};" /></svg>');
		}
	}

	.wrapper {
		@include padding(6em, 0);
		@include wrapper-edges-color(_palette(bg));
		position: relative;

		> .inner {
			margin: 0 auto;
			max-width: 75em;
			width: calc(100% - 4em);
		}

		&:before, &:after {
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 6em;
			left: 0;
			position: absolute;
			width: 100%;
		}

		&:before {
			@include vendor('transform', 'translateY(-100%)');
			content: '';
			top: 0;
		}

		&.alt {
			padding-bottom: 1em;

			&:after {
				@include vendor('transform', 'translateY(100%) rotate(180deg)');
				bottom: 0;
				content: '';
			}
		}

		&.style1 {
			@include color(accent1);
			@include wrapper-edges-color(_palette(accent1, bg));
		}

		&.style2 {
			@include color(accent2);
			@include wrapper-edges-color(_palette(accent2, bg));
		}

		@include breakpoint('<=large') {
			@include padding(5em, 0);

			&:before, &:after {
				height: 4em;
			}
		}

		@include breakpoint('<=medium') {
			@include padding(4em, 0);

			&:before, &:after {
				height: 3em;
			}
		}

		@include breakpoint('<=small') {
			@include padding(3em, 0);

			> .inner {
				width: calc(100% - 3em);
			}

			&:before, &:after {
				height: 2em;
			}

			&.alt {
				padding-bottom: 0;
			}
		}
	}