Hubspot CTA CSS is weirdly affecting text box toolbar buttons?

I have Hubspot CTA buttons on the homepage of my website. I have CSS styling for this button so that they look like the rest of the primary buttons on my website. Here is the code I used...it works like a charm.

/* HUBSPOT CTA Buttons */
button{
background-color: var(--primaryButtonBackgroundColor);
color: var(--primaryButtonTextColor);
text-transform: uppercase;
letter-spacing: 1px;
border: none;
padding:15px;
min-height:30px; 
min-width: 120px;

}
/* END HUBSPOT CTA Buttons */

Where I'm running into trouble is that after going through and removing all my CSS and adding it back in I have come to find out that it's this snippet of code that is causing my text box edit toolbar to stretch out and get cut off making it unusable (see attached screenshot). I wasn't aware CSS we apply to our website could affect the native tools on SquareSpace itself. Any ideas here on how I can fix this code so it no longer messes with the Squarespace toolbars?