BootStrap 5 styling for HubSpot forms

_hubspot-boostrap.scss

.hs-form {
    .hs-button.primary {
        @extend .btn;
        @extend .btn-primary;
    }

    .hs-dependent-field {
        @extend .w-100;
    }

    .hs-form-radio {
        @extend .me-2;
    }

    .hs-form-radio,
    .inputs-list {
        @extend .list-unstyled, .d-flex;

        label {
            @extend .form-check-label;
        }

        input[type="radio"] {
            @extend .me-2, .form-check-input;
        }
    }

    .hs-form-required {
        @extend .text-danger;
        @extend .ms-1;
    }

    @extend .d-flex, .flex-wrap, .justify-content-between;

    .hs-form-field {
        @extend .position-relative, .mb-3;

        label {
            @extend .form-label;
        }

        input[type="text"],
        input[type="email"],
        select,
        textarea {
            background-color: #ffffff !important; // because apparently our white isn't

            &.error {
                @extend .is-invalid;
            }

            @extend .form-control;
        }
    }

    .hs-error-msg {
        @extend .invalid-feedback, .d-block;
    }

    .hs-error-msgs {
        @extend .list-unstyled;
    }

    .hs-firstname,
    .hs-lastname,
    .hs-email,
    .hs-mobilephone {
        max-width: calc(50% - 15px);
        @extend .w-50;
    }

    .hs-message,
    .hs-fieldtype-select {
        @extend .w-100;

        textarea {
            @extend .w-100;
            max-width: 100%;
        }
    }
}