:host {
  all: initial;
  width: 100%;
}

/*Workaround to make Material Icons Work https://github.com/google/material-design-icons/issues/1165*/
.material-icons {
  font-family: 'Material Icons';
  font-style: normal;
}

/* No height here: a non-modal embed has no --heyflow-widget-height, so any height clamps it (see git history). */
.heyflow-widget-root {
  margin: 0 auto;
  max-width: 100%;
}

/* TODO these are hacky overrides to fix sizing issues if the web component is embedded inside of an iframe.
    The iframe class is set only if the web component is running inside of an iframe.*/
.parent-is-iframe .multiple-choice .option-content.picture {
  height: auto;
}

/* This prevents weird whitespace problem under large images. */
.parent-is-iframe .block-content.image-block {
  display: flex;
}

.parent-is-iframe img {
  /* overrides an inline style. */
  height: auto !important;
  max-height: 100%;
}

/* adds an overflow hidden to the span in the button cause it shows scroll bars in Safari and this would break the button */
.generic-button-block .content .label,
.generic-button-block .content .line2 {
  overflow: hidden;
}

/* !importants are here because of packages/flow/src/style/x_responsive.less */
form section>.block>.inner-wide {
  width: min(var(--heyflow-widget-width-wide), 100%) !important;
}

form section>.block>.inner-mid {
  width: min(var(--heyflow-widget-width-mid), 100%) !important;
}

form section>.block>.inner-narrow {
  width: min(var(--heyflow-widget-width-narrow), 100%) !important;
}