.contact-form {
    --_color-error: var(--color-red);
    --_color-success: var(--color-purple);
    --_color-valid: var(--color-purple-lt);
}

.contact-form,
form[data-dk-contact-form] {
    max-width: 600px;
    margin: 0 auto;

    &.full-width {
        width: 100%;
        max-width: none;
    }

    &.contact-form--card {
        padding: var(--spacing-3);
        background: var(--background-transparent-1);
        backdrop-filter: blur(8px);
        border-radius: var(--radius-md);
    }

    & form,
    &[data-dk-contact-form] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-2);
        padding: var(--spacing-3);
        border-radius: var(--radius-md);
        font-size: var(--font-size-large);

        &.subscribe {
            flex-direction: row;
        }

        & input,
        & textarea {
            font-weight: 500;
            border-radius: var(--radius-sm);
            background: var(--color-bg);
            padding: var(--spacing-2) var(--spacing-3);
            flex-grow: 1;
            border: none;

            &.is-valid {
                --_color: var(--_color-valid);
            }

            &.is-invalid {
                --_color: var(--_color-error);
            }

            &.is-valid,
            &.is-invalid {
                outline: 2px solid var(--_color);
                outline-offset: -2px;
                color: var(--color-text);
                background-image: var(--_icon);
                background-repeat: no-repeat;
                background-size: 1.5em;
                background-position: calc(100% - var(--spacing-3)) center;
            }

            &::placeholder {
                color: var(--color-text-muted);
                letter-spacing: 1px;
            }

            &:focus-visible,
            &:focus-within {
                color: var(--color-purple-dk);
                outline-color: var(--color-purple-lt);

                &::placeholder {
                    color: color-mix(in srgb, var(--color-purple-dk) 50%, transparent);
                }
            }
        }

        & textarea {
            min-height: min(200px, 80vh);

            &.is-valid,
            &.is-invalid {
                background-position: calc(100% - var(--spacing-3)) calc(0% + var(--spacing-3));
            }
        }
    }

    & label {
        &.visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            clip: rect(0, 0, 0, 0);
            overflow: hidden;
        }
    }

    & .contact-form--title {
        margin-bottom: 0;
    }
}

.dk-contact-form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form-errors {
    text-align: center;
    color: var(--_color);

    &.success {
        --_color: var(--_color-success);
    }

    &.error {
        --_color: var(--_color-error);
    }
}