@layer components {

    .newsletter,
    .newsletter__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--newsletter-gap, var(--spacing-md));
    }

    .newsletter[style*="text-align:left"],
    .newsletter[style*="text-align: left"],
    .newsletter[style*="text-align:left"] .newsletter__inner,
    .newsletter[style*="text-align: left"] .newsletter__inner {
        align-items: flex-start;
    }

    .newsletter[style*="text-align:right"],
    .newsletter[style*="text-align: right"],
    .newsletter[style*="text-align:right"] .newsletter__inner,
    .newsletter[style*="text-align: right"] .newsletter__inner {
        align-items: flex-end;
    }

    .newsletter__heading {
        font-family: var(--font-heading);
        font-weight: var(--font-weight-heading);
        margin: 0;
    }

    .newsletter__description {
        color: var(--color-muted);
        margin: 0;
    }

    .newsletter__icon {
        color: var(--color-primary);
    }

    .newsletter__form {
        display: flex;
        width: 100%;
        align-self: stretch;
    }

    .newsletter__form--horizontal {
        flex-direction: row;
        gap: var(--newsletter-form-gap, var(--spacing-sm));
    }

    .newsletter__form--vertical {
        flex-direction: column;
        gap: var(--newsletter-form-gap, var(--spacing-sm));
    }

    .newsletter__form--horizontal .newsletter__input {
        flex: 1;
    }


    /* Success transition */
    .newsletter--transitioning {
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .newsletter--success {
        opacity: 1;
        transition: opacity 0.3s ease;
    }

}