/******************************************************************

Stylesheet: Block Style
Block: HubSpot Form

******************************************************************/
/******************************************************************

Stylesheet: Variables

Here is where we declare all our variables like colors, fonts,
base values, and defaults. We want to make sure this file ONLY
contains variables that way our files don't get all messy.
No one likes a mess.

******************************************************************/
/*********************
WRAPS
*********************/
/*********************
MEDIA QUERIES
*********************/
/*********************
COLORS
*********************/
/*********************
FONT FAMILY
*********************/
/*********************
FONT SIZES
*********************/
/*********************
PADDINGS
*********************/
/*********************
TRANSITIONS
*********************/
.sp-block-hubspot-form {
  min-height: 5em;
}
.sp-block-hubspot-form .sp-hs-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 1.5em 0;
  margin: 1em 0;
  color: #888;
  font-size: 0.9em;
  background: var(--wp--preset--color--light-blue);
  border-radius: 0.6em;
  corner-shape: superellipse(1.5);
}
.sp-block-hubspot-form .sp-hs-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #ddd;
  border-top-color: #888;
  border-radius: 50%;
  animation: sp-hs-spin 0.6s linear infinite;
}
@keyframes sp-hs-spin {
  to {
    transform: rotate(360deg);
  }
}
.sp-block-hubspot-form.is-loaded {
  border-radius: 15px;
  corner-shape: superellipse(1.5);
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--prussian-blue);
}