.g-newsletter-particle {
    // General
    @include breakpoint(mobile-only) {
        text-align: center;

        .g-title {
            text-align: center;
        }
    }

    .g-newsletter {
        .g-newsletter-headtext {
            margin-bottom: $content-margin;
            padding-bottom: $content-padding;
            @include responsive-font($responsive-font-size + 0.2, $core-font-size, false, false);

            .fa {
                color: $accent-color-1;
                font-size: $core-font-size + 2;
            }
        }

        .g-newsletter-sidetext {
            color: lighten($base-text-color, 65%);
            font-size: $core-font-size;
            margin-top: ($content-margin * 2);

            @include breakpoint(small-mobile-range) {
                margin-right: 0;
                margin-bottom: $content-padding / 2;
            }
        }

        .g-newsletter-inputbox,
        .g-newsletter-button {
            display: inline;
        }

        .g-newsletter-inputbox {
            input {
                margin-bottom: 0.5rem;
                font-size: $core-font-size + 0.35;
                text-align: left;
                padding: ($content-margin + 0.25) ($content-margin * 2.5);
                font-weight: $font-weight-regular;
                background: darken($white, 3%);
                border: 0 none;

                &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
                    color: fadeout($base-text-color, 50%);
                }
                &::-moz-placeholder { /* Firefox 19+ */
                    color: fadeout($base-text-color, 50%);
                }
                &:-ms-input-placeholder { /* IE 10+ */
                    color: fadeout($base-text-color, 50%);
                }
                &:-moz-placeholder { /* Firefox 18- */
                    color: fadeout($base-text-color, 50%);
                }

                @include breakpoint(mobile-only) {
                    margin-bottom: 5px;
                }

                .dir-rtl & {
                    text-align: right;
                }
            }
        }

        .g-newsletter-button {
            .g-newsletter-button-submit {
                white-space: nowrap;
                padding: $content-margin ($content-margin * 2);
                font-size: $core-font-size + 0.25;
                border-radius: $border-radius;

                @include breakpoint(desktop-range) {
                    text-align: center;
                    width: 100%;
                }

                @include breakpoint(tablet-range) {
                    text-align: center;
                    width: 100%;
                }

                @include breakpoint(mobile-only) {
                    width: 100%;
                }
            }

            .g-newsletter-button-icon {
                i {
                    font-size: $core-font-size + 0.25;
                    line-height: $core-line-height;
                    vertical-align: middle;
                    margin-right: 5px;
                }
            }

            .g-newsletter-button-text {
                vertical-align: middle;
            }

            .button-arrow {
                background: none;
                color: $accent-color-1;

                &:hover {
                    color: darken($accent-color-1, 10%);
                }
            }
        }

        // 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-button {
                .g-newsletter-button-submit {
                    width: 100%;
                }
            }
        }

        &.g-newsletter-rounded {
            .g-newsletter-inputbox {
                input {
                    border-radius: 10rem;
                }
            }
        }

        &.g-newsletter-aside-wrap,
        &.g-newsletter-aside-compact {
            .g-newsletter-form-wrapper {
                @include display(flex);
                @include flex-direction(row);
                @include justify-content(center);
                @include align-items(center);

                .g-newsletter-inputbox,
                .g-newsletter-button {
                    @include flex(0 1 auto);
                    min-width: 0;
                    min-height: 0;
                    margin: 0;
                }

                @include breakpoint(mobile-only) {
                    @include flex-direction(column);
                }
            }
        }

        &.g-newsletter-aside-wrap {
            .g-newsletter-form-wrapper {
                padding: 5px;
                background: $white;
                border-radius: $border-radius;

                .g-newsletter-inputbox,
                .g-newsletter-button {
                    margin: 0;

                    @include breakpoint(mobile-only) {
                        margin: 1rem 0 0;
                    }

                    input,
                    .g-newsletter-button-submit {
                        margin: 0;
                    }
                }

                .g-newsletter-inputbox {
                    width: 65%;

                    @include breakpoint(mobile-only) {
                        width: 100%;
                    }
                }

                .g-newsletter-button-icon {
                    i {
                        line-height: 30px;
                    }
                }
            }

            .g-newsletter-sidetext {
                text-align: center;
            }
        }

        &.g-newsletter-aside-compact {
            .g-newsletter-form-wrapper {
                .g-newsletter-inputbox {
                    width: 65%;

                    @include breakpoint(small-mobile-range) {
                        width: 55%;
                    }
                }

                .g-newsletter-button-icon {
                    i {
                        line-height: 20px;
                    }
                }
            }
        }
    }
}