Contact Form 7 Theme With SCSS Variables

$accent: #7c3aed;
$radius: 10px;
$gap: 1.1rem;
$border: #d4d4d8;
$error: #e11d48;

.wpcf7 {
    form > p,
    form > div {
        margin: 0 0 $gap;
    }

    input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        width: 100%;
        box-sizing: border-box;
        padding: 0.75em 1em;
        border: 1px solid $border;
        border-radius: $radius;
        background: #fff;
        color: #18181b;
        font-size: max(16px, 1em);
        transition: border-color 0.15s, box-shadow 0.15s;

        &:focus {
            outline: none;
            border-color: $accent;
            box-shadow: 0 0 0 3px rgba($accent, 0.25);
        }
    }

    .wpcf7-list-item {
        margin: 0 1em 0.4em 0;
    }

    input[type="checkbox"],
    input[type="radio"] {
        accent-color: $accent;
        width: 1.1em;
        height: 1.1em;
    }

    input[type="submit"] {
        padding: 0.8em 1.8em;
        border: 0;
        border-radius: $radius;
        background: $accent;
        color: #fff;
        font-weight: 600;
        cursor: pointer;

        &:hover {
            background: darken($accent, 8%);
        }
    }

    .wpcf7-not-valid {
        border-color: $error !important;
    }

    .wpcf7-not-valid-tip {
        color: $error;
        font-size: 0.85em;
    }

    @media (prefers-color-scheme: dark) {
        input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
        select,
        textarea {
            background: #18181b;
            color: #f4f4f5;
            border-color: #3f3f46;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        input,
        select,
        textarea {
            transition: none;
        }
    }
}