.gform-theme--api,
.gform-theme--framework {
    --gf-ctrl-date-picker-cell-content-color: var(--wp--preset--color--contrast) !important;
    --gf-ctrl-date-picker-header-icons-color: var(--wp--preset--color--contrast) !important;
    --gf-ctrl-date-picker-header-icons-color-hover: var(--wp--preset--color--blue-2) !important;
}

.gform_wrapper.gform-theme {
    --gf-color-primary: var(--wp--preset--color--primary);
    --gf-color-danger: #f00;
    --gf-color-in-ctrl-primary: var(--wp--preset--color--primary);
    --gf-ctrl-btn-bg-color-hover-primary: var(--wp--preset--color--contrast);
    --gf-ctrl-btn-border-color-hover-primary: var(--wp--preset--color--contrast);
    --gf-ctrl-btn-shadow: none;
    --gf-ctrl-btn-color-hover-primary: var(--wp--preset--color--base);
    --gf-ctrl-btn-bg-color-hover-secondary: var(--gf-color-in-ctrl-primary);
    --gf-ctrl-btn-color-hover-secondary: var(--gf-color-in-ctrl-primary-contrast);
    --gf-ctrl-desc-color-error: #f00;
    --gf-ctrl-outline-width-focus: 2px;
    --gf-ctrl-file-btn-color: var(--gf-ctrl-btn-color-ctrl);
    --gf-ctrl-file-btn-bg-color: var(--gf-color-in-ctrl-primary);
    --gf-ctrl-file-btn-bg-color-hover: var(--gf-color-in-ctrl-primary-darker) !important;
    --gf-field-img-choice-card-check-ind-bg-color: var(--wp--preset--color--primary) !important;
    --gf-field-pg-prog-bar-bg-color-blue: var(--wp--preset--color--primary);
    --gf-form-gap-y: 1.5rem;
    --gf-form-validation-bg-color: var(--wp--preset--color--base);
    --gf-form-validation-border-width: 1px;
    --gf-form-validation-border-color: var(--wp--preset--color--contrast);
    --gf-form-validation-radius: var(--wp--preset--spacing--40);
    --gf-form-validation-shadow: none;
    --gf-ctrl-font-family: var(--wp--preset--font-family--heading);
    --gf-ctrl-font-size: var(--wp--preset--font-size--medium);
    --gf-ctrl-font-weight: 400;
    --gf-field-section-border-color: currentcolor;
    --gf-ctrl-select-dropdown-option-bg-color-hover: var(--wp--preset--color--primary-light);
}

.gform_wrapper.gform-theme .gform_button {
    transition: all 0.25s ease-out;
    transition-property: background-color, border-color, color;
}

.gform-datepicker {
    flex-grow: 1;
}

.ui-widget.ui-datepicker {
    --gf-ctrl-date-picker-bg-color: var(--wp--preset--color--base);
}

.gform_wrapper ::placeholder {
    opacity: 0.6;
}

.gsection_title {
    font-size: var(--wp--preset--font-size--h-4);
    margin-bottom: var(--wp--preset--spacing--40);
    margin-top: 1em;
}

/* Form Class Names */

/* gf-field-bg-transparent */

.gform_wrapper.gform-theme .gf-field-bg-transparent {
    --gf-ctrl-bg-color: transparent;
    --gf-ctrl-bg-color-focus: var(--wp--preset--color--primary);
    --gf-ctrl-color-focus: var(--wp--preset--color--base);
}

.gform_wrapper.gform-theme .gf-field-bg-transparent ::placeholder {
    color: #fffa;
}

/* button style checkboxes/radio fields */

.gform_wrapper .gfield--type-radio.buttons .ginput_container > div,
.gform_wrapper .gfield--type-checkbox.buttons .ginput_container > div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--40);

    & .gchoice {
        position: relative;
    }

    & input {
        border: 0;
        height: 0;
        margin: 0;
        opacity: 0;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 0;
    }

    & label {
        background-color: var(--gf-color-primary);
        border-radius: 6px;
        color: var(--gf-ctrl-btn-color-primary);
        cursor: pointer;
        margin: 0;
        padding: 0.5rem 1rem;
        transition:
            background-color 0.25s ease,
            color 0.25s ease;
    }

    & label:hover,
    & input:checked + label {
        background-color: var(--gf-color-in-ctrl-primary);
        color: var(--gf-ctrl-btn-color-ctrl);
    }
}

.gform-theme--framework.ui-datepicker select.ui-datepicker-month,
.gform-theme--framework.ui-datepicker select.ui-datepicker-year {
    --gf-icon-ctrl-select: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.097631 1.31658 -0.097631 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L5.70711 5.70711C5.31658 6.09763 4.68342 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z' fill='rgba(0, 0, 0, 0.65)'/%3E%3C/svg%3E");

    border-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--contrast);
}

/* multiselect dropdown UI styles */

.gform-theme--framework .gfield:where(.gfield--type-multiselect, .gfield--input-type-multiselect) .chosen-container .chosen-drop,
.gform-theme--framework .gfield:where(.gfield--type-select, .gfield--input-type-select) .chosen-container .chosen-drop {
    background-color: var(--wp--preset--color--base) !important;
}