/*
 * Newsletter sign-up. Themes set the --km-newsletter-* props on .km-newsletter;
 * the submit button is the theme's .btn.
 */
.km-newsletter {
    container: km-newsletter / inline-size;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;

    &[data-variant="in-article"] {
        padding-block: 1.5rem .75rem;
        padding-inline: 1.5rem;
        border: 1px solid var(--km-newsletter-card-border, #e5e5e5);
        background-color: var(--km-newsletter-card-surface, #fff);
    }

    &[data-variant="article-closer"] {
        margin-block-end: 2.5rem;
        padding: 2rem;
        background-color: var(--km-newsletter-surface, #f5f5f5);
    }

    &[data-variant="pre-footer"] {
        align-items: center;
        margin-block: 2.5rem;
        padding: 3rem 1rem;
        background-color: var(--km-newsletter-surface, #f5f5f5);
        text-align: center;

        @media (width >= 48rem) {
            padding-block: 5rem;
        }

        .km-newsletter__title {
            @container km-newsletter (width >= 48rem) {
                font-size: 1.75rem;
            }
        }

        .km-newsletter__form {
            max-inline-size: 38.5rem;
        }
    }
}

.km-newsletter__badge {
    margin: 0;
    padding: .3125rem .375rem;
    background-color: var(--km-newsletter-badge-surface, #000);
    color: var(--km-newsletter-badge-color, #fff);
    font-size: .625rem;
    font-weight: 800;
    letter-spacing: .05rem;
    line-height: 1;
    text-transform: uppercase;
}

.km-newsletter__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.4;
}

.km-newsletter__form {
    display: grid;
    inline-size: 100%;
    gap: .5rem;

    .km-newsletter__message {
        padding-inline-start: .75rem;
        font-size: .75rem;

        &:empty {
            display: none;
        }
    }

    &:has([aria-invalid="true"]) .km-newsletter__message {
        color: var(--km-newsletter-error, #e00);
    }

    .km-newsletter__submit {
        order: 1;
    }

    @container km-newsletter (width >= 30rem) {
        grid-template-columns: 1fr auto;

        .km-newsletter__submit {
            order: 0;
        }

        .km-newsletter__message {
            grid-column: 1;
        }
    }
}

.km-newsletter__field {
    display: flex;
    align-items: center;
    block-size: 3rem;
    padding-inline: .75rem;
    border: 1px solid var(--km-newsletter-border, #e5e5e5);
    background-color: #fff;
    gap: 1rem;

    &:hover,
    &:focus-within {
        border-color: var(--km-newsletter-accent, #000);
    }

    &:has([aria-invalid="true"]) {
        border-color: var(--km-newsletter-error, #e00);
    }
}

.km-newsletter__label {
    padding: .25rem .375rem;
    background-color: var(--km-newsletter-label-surface, #f5f5f5);
    font-size: .75rem;
    line-height: 1.5;
}

.km-newsletter__input {
    flex: 1;
    min-inline-size: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: none;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.4;

    &::placeholder {
        opacity: 1;
        color: currentcolor;
    }
}

:where(.km-newsletter__submit) {
    padding: 1rem .875rem;
    border: 0;
    background-color: var(--km-newsletter-accent, #000);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
}

.km-newsletter__message {
    margin: 0;
    font-size: .875rem;
    line-height: 1.4;
    text-align: start;
}

.km-newsletter__trap {
    position: absolute;
    block-size: 1px;
    inline-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.km-newsletter__privacy {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: .75rem;
    line-height: 1.4;
    gap: .25rem;

    a {
        color: var(--km-newsletter-accent, currentcolor);
    }
}