.g-newsletter {
	// General
	.g-newsletter-headtext {
		margin-bottom: $content-margin;
		padding-bottom: $content-padding;
	}
	.g-newsletter-inputbox,
	.g-newsletter-button {
		input {
			height: 50px;
			border: 1px solid transparent;
			border-radius: 0;
			box-shadow: none;
            font-size: $core-font-size - 0.125;
		}
	}
	.g-newsletter-inputbox {
		input {
			background: darken($base-background, 5%);
			padding: 0 $content-padding;
			margin-bottom: 0;
		}
	}
	.g-newsletter-button {
		input {
			padding: 0 $content-padding;
			margin-bottom: 0;
			@include breakpoint(mobile-only) {
				width: 100%;
			}
		}
	}

	// Layout
	&.g-newsletter-fullwidth {
		width: 100%;
	}
	&.g-newsletter-compact {
		width: 40%;
		.center-block & {
			margin: auto;
		}
		@include breakpoint(desktop-range) {
			width: 50%;
		}
		@include breakpoint(tablet-range) {
			width: 65%;
		}
		@include breakpoint(mobile-only) {
			width: 100%;
		}
	}

	// Style
	&.g-newsletter-stack-fullwidth,
	&.g-newsletter-stack-compact {
		.g-newsletter-inputbox {
			margin-bottom: $content-margin;
		}
	}
	&.g-newsletter-stack-fullwidth {
		.g-newsletter-button {
			input {
				width: 100%;
			}
		}
	}
	&.g-newsletter-rounded {
		.g-newsletter-inputbox,
		.g-newsletter-button {
			input {
				border-radius: 25px;
			}
		}
	}
	&.g-newsletter-aside-wrap,
	&.g-newsletter-aside-compact {
		.g-newsletter-form-wrapper {
			@include display(flex);
		  	@include flex-flow(row wrap);
		  	@include flex-wrap(wrap);
			.g-newsletter-inputbox,
			.g-newsletter-button {
				@include flex(1 1 auto);
				min-width: 0;
				min-height: 0;
				margin: 0 1%;
				@include breakpoint(mobile-only) {
					@include flex(0 1 100%);
					margin: 0;
				}
			}
			.g-newsletter-inputbox {
				width: 73%;
				@include breakpoint(mobile-only) {
					width: 100%;
					margin-bottom: $content-margin;
				}
			}
			.g-newsletter-button {
				width: 23%;
				@include breakpoint(mobile-only) {
					width: 100%;
				}
			}
		}
	}
	&.g-newsletter-aside-wrap {
		.g-newsletter-form-wrapper {
			padding: 5px;
			background: darken($base-background, 5%);
			.g-newsletter-inputbox,
			.g-newsletter-button {
				margin: 0;
				@include breakpoint(mobile-only) {
					@include flex(1 1 auto);
					margin: 0;
				}
				input {
					height: 40px;
				}
			}
			.g-newsletter-inputbox {
				width: 75%;
				@include breakpoint(small-mobile-range) {
					width: 60%;
				}				
			}
			.g-newsletter-button {
				width: 25%;
				@include breakpoint(small-mobile-range) {
					width: 40%;
				}					
				input {
					width: 100%;
				}
			}
		}
		&.g-newsletter-rounded {
			.g-newsletter-form-wrapper {
				border-radius: 25px;
			}
		}
	}
}