Gravity Forms Theme With SCSS Variables

$accent: #db2777;
$radius: 10px;
$border: #d4d4d8;
$error: #dc2626;
$gap: 1.25rem;

.gform_wrapper {
    .gform_fields {
        row-gap: $gap;
    }

    .gfield {
        input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]),
        select,
        textarea {
            padding: 0.75em 1em;
            border: 1px solid $border;
            border-radius: $radius;
            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.2);
            }
        }

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

    .gf_progressbar_percentage {
        background: $accent;
        border-radius: $radius;
    }

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

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

        .gform_previous_button {
            background: transparent;
            color: $accent;
            box-shadow: inset 0 0 0 2px $accent;
        }
    }

    .gfield_error {
        input,
        select,
        textarea {
            border-color: $error !important;
        }
    }

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

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