/* CreARTivity: shrink Custom HTML blocks to content width when used for icons */

/* Target the Custom HTML block wrapper site-wide */

.wp-block-html:has(#creartivity-search-icon-block),
.wp-block-html.is-icon-block,
figure.wp-block-html:has(#creartivity-search-icon-block) {
  display: inline-block !important;
  width: auto !important;
  max-width: max-content !important;
  vertical-align: middle !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

/* When the icon block sits inside a Row or Group, do not let it stretch */

.wp-block-group .wp-block-html:has(#creartivity-search-icon-block),
.wp-block-columns .wp-block-html:has(#creartivity-search-icon-block),
.wp-block-navigation .wp-block-html:has(#creartivity-search-icon-block),
.is-layout-flex > .wp-block-html:has(#creartivity-search-icon-block),
.is-layout-flow > .wp-block-html:has(#creartivity-search-icon-block) {
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  flex: 0 0 auto !important;
  align-self: center !important;
}

/* Make sure the inner search block itself stays compact */

#creartivity-search-icon-block {
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  vertical-align: middle !important;
}

/* Fallback: any Custom HTML block tagged with the helper class shrinks too.
   Add CSS class "is-icon-block" in the block sidebar Advanced panel to use this. */

.wp-block-html.is-icon-block * {
  vertical-align: middle !important;
}