.contact-form  {
    max-width: 600px;
    margin: 0 auto;
    & form {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-3);
        padding: var(--spacing-3);
        border-radius: var(--radius-md);
        font-size: var(--font-size-large);
        border: 2px solid var(--color-text-muted);

        & input, & textarea {
            font-weight: 500;
            border-radius: var(--radius-sm);
            background: var(--color-secondary);
            /* box-shadow: 0 0 8px 0px color-mix(in srgb, var(--color-green-dk) 20%, transparent) inset; */
            padding: var(--spacing-2) var(--spacing-3);
            border: 2px solid var(--color-text-muted);
            &.is-valid {
                --_color: var(--color-green-lt)
            }
            &.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;
            }
        }
        & 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-errors {
     margin-top: var(--spacing-2);
     text-align: center;
     color: var(--_color);
     &.success {
        --_color: var(--color-green);
     }
     &.error {
        --_color: var(--color-error);
     }
 }