// packages/block-library/src/gallery/gap-styles.js
import {
  __experimentalGetGapCSSValue as getGapCSSValue,
  useStyleOverride
} from "@wordpress/block-editor";
function GapStyles({ blockGap, clientId }) {
  const fallbackValue = `var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )`;
  let gapValue = fallbackValue;
  let column = fallbackValue;
  let row;
  if (!!blockGap) {
    row = typeof blockGap === "string" ? getGapCSSValue(blockGap) : getGapCSSValue(blockGap?.top) || fallbackValue;
    column = typeof blockGap === "string" ? getGapCSSValue(blockGap) : getGapCSSValue(blockGap?.left) || fallbackValue;
    gapValue = row === column ? row : `${row} ${column}`;
  }
  const gap = `#block-${clientId} {
		--wp--style--unstable-gallery-gap: ${column === "0" ? "0px" : column};
		gap: ${gapValue}
	}`;
  useStyleOverride({ css: gap });
  return null;
}
export {
  GapStyles as default
};
//# sourceMappingURL=gap-styles.js.map
