import { useBlockProps } from "@wordpress/block-editor";

import { getFontFamilyValue, getFontFamilyValueV8 } from "../../common/components/settings-modules/font/FontFamilySettingV8";
import { hexToRgba } from "../../common/components/settings-modules/font/FontColorSetting";
import { getDirectFontSizeV8 } from "../../common/components/settings-modules/font/FontSizeSettingV8";
import { getFontWeightValue, getDirectFontWeight, getDirectFontWeightV8 } from "../../common/components/settings-modules/font/FontWeightSettingV8";
import { getLineHeightValue, getDirectLineHeight, getDirectLineHeightV8 } from "../../common/components/settings-modules/font/FontLineHeightSettingV5";
import { getDirectLineHeightV8 as getDirectLineHeightV8New } from "../../common/components/settings-modules/font/FontLineHeightSettingV8";
import { getLetterSpacingValue, getDirectLetterSpacing, getDirectLetterSpacingV8 } from "../../common/components/settings-modules/font/FontLetterSpacingSettingV8";
import { getCurrentIconColor, renderSVGIcon } from "../../common/components/settings-modules/icon/IconSelectSetting";
import { getIconSizeValue, getIconSizeValueHover, getIconSizeWithInheritance, getIconSizeHoverWithInheritance } from "../../common/components/settings-modules/icon/IconSizeSettingV5";
import { getBackgroundPatternType, getDirectBackgroundPatternType } from "../../common/components/settings-modules/background/BackgroundPatternSettingV7";
import { getBandPatternType, getDirectBandPatternType } from "../../common/components/settings-modules/band/BandPatternSettingV7";
import { getPaddingValueV8, getDirectPaddingV8 } from "../../common/components/settings-modules/spacing/SpacingPaddingSettingV8";
import { getMarginValueV8, getDirectMarginV8 } from "../../common/components/settings-modules/spacing/SpacingMarginSettingV8";
import { getBorderValueV8, getDirectBorderValueV8 } from "../../common/components/settings-modules/styling/StylingBorderSettingV8";
import { getRadiusSimpleV8 } from "../../common/components/settings-modules/styling/StylingRadiusSimpleSettingV8";

import {
  getTextShadowValue,
  getTextShadowValueHover,
  getTextShadowValueV2,
  getFontSizeStyles,
  getFontSizeHoverStyles,
  getFontWeightValueHover,
  getLineHeightValueHover,
  getLetterSpacingValueHover,
  getSpacingStyles,
  getBackgroundColorStylesV2,
  getBackgroundColorHoverStylesV2,
  getBackgroundImageStylesV2,
  getBackgroundImageHoverStylesV2,
  getBackgroundBaseColorStylesV2,
  getBackgroundBaseColorHoverStylesV2,
  getBackgroundPatternStylesV2,
  getBackgroundPatternHoverStylesV2,
  getBorderStyles,
  getBorderHoverStyles,
  getRadiusStyles,
  getRadiusHoverStyles,
  getShadowStyles,
  getShadowHoverStyles,
  getInnerShadowStyles,
  getInnerShadowHoverStyles,
  getOpacityStyles,
  getOpacityHoverStyles,
  getLayoutWidthStylesV2,
  getLayoutHeightStylesV2,
  getLayoutPositionStyles,
  getIconStyles,
  getIconHoverStyles,
  getIconFrameStyles,
  getIconFrameHoverStyles,
  getIconFrameStylesV2,
  getIconFrameHoverStylesV2,
  getIconSizeStylesV2,
  getIconSizeHoverStylesV2,
  getIconPositionStylesV2,
  getIconPositionHoverStylesV2,
  getIconColorStylesV2,
  getIconColorHoverStylesV2,
  getThumbnailImageStylesV2,
  getThumbnailImageHoverStylesV2,
  getThumbnailColorStylesV2,
  getThumbnailColorHoverStylesV2,
  getThumbnailImageBaseColorStylesV2,
  getThumbnailImageBaseColorHoverStylesV2,
  getThumbnailOpacityStylesV2,
  getThumbnailOpacityHoverStylesV2,
  getBandImageStylesV2,
  getBandImageHoverStylesV2,
  getBandColorStylesV2,
  getBandColorHoverStylesV2,
  getBandImageBaseColorStylesV2,
  getBandImageBaseColorHoverStylesV2,
  getBandPatternStylesV2,
  getBandPatternHoverStylesV2,
  getBandOpacityStylesV2,
  getBandOpacityHoverStylesV2,
  getBandTransformStylesV2,
  getBandTransformHoverStylesV2,
  getGradientColorAtPosition,
} from "../../common/utils";
import { getDisplayClassesV2 } from "../../common/components/settings-modules/display/DisplaySettingV7";
import { getEnabledBreakpoints } from "../../../core/breakpoints";


const renderTextWithChars = (text) => {
  if (!text) return null;
  return Array.from(text).map((char, index) => (
    <span key={index} className="char" style={{ ["--char-index"]: index }}>
      {char === " " ? "\u00A0" : char}
    </span>
  ));
};

const hasThumbnailImage = (attributes) => {
  const data = attributes.thumbnailImageV2;
  if (data) {
    return Object.values(data).some((bp) => bp && bp.url && bp.url !== "");
  }
  return !!(attributes.thumbnailUrlPC || attributes.thumbnailUrlMD || attributes.thumbnailUrlTB || attributes.thumbnailUrlSP);
};

const hasThumbnailMedia = (attributes) => {
  if (attributes.thumbnailMediaType === "video") {
    return !!attributes.thumbnailVideoUrl;
  }
  return hasThumbnailImage(attributes);
};

const hasBackgroundVideo = (attributes) => {
  return attributes.backgroundMediaType === "video" && !!attributes.backgroundVideoUrl;
};

const getV2ValueWithFallback = (data, device, key, fallback) => {
  const order = ["pc", "md", "tb", "sp"];
  const idx = Math.max(0, order.indexOf(device));
  for (let i = idx; i >= 0; i--) {
    const bp = order[i];
    const value = data?.[bp]?.[key];
    if (value !== undefined && value !== null && value !== "") return value;
  }
  return fallback;
};

const getVideoPresentationFromImageData = (data, device = "pc") => {
  const fit = getV2ValueWithFallback(data, device, "objectFit", "cover");
  const position = getV2ValueWithFallback(data, device, "focalPosition", "50% 50%");
  const bgWidth = getV2ValueWithFallback(data, device, "bgWidth", "100");
  const bgWidthUnit = getV2ValueWithFallback(data, device, "bgWidthUnit", "%");
  const bgHeight = getV2ValueWithFallback(data, device, "bgHeight", "100");
  const bgHeightUnit = getV2ValueWithFallback(data, device, "bgHeightUnit", "%");
  const width = bgWidth === "auto" ? "100%" : `${bgWidth}${bgWidthUnit}`;
  const height = bgHeight === "auto" ? "100%" : `${bgHeight}${bgHeightUnit}`;
  return {
    fit: fit === "contain" ? "contain" : fit === "none" ? "none" : fit === "fill" ? "fill" : "cover",
    position,
    width: fit === "fill" || fit === "none" ? width : "100%",
    height: fit === "fill" || fit === "none" ? height : "100%",
  };
};

const parseFocalPositionToPercent = (position, fallbackX = 50, fallbackY = 50) => {
  const parts = String(position || "").trim().split(/\s+/);
  const xRaw = parts[0] || `${fallbackX}%`;
  const yRaw = parts[1] || `${fallbackY}%`;
  const x = clampPercent(parseFloat(String(xRaw).replace("%", "")), fallbackX);
  const y = clampPercent(parseFloat(String(yRaw).replace("%", "")), fallbackY);
  return { x, y };
};

const getVideoPresentationDefaultsFromImageData = (data, device = "pc") => {
  const fit = getV2ValueWithFallback(data, device, "objectFit", "cover");
  const position = getV2ValueWithFallback(data, device, "focalPosition", "50% 50%");
  const pos = parseFocalPositionToPercent(position, 50, 50);
  const width = getV2ValueWithFallback(data, device, "bgWidth", "100");
  const widthUnit = getV2ValueWithFallback(data, device, "bgWidthUnit", "%");
  const height = getV2ValueWithFallback(data, device, "bgHeight", "100");
  const heightUnit = getV2ValueWithFallback(data, device, "bgHeightUnit", "%");
  return { fit, positionX: pos.x, positionY: pos.y, width, widthUnit, height, heightUnit };
};

const pickValue = (value, fallback) => {
  return value === undefined || value === null || value === "" ? fallback : value;
};

const getVideoPresentationFromAttributes = ({
  fit,
  positionX,
  positionY,
  customWidth,
  customWidthUnit,
  customHeight,
  customHeightUnit,
  fallbackData,
  device = "pc",
}) => {
  const defaults = getVideoPresentationDefaultsFromImageData(fallbackData, device);
  const resolvedFit = (() => {
    const value = pickValue(fit, defaults.fit);
    if (value === "contain" || value === "fill" || value === "none") return value;
    return "cover";
  })();
  const resolvedX = clampPercent(pickValue(positionX, defaults.positionX), defaults.positionX);
  const resolvedY = clampPercent(pickValue(positionY, defaults.positionY), defaults.positionY);
  const size = getCustomSizeValue(
    resolvedFit,
    pickValue(customWidth, defaults.width),
    pickValue(customWidthUnit, defaults.widthUnit),
    pickValue(customHeight, defaults.height),
    pickValue(customHeightUnit, defaults.heightUnit),
  );
  return {
    fit: resolvedFit,
    positionX: resolvedX,
    positionY: resolvedY,
    position: `${resolvedX}% ${resolvedY}%`,
    width: size.width,
    height: size.height,
    embedWidth: size.embedWidth,
    embedHeight: size.embedHeight,
    backgroundSize: size.backgroundSize,
  };
};

const getBackgroundVideoConfig = (url) => {
  const input = String(url || "").trim();
  if (!input) return { type: "none", embedUrl: "", fileUrl: "" };

  const iframeSrcMatch = input.match(/<iframe[\s\S]*?\ssrc=["']([^"']+)["']/i);
  const raw = (iframeSrcMatch ? iframeSrcMatch[1] : input).replace(/&amp;/g, "&").trim();
  if (!raw) return { type: "none", embedUrl: "", fileUrl: "" };

  let parsed;
  try {
    parsed = new URL(raw);
  } catch (e) {
    return { type: "file", embedUrl: "", fileUrl: raw };
  }

  const host = parsed.hostname.replace(/^www\./, "");
  const path = parsed.pathname;

  if (host === "youtu.be") {
    const id = path.split("/").filter(Boolean)[0];
    if (id) {
      return {
        type: "youtube",
        embedUrl: `https://www.youtube-nocookie.com/embed/${id}?autoplay=1&mute=1&controls=0&loop=1&playlist=${id}&playsinline=1&rel=0&modestbranding=1`,
        fileUrl: "",
      };
    }
  }

  if (host === "youtube.com" || host === "youtube-nocookie.com" || host.endsWith(".youtube.com")) {
    let id = parsed.searchParams.get("v") || "";
    if (!id) {
      const parts = path.split("/").filter(Boolean);
      if (parts[0] === "embed" || parts[0] === "shorts") {
        id = parts[1] || "";
      }
    }
    if (id) {
      return {
        type: "youtube",
        embedUrl: `https://www.youtube-nocookie.com/embed/${id}?autoplay=1&mute=1&controls=0&loop=1&playlist=${id}&playsinline=1&rel=0&modestbranding=1`,
        fileUrl: "",
      };
    }
  }

  if (host === "vimeo.com" || host.endsWith(".vimeo.com")) {
    let id = "";
    const parts = path.split("/").filter(Boolean);
    if (parts[0] === "video") {
      id = parts[1] || "";
    } else {
      id = parts.find((p) => /^\d+$/.test(p)) || "";
    }
    if (id) {
      return {
        type: "vimeo",
        embedUrl: `https://player.vimeo.com/video/${id}?autoplay=1&muted=1&loop=1&background=1&title=0&byline=0&portrait=0`,
        fileUrl: "",
      };
    }
  }

  return { type: "file", embedUrl: "", fileUrl: raw };
};

const clampPercent = (value, fallback = 50) => {
  const num = Number(value);
  if (!Number.isFinite(num)) return fallback;
  return Math.max(0, Math.min(100, num));
};

const mapFitToBackgroundSize = (fit) => {
  if (fit === "contain") return "contain";
  if (fit === "fill") return "100% 100%";
  if (fit === "none") return "auto";
  return "cover";
};

const getCustomSizeValue = (fit, width, widthUnit, height, heightUnit) => {
  if (fit !== "fill" && fit !== "none") {
    return { width: "100%", height: "100%", backgroundSize: mapFitToBackgroundSize(fit), embedWidth: fit === "cover" ? "177.78%" : "100%", embedHeight: fit === "cover" ? "177.78%" : "100%" };
  }
  const w = width === "auto" ? "auto" : `${width || "100"}${widthUnit || "%"}`;
  const h = height === "auto" ? "auto" : `${height || "100"}${heightUnit || "%"}`;
  const embedW = w === "auto" ? "100%" : w;
  const embedH = h === "auto" ? "100%" : h;
  return { width: w, height: h, backgroundSize: `${w} ${h}`, embedWidth: embedW, embedHeight: embedH };
};

const getLegacyThumbnailStyles = (attributes) => ({
  "--thumbnail-frame-width-pc": `${attributes.thumbnailFrameWidthPC || 60}${attributes.thumbnailFrameWidthUnitPC || "px"}`,
  "--thumbnail-frame-width-tb": `${attributes.thumbnailFrameWidthTB ?? attributes.thumbnailFrameWidthPC ?? 60}${attributes.thumbnailFrameWidthUnitTB || attributes.thumbnailFrameWidthUnitPC || "px"}`,
  "--thumbnail-frame-width-sp": `${attributes.thumbnailFrameWidthSP ?? attributes.thumbnailFrameWidthTB ?? attributes.thumbnailFrameWidthPC ?? 60}${
    attributes.thumbnailFrameWidthUnitSP || attributes.thumbnailFrameWidthUnitTB || attributes.thumbnailFrameWidthUnitPC || "px"
  }`,
  "--thumbnail-frame-height-pc": `${attributes.thumbnailFrameHeightPC || 60}${attributes.thumbnailFrameHeightUnitPC || "px"}`,
  "--thumbnail-frame-height-tb": `${attributes.thumbnailFrameHeightTB ?? attributes.thumbnailFrameHeightPC ?? 60}${
    attributes.thumbnailFrameHeightUnitTB || attributes.thumbnailFrameHeightUnitPC || "px"
  }`,
  "--thumbnail-frame-height-sp": `${attributes.thumbnailFrameHeightSP ?? attributes.thumbnailFrameHeightTB ?? attributes.thumbnailFrameHeightPC ?? 60}${
    attributes.thumbnailFrameHeightUnitSP || attributes.thumbnailFrameHeightUnitTB || attributes.thumbnailFrameHeightUnitPC || "px"
  }`,
  "--thumbnail-radius-pc": `${attributes.thumbnailBorderRadiusPC ?? 0}${attributes.thumbnailBorderRadiusUnitPC || "px"}`,
  "--thumbnail-radius-tb": `${attributes.thumbnailBorderRadiusTB ?? attributes.thumbnailBorderRadiusPC ?? 0}${
    attributes.thumbnailBorderRadiusUnitTB || attributes.thumbnailBorderRadiusUnitPC || "px"
  }`,
  "--thumbnail-radius-sp": `${attributes.thumbnailBorderRadiusSP ?? attributes.thumbnailBorderRadiusTB ?? attributes.thumbnailBorderRadiusPC ?? 0}${
    attributes.thumbnailBorderRadiusUnitSP || attributes.thumbnailBorderRadiusUnitTB || attributes.thumbnailBorderRadiusUnitPC || "px"
  }`,
  "--thumbnail-image-pc": attributes.thumbnailUrlPC ? `url(${attributes.thumbnailUrlPC})` : "none",
  "--thumbnail-image-md": attributes.thumbnailUrlMD ? `url(${attributes.thumbnailUrlMD})` : attributes.thumbnailUrlPC ? `url(${attributes.thumbnailUrlPC})` : "none",
  "--thumbnail-image-tb": attributes.thumbnailUrlTB
    ? `url(${attributes.thumbnailUrlTB})`
    : attributes.thumbnailUrlMD || attributes.thumbnailUrlPC
    ? `url(${attributes.thumbnailUrlMD || attributes.thumbnailUrlPC})`
    : "none",
  "--thumbnail-image-sp": attributes.thumbnailUrlSP
    ? `url(${attributes.thumbnailUrlSP})`
    : attributes.thumbnailUrlTB || attributes.thumbnailUrlMD || attributes.thumbnailUrlPC
    ? `url(${attributes.thumbnailUrlTB || attributes.thumbnailUrlMD || attributes.thumbnailUrlPC})`
    : "none",
  "--thumbnail-position-pc": attributes.thumbnailFocalPositionPC || "50% 50%",
  "--thumbnail-position-tb": attributes.thumbnailFocalPositionTB || attributes.thumbnailFocalPositionPC || "50% 50%",
  "--thumbnail-position-sp": attributes.thumbnailFocalPositionSP || attributes.thumbnailFocalPositionTB || attributes.thumbnailFocalPositionPC || "50% 50%",
  "--thumbnail-size-pc": attributes.thumbnailObjectFitPC || "cover",
  "--thumbnail-size-tb": attributes.thumbnailObjectFitTB || attributes.thumbnailObjectFitPC || "cover",
  "--thumbnail-size-sp": attributes.thumbnailObjectFitSP || attributes.thumbnailObjectFitTB || attributes.thumbnailObjectFitPC || "cover",
  "--thumbnail-offset-x-pc": `${attributes.thumbnailOffsetXPC ?? 0}${attributes.thumbnailOffsetXUnitPC || "%"}`,
  "--thumbnail-offset-x-tb": `${attributes.thumbnailOffsetXTB ?? attributes.thumbnailOffsetXPC ?? 0}${attributes.thumbnailOffsetXUnitTB || attributes.thumbnailOffsetXUnitPC || "%"}`,
  "--thumbnail-offset-x-sp": `${attributes.thumbnailOffsetXSP ?? attributes.thumbnailOffsetXTB ?? attributes.thumbnailOffsetXPC ?? 0}${
    attributes.thumbnailOffsetXUnitSP || attributes.thumbnailOffsetXUnitTB || attributes.thumbnailOffsetXUnitPC || "%"
  }`,
  "--thumbnail-offset-y-pc": `${attributes.thumbnailOffsetYPC ?? 0}${attributes.thumbnailOffsetYUnitPC || "%"}`,
  "--thumbnail-offset-y-tb": `${attributes.thumbnailOffsetYTB ?? attributes.thumbnailOffsetYPC ?? 0}${attributes.thumbnailOffsetYUnitTB || attributes.thumbnailOffsetYUnitPC || "%"}`,
  "--thumbnail-offset-y-sp": `${attributes.thumbnailOffsetYSP ?? attributes.thumbnailOffsetYTB ?? attributes.thumbnailOffsetYPC ?? 0}${
    attributes.thumbnailOffsetYUnitSP || attributes.thumbnailOffsetYUnitTB || attributes.thumbnailOffsetYUnitPC || "%"
  }`,
  "--thumbnail-color-pc": attributes.thumbnailColorPC || "transparent",
  "--thumbnail-color-tb": attributes.thumbnailColorTB || attributes.thumbnailColorPC || "transparent",
  "--thumbnail-color-sp": attributes.thumbnailColorSP || attributes.thumbnailColorTB || attributes.thumbnailColorPC || "transparent",
  "--thumbnail-color-opacity-pc": attributes.thumbnailColorOpacityPC ?? 1,
  "--thumbnail-color-opacity-tb": attributes.thumbnailColorOpacityTB ?? attributes.thumbnailColorOpacityPC ?? 1,
  "--thumbnail-color-opacity-sp": attributes.thumbnailColorOpacitySP ?? attributes.thumbnailColorOpacityTB ?? attributes.thumbnailColorOpacityPC ?? 1,
  // Thumbnail transition variables are handled by richTextStyle section
});

const getThumbnailStylesForElement = (attributes) => {
  if (attributes.thumbnailImageV2) {
    return {
      ...getThumbnailImageStylesV2(attributes),
      ...getThumbnailImageHoverStylesV2(attributes),
      ...getThumbnailColorStylesV2(attributes),
      ...getThumbnailColorHoverStylesV2(attributes),
      ...getThumbnailImageBaseColorStylesV2(attributes),
      ...getThumbnailImageBaseColorHoverStylesV2(attributes),
      ...getThumbnailOpacityStylesV2(attributes),
      ...getThumbnailOpacityHoverStylesV2(attributes),
      // Thumbnail transition variables are handled by richTextStyle section
    };
  }
  return getLegacyThumbnailStyles(attributes);
};

const getBandStylesForElement = (attributes, opts = {}) => {
  return {
    ...getBandImageStylesV2(attributes),
    ...getBandImageHoverStylesV2(attributes),
    ...getBandColorStylesV2(attributes),
    ...getBandColorHoverStylesV2(attributes),
    ...getBandImageBaseColorStylesV2(attributes),
    ...getBandImageBaseColorHoverStylesV2(attributes),
    ...getBandPatternStylesV2(attributes),
    ...getBandPatternHoverStylesV2(attributes),
    ...getBandOpacityStylesV2(attributes, opts),
    ...getBandOpacityHoverStylesV2(attributes, opts),
    ...getBandTransformStylesV2(attributes),
    ...getBandTransformHoverStylesV2(attributes),
    // Band transition variables are handled by richTextStyle section
  };
};

export function createButtonBasicSave({ optimizeIcons = true, optimizeText = true, optimizeFontWeight = true, optimizeLineHeight = true, optimizeLetterSpacing = true, optimizeMicroText = true, optimizeDefaults = false, thumbnailOverlayHover = true } = {}) {
  return function ButtonBasicSave({ attributes }) {
  const backgroundVideoConfig = getBackgroundVideoConfig(attributes.backgroundVideoUrl);
  const isEmbedBackgroundVideo = backgroundVideoConfig.type === "youtube" || backgroundVideoConfig.type === "vimeo";
  const thumbnailVideoConfig = getBackgroundVideoConfig(attributes.thumbnailVideoUrl);
  const isEmbedThumbnailVideo = thumbnailVideoConfig.type === "youtube" || thumbnailVideoConfig.type === "vimeo";
  const bandVideoConfig = getBackgroundVideoConfig(attributes.bandVideoUrl);
  const isEmbedBandVideo = bandVideoConfig.type === "youtube" || bandVideoConfig.type === "vimeo";
  const backgroundVideoFit = attributes.backgroundVideoFit || "cover";
  const backgroundVideoPositionX = clampPercent(attributes.backgroundVideoPositionX, 50);
  const backgroundVideoPositionY = clampPercent(attributes.backgroundVideoPositionY, 50);
  const backgroundPosterFit = attributes.backgroundPosterFit || "cover";
  const backgroundPosterPositionX = clampPercent(attributes.backgroundPosterPositionX, 50);
  const backgroundPosterPositionY = clampPercent(attributes.backgroundPosterPositionY, 50);
  const videoSize = getCustomSizeValue(
    backgroundVideoFit,
    attributes.backgroundVideoCustomWidth,
    attributes.backgroundVideoCustomWidthUnit,
    attributes.backgroundVideoCustomHeight,
    attributes.backgroundVideoCustomHeightUnit,
  );
  const posterSize = getCustomSizeValue(
    backgroundPosterFit,
    attributes.backgroundPosterCustomWidth,
    attributes.backgroundPosterCustomWidthUnit,
    attributes.backgroundPosterCustomHeight,
    attributes.backgroundPosterCustomHeightUnit,
  );
  const videoInlineStyle = {
    width: videoSize.width === "auto" ? "100%" : videoSize.width,
    height: videoSize.height === "auto" ? "100%" : videoSize.height,
    objectFit: backgroundVideoFit === "fill" ? "fill" : backgroundVideoFit === "none" ? "none" : backgroundVideoFit,
    objectPosition: `${backgroundVideoPositionX}% ${backgroundVideoPositionY}%`,
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: `translate(calc(-50% + ${backgroundVideoPositionX - 50}%), calc(-50% + ${backgroundVideoPositionY - 50}%))`,
    maxWidth: "none",
    maxHeight: "none",
  };
  const iframeInlineStyle = {
    width: videoSize.embedWidth,
    height: videoSize.embedHeight,
    transform: `translate(calc(-50% + ${backgroundVideoPositionX - 50}%), calc(-50% + ${backgroundVideoPositionY - 50}%))`,
  };
  const posterInlineStyle = {
    backgroundSize: posterSize.backgroundSize,
    backgroundPosition: `${backgroundPosterPositionX}% ${backgroundPosterPositionY}%`,
    backgroundImage: attributes.backgroundVideoPoster ? `url(${attributes.backgroundVideoPoster})` : "none",
  };
  const thumbnailVideoPresentation = getVideoPresentationFromAttributes({
    fit: attributes.thumbnailVideoFit,
    positionX: attributes.thumbnailVideoPositionX,
    positionY: attributes.thumbnailVideoPositionY,
    customWidth: attributes.thumbnailVideoCustomWidth,
    customWidthUnit: attributes.thumbnailVideoCustomWidthUnit,
    customHeight: attributes.thumbnailVideoCustomHeight,
    customHeightUnit: attributes.thumbnailVideoCustomHeightUnit,
    fallbackData: attributes.thumbnailImageV2,
    device: "pc",
  });
  const thumbnailPosterPresentation = getVideoPresentationFromAttributes({
    fit: attributes.thumbnailPosterFit,
    positionX: attributes.thumbnailPosterPositionX,
    positionY: attributes.thumbnailPosterPositionY,
    customWidth: attributes.thumbnailPosterCustomWidth,
    customWidthUnit: attributes.thumbnailPosterCustomWidthUnit,
    customHeight: attributes.thumbnailPosterCustomHeight,
    customHeightUnit: attributes.thumbnailPosterCustomHeightUnit,
    fallbackData: attributes.thumbnailImageV2,
    device: "pc",
  });
  const thumbnailVideoInlineStyle = {
    width: thumbnailVideoPresentation.width === "auto" ? "100%" : thumbnailVideoPresentation.width,
    height: thumbnailVideoPresentation.height === "auto" ? "100%" : thumbnailVideoPresentation.height,
    objectFit: thumbnailVideoPresentation.fit,
    objectPosition: thumbnailVideoPresentation.position,
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: `translate(calc(-50% + ${thumbnailVideoPresentation.positionX - 50}%), calc(-50% + ${thumbnailVideoPresentation.positionY - 50}%))`,
    maxWidth: "none",
    maxHeight: "none",
  };
  const thumbnailIframeInlineStyle = {
    width: thumbnailVideoPresentation.embedWidth,
    height: thumbnailVideoPresentation.embedHeight,
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: `translate(calc(-50% + ${thumbnailVideoPresentation.positionX - 50}%), calc(-50% + ${thumbnailVideoPresentation.positionY - 50}%))`,
    border: 0,
    display: "block",
    pointerEvents: "none",
    maxWidth: "none",
    maxHeight: "none",
  };
  const thumbnailPosterInlineStyle = {
    backgroundSize: thumbnailPosterPresentation.backgroundSize,
    backgroundPosition: thumbnailPosterPresentation.position,
    backgroundImage: attributes.thumbnailVideoPoster ? `url(${attributes.thumbnailVideoPoster})` : "none",
  };
  const bandVideoPresentation = getVideoPresentationFromAttributes({
    fit: attributes.bandVideoFit,
    positionX: attributes.bandVideoPositionX,
    positionY: attributes.bandVideoPositionY,
    customWidth: attributes.bandVideoCustomWidth,
    customWidthUnit: attributes.bandVideoCustomWidthUnit,
    customHeight: attributes.bandVideoCustomHeight,
    customHeightUnit: attributes.bandVideoCustomHeightUnit,
    fallbackData: attributes.bandImageV2,
    device: "pc",
  });
  const bandPosterPresentation = getVideoPresentationFromAttributes({
    fit: attributes.bandPosterFit,
    positionX: attributes.bandPosterPositionX,
    positionY: attributes.bandPosterPositionY,
    customWidth: attributes.bandPosterCustomWidth,
    customWidthUnit: attributes.bandPosterCustomWidthUnit,
    customHeight: attributes.bandPosterCustomHeight,
    customHeightUnit: attributes.bandPosterCustomHeightUnit,
    fallbackData: attributes.bandImageV2,
    device: "pc",
  });
  const bandVideoInlineStyle = {
    width: bandVideoPresentation.width === "auto" ? "100%" : bandVideoPresentation.width,
    height: bandVideoPresentation.height === "auto" ? "100%" : bandVideoPresentation.height,
    objectFit: bandVideoPresentation.fit,
    objectPosition: bandVideoPresentation.position,
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: `translate(calc(-50% + ${bandVideoPresentation.positionX - 50}%), calc(-50% + ${bandVideoPresentation.positionY - 50}%))`,
    maxWidth: "none",
    maxHeight: "none",
    opacity: (attributes.bandImageV2?.pc?.opacity !== undefined && attributes.bandImageV2?.pc?.opacity !== "") ? attributes.bandImageV2.pc.opacity : 1,
  };
  const bandIframeInlineStyle = {
    width: bandVideoPresentation.embedWidth,
    height: bandVideoPresentation.embedHeight,
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: `translate(calc(-50% + ${bandVideoPresentation.positionX - 50}%), calc(-50% + ${bandVideoPresentation.positionY - 50}%))`,
    border: 0,
    display: "block",
    pointerEvents: "none",
    maxWidth: "none",
    maxHeight: "none",
  };
  const bandPosterInlineStyle = {
    backgroundSize: bandPosterPresentation.backgroundSize,
    backgroundPosition: bandPosterPresentation.position,
    backgroundImage: attributes.bandVideoPoster ? `url(${attributes.bandVideoPoster})` : "none",
  };
  const { content, contentHover, tagName, href, target, rel, buttonType, textColor, ariaLabel, linkTitle, trackingId, trackingLocation, microText, subText, copyMicro, copySub } = attributes;
  const hoverText = contentHover || content;
  const renderAllIcons = !optimizeIcons || attributes.useResponsiveIcon;
  const needsCharWrapping = !optimizeText || attributes.hoverAnimation !== "none";
  const defOpts = optimizeDefaults ? { skipDefaults: true } : {};

  const spacingStyles = getSpacingStyles(attributes);

  const richTextStyle = {
    fontFamily: getFontFamilyValue(attributes.fontFamily) || undefined,
    color: textColor === "transparent" ? "transparent" : hexToRgba(textColor, attributes.textColorAlpha ?? 1),
    "--text-color": textColor === "transparent" ? "transparent" : hexToRgba(textColor, attributes.textColorAlpha ?? 1),
    "--text-shadow": getTextShadowValue(attributes) || undefined,
    "--text-color-hover": attributes.textColorHover === "transparent" ? "transparent" : hexToRgba(attributes.textColorHover, attributes.textColorAlphaHover ?? 1),
    "--text-shadow-hover": getTextShadowValueHover(attributes) || undefined,
    ...getFontSizeStyles(attributes),
    // フォントウェイト（通常状態）- PCのみ（MD/TB/SPはPHP CSSで出力）
    "--font-weight-pc": getFontWeightValue(attributes, "pc"),
    ...(!optimizeFontWeight ? {
      "--font-weight-md": getDirectFontWeight(attributes, "md"),
      "--font-weight-tb": getDirectFontWeight(attributes, "tb"),
      "--font-weight-sp": getDirectFontWeight(attributes, "sp"),
    } : {}),
    // 行間（通常状態）- PCのみ（MD/TB/SPはPHP CSSで出力）
    "--line-height-pc": getLineHeightValue(attributes, "pc"),
    ...(!optimizeLineHeight ? {
      "--line-height-md": getDirectLineHeight(attributes, "md"),
      "--line-height-tb": getDirectLineHeight(attributes, "tb"),
      "--line-height-sp": getDirectLineHeight(attributes, "sp"),
    } : {}),
    // テキストメインの高さ（通常状態）- PCのみ（MD/TB/SPはPHP CSSで出力）
    "--text-main-height-pc": `${getLineHeightValue(attributes, "pc") || "1.6"}em`,
    ...(!optimizeLineHeight ? {
      "--text-main-height-md": getDirectLineHeight(attributes, "md") ? `${getDirectLineHeight(attributes, "md")}em` : undefined,
      "--text-main-height-tb": getDirectLineHeight(attributes, "tb") ? `${getDirectLineHeight(attributes, "tb")}em` : undefined,
      "--text-main-height-sp": getDirectLineHeight(attributes, "sp") ? `${getDirectLineHeight(attributes, "sp")}em` : undefined,
    } : {}),
    // 文字間（通常状態）- PCのみ（MD/TB/SPはPHP CSSで出力）
    "--letter-spacing-pc": getLetterSpacingValue(attributes, "pc"),
    ...(!optimizeLetterSpacing ? {
      "--letter-spacing-md": getDirectLetterSpacing(attributes, "md"),
      "--letter-spacing-tb": getDirectLetterSpacing(attributes, "tb"),
      "--letter-spacing-sp": getDirectLetterSpacing(attributes, "sp"),
    } : {}),
    "--copy-micro-text-color": attributes.copyMicroTextColor || undefined,
    "--copy-micro-bg-color": attributes.copyMicroBgUseGradient ? "transparent" : (attributes.copyMicroBgColor || undefined),
    "--copy-micro-bg-gradient": attributes.copyMicroBgUseGradient ? (attributes.copyMicroBgGradient || undefined) : undefined,
    "--copy-micro-bg-gradient-mid-color": attributes.copyMicroBgUseGradient ? (getGradientColorAtPosition(attributes.copyMicroBgGradient, 50) || undefined) : undefined,
    "--copy-micro-border-width": `${getBorderValueV8(attributes, "copyMicroBorderV2", "pc", "width")}px`,
    "--copy-micro-border-width-pc": getDirectBorderValueV8(attributes, "copyMicroBorderV2", "pc", "width") !== undefined ? `${getDirectBorderValueV8(attributes, "copyMicroBorderV2", "pc", "width")}px` : undefined,
    "--copy-micro-border-style": getBorderValueV8(attributes, "copyMicroBorderV2", "pc", "style") || "solid",
    "--copy-micro-border-style-pc": getDirectBorderValueV8(attributes, "copyMicroBorderV2", "pc", "style"),
    "--copy-micro-border-color": getBorderValueV8(attributes, "copyMicroBorderV2", "pc", "color") || "#000000",
    "--copy-micro-border-color-pc": getDirectBorderValueV8(attributes, "copyMicroBorderV2", "pc", "color"),
    "--copy-micro-border-radius": getRadiusSimpleV8(attributes, "copyMicroBorderRadiusV2", "pc", "0px"),
    "--copy-micro-font-family": attributes.copyMicroFontFamily || undefined,
    "--copy-micro-font-size": attributes.copyMicroFontSize ? `${attributes.copyMicroFontSize}${attributes.copyMicroFontSizeUnit || "em"}` : undefined,
    "--copy-micro-margin-top-pc": getDirectMarginV8(attributes, "copyMicroMarginV2", "pc", "top") ?? "0px",
    "--copy-micro-margin-right-pc": getDirectMarginV8(attributes, "copyMicroMarginV2", "pc", "right") ?? "auto",
    "--copy-micro-margin-bottom-pc": getDirectMarginV8(attributes, "copyMicroMarginV2", "pc", "bottom") ?? "8px",
    "--copy-micro-margin-left-pc": getDirectMarginV8(attributes, "copyMicroMarginV2", "pc", "left") ?? "auto",
    "--copy-micro-padding-top-pc": getDirectPaddingV8(attributes, "copyMicroPaddingV2", "pc", "top") ?? "0px",
    "--copy-micro-padding-right-pc": getDirectPaddingV8(attributes, "copyMicroPaddingV2", "pc", "right") ?? "0px",
    "--copy-micro-padding-bottom-pc": getDirectPaddingV8(attributes, "copyMicroPaddingV2", "pc", "bottom") ?? "0px",
    "--copy-micro-padding-left-pc": getDirectPaddingV8(attributes, "copyMicroPaddingV2", "pc", "left") ?? "0px",
    "--copy-micro-rotate": attributes.copyMicroRotate ? `${attributes.copyMicroRotate}deg` : undefined,
    "--copy-sub-margin-top-pc": getDirectMarginV8(attributes, "copySubMarginV2", "pc", "top") ?? "8px",
    "--copy-sub-margin-right-pc": getDirectMarginV8(attributes, "copySubMarginV2", "pc", "right") ?? "auto",
    "--copy-sub-margin-bottom-pc": getDirectMarginV8(attributes, "copySubMarginV2", "pc", "bottom") ?? "0px",
    "--copy-sub-margin-left-pc": getDirectMarginV8(attributes, "copySubMarginV2", "pc", "left") ?? "auto",
    "--copy-sub-padding-top-pc": getDirectPaddingV8(attributes, "copySubPaddingV2", "pc", "top") ?? "0px",
    "--copy-sub-padding-right-pc": getDirectPaddingV8(attributes, "copySubPaddingV2", "pc", "right") ?? "0px",
    "--copy-sub-padding-bottom-pc": getDirectPaddingV8(attributes, "copySubPaddingV2", "pc", "bottom") ?? "0px",
    "--copy-sub-padding-left-pc": getDirectPaddingV8(attributes, "copySubPaddingV2", "pc", "left") ?? "0px",
    "--copy-sub-rotate": attributes.copySubRotate ? `${attributes.copySubRotate}deg` : undefined,
    "--copy-sub-text-color": attributes.copySubTextColor || undefined,
    "--copy-micro-font-family": getFontFamilyValueV8(attributes.copyMicroFontFamilyV2) || undefined,
    "--copy-micro-font-size-pc": getDirectFontSizeV8(attributes, "copyMicroFontSizeV2", "pc") || undefined,
    "--copy-micro-font-weight-pc": getDirectFontWeightV8(attributes, "copyMicroFontWeightV2", "pc") || undefined,
    "--copy-micro-letter-spacing-pc": getDirectLetterSpacingV8(attributes, "copyMicroLetterSpacingV2", "pc") || undefined,
    "--copy-micro-line-height-pc": getDirectLineHeightV8New(attributes, "copyMicroLineHeightV2", "pc") || undefined,
    "--copy-micro-text-shadow": getTextShadowValueV2(attributes.copyMicroTextShadowV2, "pc") || undefined,
    "--copy-sub-font-family": getFontFamilyValueV8(attributes.copySubFontFamilyV2) || undefined,
    "--copy-sub-font-size-pc": getDirectFontSizeV8(attributes, "copySubFontSizeV2", "pc") || undefined,
    "--copy-sub-font-weight-pc": getDirectFontWeightV8(attributes, "copySubFontWeightV2", "pc") || undefined,
    "--copy-sub-letter-spacing-pc": getDirectLetterSpacingV8(attributes, "copySubLetterSpacingV2", "pc") || undefined,
    "--copy-sub-line-height-pc": getDirectLineHeightV8New(attributes, "copySubLineHeightV2", "pc") || undefined,
    "--copy-sub-text-shadow": getTextShadowValueV2(attributes.copySubTextShadowV2, "pc") || undefined,
    // マイクロテキスト レイアウト V2 - PCのみ（MD/TB/SPはPHP CSSで出力）
    "--micro-text-margin-top-pc": getDirectMarginV8(attributes, "microTextMarginV2", "pc", "top") ?? "0px",
    "--micro-text-margin-right-pc": getDirectMarginV8(attributes, "microTextMarginV2", "pc", "right") ?? "0px",
    "--micro-text-margin-bottom-pc": getDirectMarginV8(attributes, "microTextMarginV2", "pc", "bottom") ?? "0px",
    "--micro-text-margin-left-pc": getDirectMarginV8(attributes, "microTextMarginV2", "pc", "left") ?? "0px",
    "--micro-text-padding-top-pc": getDirectPaddingV8(attributes, "microTextPaddingV2", "pc", "top") ?? "0px",
    "--micro-text-padding-right-pc": getDirectPaddingV8(attributes, "microTextPaddingV2", "pc", "right") ?? "0px",
    "--micro-text-padding-bottom-pc": getDirectPaddingV8(attributes, "microTextPaddingV2", "pc", "bottom") ?? "0px",
    "--micro-text-padding-left-pc": getDirectPaddingV8(attributes, "microTextPaddingV2", "pc", "left") ?? "0px",
    "--micro-text-rotate-pc": attributes.microTextRotateV2?.pc !== undefined && attributes.microTextRotateV2?.pc !== "" ? `${attributes.microTextRotateV2.pc}deg` : "0deg",
    ...(!optimizeMicroText ? {
      "--micro-text-margin-top-md": getDirectMarginV8(attributes, "microTextMarginV2", "md", "top") || undefined,
      "--micro-text-margin-top-tb": getDirectMarginV8(attributes, "microTextMarginV2", "tb", "top") || undefined,
      "--micro-text-margin-top-sp": getDirectMarginV8(attributes, "microTextMarginV2", "sp", "top") || undefined,
      "--micro-text-margin-right-md": getDirectMarginV8(attributes, "microTextMarginV2", "md", "right") || undefined,
      "--micro-text-margin-right-tb": getDirectMarginV8(attributes, "microTextMarginV2", "tb", "right") || undefined,
      "--micro-text-margin-right-sp": getDirectMarginV8(attributes, "microTextMarginV2", "sp", "right") || undefined,
      "--micro-text-margin-bottom-md": getDirectMarginV8(attributes, "microTextMarginV2", "md", "bottom") || undefined,
      "--micro-text-margin-bottom-tb": getDirectMarginV8(attributes, "microTextMarginV2", "tb", "bottom") || undefined,
      "--micro-text-margin-bottom-sp": getDirectMarginV8(attributes, "microTextMarginV2", "sp", "bottom") || undefined,
      "--micro-text-margin-left-md": getDirectMarginV8(attributes, "microTextMarginV2", "md", "left") || undefined,
      "--micro-text-margin-left-tb": getDirectMarginV8(attributes, "microTextMarginV2", "tb", "left") || undefined,
      "--micro-text-margin-left-sp": getDirectMarginV8(attributes, "microTextMarginV2", "sp", "left") || undefined,
      "--micro-text-padding-top-md": getDirectPaddingV8(attributes, "microTextPaddingV2", "md", "top") || undefined,
      "--micro-text-padding-top-tb": getDirectPaddingV8(attributes, "microTextPaddingV2", "tb", "top") || undefined,
      "--micro-text-padding-top-sp": getDirectPaddingV8(attributes, "microTextPaddingV2", "sp", "top") || undefined,
      "--micro-text-padding-right-md": getDirectPaddingV8(attributes, "microTextPaddingV2", "md", "right") || undefined,
      "--micro-text-padding-right-tb": getDirectPaddingV8(attributes, "microTextPaddingV2", "tb", "right") || undefined,
      "--micro-text-padding-right-sp": getDirectPaddingV8(attributes, "microTextPaddingV2", "sp", "right") || undefined,
      "--micro-text-padding-bottom-md": getDirectPaddingV8(attributes, "microTextPaddingV2", "md", "bottom") || undefined,
      "--micro-text-padding-bottom-tb": getDirectPaddingV8(attributes, "microTextPaddingV2", "tb", "bottom") || undefined,
      "--micro-text-padding-bottom-sp": getDirectPaddingV8(attributes, "microTextPaddingV2", "sp", "bottom") || undefined,
      "--micro-text-padding-left-md": getDirectPaddingV8(attributes, "microTextPaddingV2", "md", "left") || undefined,
      "--micro-text-padding-left-tb": getDirectPaddingV8(attributes, "microTextPaddingV2", "tb", "left") || undefined,
      "--micro-text-padding-left-sp": getDirectPaddingV8(attributes, "microTextPaddingV2", "sp", "left") || undefined,
      "--micro-text-rotate-md": attributes.microTextRotateV2?.md !== undefined && attributes.microTextRotateV2?.md !== "" ? `${attributes.microTextRotateV2.md}deg` : undefined,
      "--micro-text-rotate-tb": attributes.microTextRotateV2?.tb !== undefined && attributes.microTextRotateV2?.tb !== "" ? `${attributes.microTextRotateV2.tb}deg` : undefined,
      "--micro-text-rotate-sp": attributes.microTextRotateV2?.sp !== undefined && attributes.microTextRotateV2?.sp !== "" ? `${attributes.microTextRotateV2.sp}deg` : undefined,
    } : {}),
    "--micro-text-text-color": attributes.microTextTextColor ? hexToRgba(attributes.microTextTextColor, attributes.microTextTextColorAlpha ?? 1) : undefined,
    "--micro-text-text-shadow": getTextShadowValueV2(attributes.microTextTextShadowV2, "pc") || undefined,
    "--micro-text-font-family": getFontFamilyValueV8(attributes.microTextFontFamilyV2) || undefined,
    // マイクロテキスト フォントサイズ - PCのみ（MD/TB/SPはPHP CSSで出力）
    "--micro-text-font-size-pc": getDirectFontSizeV8(attributes, "microTextFontSizeV2", "pc") || undefined,
    ...(!optimizeMicroText ? {
      "--micro-text-font-size-md": getDirectFontSizeV8(attributes, "microTextFontSizeV2", "md") || undefined,
      "--micro-text-font-size-tb": getDirectFontSizeV8(attributes, "microTextFontSizeV2", "tb") || undefined,
      "--micro-text-font-size-sp": getDirectFontSizeV8(attributes, "microTextFontSizeV2", "sp") || undefined,
    } : {}),
    // マイクロテキスト フォントウェイト - PCのみ（MD/TB/SPはPHP CSSで出力）
    "--micro-text-font-weight-pc": getDirectFontWeightV8(attributes, "microTextFontWeightV2", "pc") || undefined,
    ...(!optimizeMicroText ? {
      "--micro-text-font-weight-md": getDirectFontWeightV8(attributes, "microTextFontWeightV2", "md") || undefined,
      "--micro-text-font-weight-tb": getDirectFontWeightV8(attributes, "microTextFontWeightV2", "tb") || undefined,
      "--micro-text-font-weight-sp": getDirectFontWeightV8(attributes, "microTextFontWeightV2", "sp") || undefined,
    } : {}),
    // マイクロテキスト 文字間 - PCのみ（MD/TB/SPはPHP CSSで出力）
    "--micro-text-letter-spacing-pc": getDirectLetterSpacingV8(attributes, "microTextLetterSpacingV2", "pc") || undefined,
    ...(!optimizeMicroText ? {
      "--micro-text-letter-spacing-md": getDirectLetterSpacingV8(attributes, "microTextLetterSpacingV2", "md") || undefined,
      "--micro-text-letter-spacing-tb": getDirectLetterSpacingV8(attributes, "microTextLetterSpacingV2", "tb") || undefined,
      "--micro-text-letter-spacing-sp": getDirectLetterSpacingV8(attributes, "microTextLetterSpacingV2", "sp") || undefined,
    } : {}),
    // マイクロテキスト 行間 - PCのみ（MD/TB/SPはPHP CSSで出力）
    "--micro-text-line-height-pc": getDirectLineHeightV8(attributes, "microTextLineHeightV2", "pc") || undefined,
    ...(!optimizeMicroText ? {
      "--micro-text-line-height-md": getDirectLineHeightV8(attributes, "microTextLineHeightV2", "md") || undefined,
      "--micro-text-line-height-tb": getDirectLineHeightV8(attributes, "microTextLineHeightV2", "tb") || undefined,
      "--micro-text-line-height-sp": getDirectLineHeightV8(attributes, "microTextLineHeightV2", "sp") || undefined,
    } : {}),
    // サブテキスト レイアウト V2（レスポンシブ対応）
    "--sub-text-margin-top-pc": getDirectMarginV8(attributes, "subTextMarginV2", "pc", "top") ?? "0px",
    "--sub-text-margin-top-md": getDirectMarginV8(attributes, "subTextMarginV2", "md", "top") || undefined,
    "--sub-text-margin-top-tb": getDirectMarginV8(attributes, "subTextMarginV2", "tb", "top") || undefined,
    "--sub-text-margin-top-sp": getDirectMarginV8(attributes, "subTextMarginV2", "sp", "top") || undefined,
    "--sub-text-margin-right-pc": getDirectMarginV8(attributes, "subTextMarginV2", "pc", "right") ?? "0px",
    "--sub-text-margin-right-md": getDirectMarginV8(attributes, "subTextMarginV2", "md", "right") || undefined,
    "--sub-text-margin-right-tb": getDirectMarginV8(attributes, "subTextMarginV2", "tb", "right") || undefined,
    "--sub-text-margin-right-sp": getDirectMarginV8(attributes, "subTextMarginV2", "sp", "right") || undefined,
    "--sub-text-margin-bottom-pc": getDirectMarginV8(attributes, "subTextMarginV2", "pc", "bottom") ?? "0px",
    "--sub-text-margin-bottom-md": getDirectMarginV8(attributes, "subTextMarginV2", "md", "bottom") || undefined,
    "--sub-text-margin-bottom-tb": getDirectMarginV8(attributes, "subTextMarginV2", "tb", "bottom") || undefined,
    "--sub-text-margin-bottom-sp": getDirectMarginV8(attributes, "subTextMarginV2", "sp", "bottom") || undefined,
    "--sub-text-margin-left-pc": getDirectMarginV8(attributes, "subTextMarginV2", "pc", "left") ?? "0px",
    "--sub-text-margin-left-md": getDirectMarginV8(attributes, "subTextMarginV2", "md", "left") || undefined,
    "--sub-text-margin-left-tb": getDirectMarginV8(attributes, "subTextMarginV2", "tb", "left") || undefined,
    "--sub-text-margin-left-sp": getDirectMarginV8(attributes, "subTextMarginV2", "sp", "left") || undefined,
    "--sub-text-padding-top-pc": getDirectPaddingV8(attributes, "subTextPaddingV2", "pc", "top") ?? "0px",
    "--sub-text-padding-top-md": getDirectPaddingV8(attributes, "subTextPaddingV2", "md", "top") || undefined,
    "--sub-text-padding-top-tb": getDirectPaddingV8(attributes, "subTextPaddingV2", "tb", "top") || undefined,
    "--sub-text-padding-top-sp": getDirectPaddingV8(attributes, "subTextPaddingV2", "sp", "top") || undefined,
    "--sub-text-padding-right-pc": getDirectPaddingV8(attributes, "subTextPaddingV2", "pc", "right") ?? "0px",
    "--sub-text-padding-right-md": getDirectPaddingV8(attributes, "subTextPaddingV2", "md", "right") || undefined,
    "--sub-text-padding-right-tb": getDirectPaddingV8(attributes, "subTextPaddingV2", "tb", "right") || undefined,
    "--sub-text-padding-right-sp": getDirectPaddingV8(attributes, "subTextPaddingV2", "sp", "right") || undefined,
    "--sub-text-padding-bottom-pc": getDirectPaddingV8(attributes, "subTextPaddingV2", "pc", "bottom") ?? "0px",
    "--sub-text-padding-bottom-md": getDirectPaddingV8(attributes, "subTextPaddingV2", "md", "bottom") || undefined,
    "--sub-text-padding-bottom-tb": getDirectPaddingV8(attributes, "subTextPaddingV2", "tb", "bottom") || undefined,
    "--sub-text-padding-bottom-sp": getDirectPaddingV8(attributes, "subTextPaddingV2", "sp", "bottom") || undefined,
    "--sub-text-padding-left-pc": getDirectPaddingV8(attributes, "subTextPaddingV2", "pc", "left") ?? "0px",
    "--sub-text-padding-left-md": getDirectPaddingV8(attributes, "subTextPaddingV2", "md", "left") || undefined,
    "--sub-text-padding-left-tb": getDirectPaddingV8(attributes, "subTextPaddingV2", "tb", "left") || undefined,
    "--sub-text-padding-left-sp": getDirectPaddingV8(attributes, "subTextPaddingV2", "sp", "left") || undefined,
    "--sub-text-rotate-pc": attributes.subTextRotateV2?.pc !== undefined && attributes.subTextRotateV2?.pc !== "" ? `${attributes.subTextRotateV2.pc}deg` : "0deg",
    "--sub-text-rotate-md": attributes.subTextRotateV2?.md !== undefined && attributes.subTextRotateV2?.md !== "" ? `${attributes.subTextRotateV2.md}deg` : undefined,
    "--sub-text-rotate-tb": attributes.subTextRotateV2?.tb !== undefined && attributes.subTextRotateV2?.tb !== "" ? `${attributes.subTextRotateV2.tb}deg` : undefined,
    "--sub-text-rotate-sp": attributes.subTextRotateV2?.sp !== undefined && attributes.subTextRotateV2?.sp !== "" ? `${attributes.subTextRotateV2.sp}deg` : undefined,
    "--sub-text-text-color": attributes.subTextTextColor ? hexToRgba(attributes.subTextTextColor, attributes.subTextTextColorAlpha ?? 1) : undefined,
    "--sub-text-text-shadow": getTextShadowValueV2(attributes.subTextTextShadowV2, "pc") || undefined,
    "--sub-text-font-family": getFontFamilyValueV8(attributes.subTextFontFamilyV2) || undefined,
    // サブテキスト フォントサイズ - レスポンシブ対応
    "--sub-text-font-size-pc": getDirectFontSizeV8(attributes, "subTextFontSizeV2", "pc") || undefined,
    "--sub-text-font-size-md": getDirectFontSizeV8(attributes, "subTextFontSizeV2", "md") || undefined,
    "--sub-text-font-size-tb": getDirectFontSizeV8(attributes, "subTextFontSizeV2", "tb") || undefined,
    "--sub-text-font-size-sp": getDirectFontSizeV8(attributes, "subTextFontSizeV2", "sp") || undefined,
    // サブテキスト フォントウェイト - レスポンシブ対応
    "--sub-text-font-weight-pc": getDirectFontWeightV8(attributes, "subTextFontWeightV2", "pc") || undefined,
    "--sub-text-font-weight-md": getDirectFontWeightV8(attributes, "subTextFontWeightV2", "md") || undefined,
    "--sub-text-font-weight-tb": getDirectFontWeightV8(attributes, "subTextFontWeightV2", "tb") || undefined,
    "--sub-text-font-weight-sp": getDirectFontWeightV8(attributes, "subTextFontWeightV2", "sp") || undefined,
    // サブテキスト 文字間 - レスポンシブ対応
    "--sub-text-letter-spacing-pc": getDirectLetterSpacingV8(attributes, "subTextLetterSpacingV2", "pc") || undefined,
    "--sub-text-letter-spacing-md": getDirectLetterSpacingV8(attributes, "subTextLetterSpacingV2", "md") || undefined,
    "--sub-text-letter-spacing-tb": getDirectLetterSpacingV8(attributes, "subTextLetterSpacingV2", "tb") || undefined,
    "--sub-text-letter-spacing-sp": getDirectLetterSpacingV8(attributes, "subTextLetterSpacingV2", "sp") || undefined,
    // サブテキスト 行間 - レスポンシブ対応
    "--sub-text-line-height-pc": getDirectLineHeightV8(attributes, "subTextLineHeightV2", "pc") || undefined,
    "--sub-text-line-height-md": getDirectLineHeightV8(attributes, "subTextLineHeightV2", "md") || undefined,
    "--sub-text-line-height-tb": getDirectLineHeightV8(attributes, "subTextLineHeightV2", "tb") || undefined,
    "--sub-text-line-height-sp": getDirectLineHeightV8(attributes, "subTextLineHeightV2", "sp") || undefined,
    "--font-family": getFontFamilyValue(attributes.fontFamily) || "inherit",
    ...getFontSizeHoverStyles(attributes),
    // フォントウェイト（ホバー状態）- PCのみ（MD/TB/SPはPHP CSSで出力）
    "--font-weight-pc-hover": getFontWeightValueHover(attributes, "pc") || undefined,
    ...(!optimizeFontWeight ? {
      "--font-weight-md-hover": getDirectFontWeight(attributes, "md", true) || undefined,
      "--font-weight-tb-hover": getDirectFontWeight(attributes, "tb", true) || undefined,
      "--font-weight-sp-hover": getDirectFontWeight(attributes, "sp", true) || undefined,
    } : {}),
    // 行間（ホバー状態）- PCのみ（MD/TB/SPはPHP CSSで出力）
    "--line-height-pc-hover": getLineHeightValueHover(attributes, "pc") || undefined,
    ...(!optimizeLineHeight ? {
      "--line-height-md-hover": getDirectLineHeight(attributes, "md", true) || undefined,
      "--line-height-tb-hover": getDirectLineHeight(attributes, "tb", true) || undefined,
      "--line-height-sp-hover": getDirectLineHeight(attributes, "sp", true) || undefined,
    } : {}),
    // 文字間（ホバー状態）- PCのみ（MD/TB/SPはPHP CSSで出力）
    "--letter-spacing-pc-hover": getLetterSpacingValueHover(attributes, "pc") || undefined,
    ...(!optimizeLetterSpacing ? {
      "--letter-spacing-md-hover": getDirectLetterSpacing(attributes, "md", true) || undefined,
      "--letter-spacing-tb-hover": getDirectLetterSpacing(attributes, "tb", true) || undefined,
      "--letter-spacing-sp-hover": getDirectLetterSpacing(attributes, "sp", true) || undefined,
    } : {}),
    "--font-family-hover": getFontFamilyValue(attributes.fontFamilyHover) || undefined,
    ...spacingStyles,
    ...getBackgroundColorStylesV2(attributes),
    ...getBackgroundColorHoverStylesV2(attributes),
    ...getBackgroundImageStylesV2(attributes),
    ...getBackgroundImageHoverStylesV2(attributes),
    ...getBackgroundBaseColorStylesV2(attributes),
    ...getBackgroundBaseColorHoverStylesV2(attributes),
    ...getBackgroundPatternStylesV2(attributes),
    ...getBackgroundPatternHoverStylesV2(attributes),
    ...(attributes.backgroundMediaType === "video"
      ? {
          "--background-video-fit": backgroundVideoFit,
          "--background-video-position-x": `${backgroundVideoPositionX}%`,
          "--background-video-position-y": `${backgroundVideoPositionY}%`,
          "--background-video-offset-x": `${backgroundVideoPositionX - 50}%`,
          "--background-video-offset-y": `${backgroundVideoPositionY - 50}%`,
          "--background-video-width": videoSize.width,
          "--background-video-height": videoSize.height,
          "--background-video-embed-width": videoSize.embedWidth,
          "--background-video-embed-height": videoSize.embedHeight,
          "--background-poster-size": posterSize.backgroundSize,
          "--background-poster-position-x": `${backgroundPosterPositionX}%`,
          "--background-poster-position-y": `${backgroundPosterPositionY}%`,
          "--background-video-poster-image": attributes.backgroundVideoPoster ? `url(${attributes.backgroundVideoPoster})` : "none",
        }
      : {}),
    ...getBorderStyles(attributes, defOpts),
    ...getBorderHoverStyles(attributes, defOpts),
    ...getRadiusStyles(attributes, defOpts),
    ...getRadiusHoverStyles(attributes, defOpts),
    ...getShadowStyles(attributes, defOpts),
    ...getShadowHoverStyles(attributes, defOpts),
    ...getInnerShadowStyles(attributes, defOpts),
    ...getInnerShadowHoverStyles(attributes, defOpts),
    ...getOpacityStyles(attributes, defOpts),
    ...getOpacityHoverStyles(attributes, defOpts),
    ...getLayoutWidthStylesV2(attributes),
    ...getLayoutHeightStylesV2(attributes),
    ...getLayoutPositionStyles(attributes),
    ...getIconSizeStylesV2(attributes),
    ...getIconSizeHoverStylesV2(attributes),
    ...getIconPositionStylesV2(attributes),
    ...getIconPositionHoverStylesV2(attributes),
    ...((attributes.iconPositionV2 || attributes.iconSizeV2) ? {} : getIconStyles(attributes, getIconSizeValue, getIconSizeWithInheritance)),
    ...((attributes.iconPositionV2 || attributes.iconSizeV2) ? {} : getIconHoverStyles(attributes, getIconSizeValueHover, getIconSizeHoverWithInheritance)),
    ...getIconColorStylesV2(attributes),
    ...getIconColorHoverStylesV2(attributes),
    "--button-content-justify": attributes.buttonContentJustify || "center",
    "--text-align": attributes.textAlign || "center",
    "--text-align-items": attributes.textAlign === "left" ? "flex-start" : attributes.textAlign === "right" ? "flex-end" : "center",
    ...getIconFrameStyles(attributes),
    ...getIconFrameHoverStyles(attributes),
    ...getIconFrameStylesV2(attributes),
    ...getIconFrameHoverStylesV2(attributes),
    ...(hasThumbnailImage(attributes) ? getThumbnailStylesForElement(attributes) : {}),
    ...getBandStylesForElement(attributes, defOpts),
    // Transition/Animation variables
    // Always output: block.json default ≠ SCSS fallback, or no SCSS fallback
    "--text-animation-duration": `${attributes.textAnimationTransitionDuration || 300}ms`,
    "--text-animation-easing": attributes.textAnimationTransitionEasing || "ease-out",
    "--icon-transition-duration": `${attributes.iconTransitionDuration ?? 300}ms`,
    "--style-transition-duration": `${attributes.styleTransitionDuration ?? 300}ms`,
    "--frame-animation-interval": `${attributes.frameAnimationInterval ?? 1000}ms`,
    "--frame-animation-total": `${(attributes.frameAnimationTransitionDuration || 2000) + (attributes.frameAnimationInterval ?? 1000)}ms`,
    "--button-animation-duration": `${attributes.buttonAnimationTransitionDuration || 2000}ms`,
    "--button-animation-interval": `${attributes.buttonAnimationInterval ?? 1000}ms`,
    "--button-animation-total": `${(attributes.buttonAnimationTransitionDuration || 2000) + (attributes.buttonAnimationInterval ?? 1000)}ms`,
    // Conditionally skip: value matches SCSS fallback default
    ...(optimizeDefaults && (attributes.textAnimationTransitionDelay || 0) === 0 ? {} : { "--text-animation-delay": `${attributes.textAnimationTransitionDelay || 0}ms` }),
    ...(optimizeDefaults && (attributes.iconAnimationTransitionDuration || 500) === 500 ? {} : { "--icon-animation-duration": `${attributes.iconAnimationTransitionDuration || 500}ms` }),
    ...(optimizeDefaults && (attributes.iconAnimationTransitionDelay || 200) === 200 ? {} : { "--icon-animation-delay": `${attributes.iconAnimationTransitionDelay || 200}ms` }),
    ...(optimizeDefaults && (attributes.iconTransitionDelay ?? 0) === 0 ? {} : { "--icon-transition-delay": `${attributes.iconTransitionDelay ?? 0}ms` }),
    ...(optimizeDefaults && (attributes.iconTransitionEasing || "ease") === "ease" ? {} : { "--icon-transition-easing": attributes.iconTransitionEasing || "ease" }),
    ...(optimizeDefaults && (attributes.frameAnimationTransitionDuration || 2000) === 2000 ? {} : { "--frame-animation-duration": `${attributes.frameAnimationTransitionDuration || 2000}ms` }),
    ...(optimizeDefaults && (attributes.frameAnimationTransitionEasing || "ease-in-out") === "ease-in-out" ? {} : { "--frame-animation-easing": attributes.frameAnimationTransitionEasing || "ease-in-out" }),
    ...(optimizeDefaults && (attributes.buttonAnimationTransitionEasing || "ease-in-out") === "ease-in-out" ? {} : { "--button-animation-easing": attributes.buttonAnimationTransitionEasing || "ease-in-out" }),
    ...(optimizeDefaults && (attributes.backgroundTransitionDuration ?? 150) === 150 ? {} : { "--background-transition-duration": `${attributes.backgroundTransitionDuration ?? 150}ms` }),
    ...(optimizeDefaults && (attributes.backgroundTransitionDelay ?? 0) === 0 ? {} : { "--background-transition-delay": `${attributes.backgroundTransitionDelay ?? 0}ms` }),
    ...(optimizeDefaults && (attributes.backgroundTransitionEasing || "ease") === "ease" ? {} : { "--background-transition-easing": attributes.backgroundTransitionEasing || "ease" }),
    ...(optimizeDefaults && (attributes.thumbnailTransitionDuration ?? 300) === 300 ? {} : { "--thumbnail-transition-duration": `${attributes.thumbnailTransitionDuration ?? 300}ms` }),
    ...(optimizeDefaults && (attributes.thumbnailTransitionDelay ?? 0) === 0 ? {} : { "--thumbnail-transition-delay": `${attributes.thumbnailTransitionDelay ?? 0}ms` }),
    ...(optimizeDefaults && (attributes.thumbnailTransitionEasing || "ease") === "ease" ? {} : { "--thumbnail-transition-easing": attributes.thumbnailTransitionEasing || "ease" }),
    ...(optimizeDefaults && (attributes.bandTransitionDuration ?? 300) === 300 ? {} : { "--band-transition-duration": `${attributes.bandTransitionDuration ?? 300}ms` }),
    ...(optimizeDefaults && (attributes.bandTransitionDelay ?? 0) === 0 ? {} : { "--band-transition-delay": `${attributes.bandTransitionDelay ?? 0}ms` }),
    ...(optimizeDefaults && (attributes.bandTransitionEasing || "ease") === "ease" ? {} : { "--band-transition-easing": attributes.bandTransitionEasing || "ease" }),
    ...(optimizeDefaults && (attributes.styleTransitionDelay ?? 0) === 0 ? {} : { "--style-transition-delay": `${attributes.styleTransitionDelay ?? 0}ms` }),
    ...(optimizeDefaults && (attributes.styleTransitionEasing || "ease") === "ease" ? {} : { "--style-transition-easing": attributes.styleTransitionEasing || "ease" }),
    ...(optimizeDefaults && (attributes.iconAnimationTransitionEasing || "ease-in-out") === "ease-in-out" ? {} : { "--icon-animation-easing": attributes.iconAnimationTransitionEasing || "ease-in-out" }),
    // Layer z-index
    ...(attributes.layerZIndex?.content !== undefined && attributes.layerZIndex.content !== 20 ? { "--layer-z-index-content": attributes.layerZIndex.content } : {}),
    ...(attributes.layerZIndex?.thumbnail !== undefined && attributes.layerZIndex.thumbnail !== 10 ? { "--layer-z-index-thumbnail": attributes.layerZIndex.thumbnail } : {}),
    ...(attributes.layerZIndex?.band !== undefined && attributes.layerZIndex.band !== 5 ? { "--layer-z-index-band": attributes.layerZIndex.band } : {}),
    ...(attributes.layerZIndex?.bg !== undefined && attributes.layerZIndex.bg !== 0 ? { "--layer-z-index-bg": attributes.layerZIndex.bg } : {}),
  };

  const displayClasses = getDisplayClassesV2(attributes);
  const frameAnimationClass = attributes.frameAnimation && attributes.frameAnimation !== "none" ? ` zenblocks-button-frame-animation-${attributes.frameAnimation}` : "";
  const buttonAnimationClass = attributes.buttonAnimation && attributes.buttonAnimation !== "none" ? ` zenblocks-button-animation-${attributes.buttonAnimation}` : "";
  const microcopyDesignClass = attributes.copyMicro ? ` zenblocks-microcopy-${attributes.copyMicroDesign || "01"}` : "";
  const uniqueIdClass = attributes.uniqueId ? ` zenblocks-${attributes.uniqueId}` : "";

  const blockProps = useBlockProps.save({
    className: `wp-block-zenblocks-button-basic zenblocks-button-hover-animation-icon-${attributes.iconAnimation || "01"} zenblocks-button-hover-animation-text-${
      attributes.hoverAnimation || "01"
    }${frameAnimationClass}${buttonAnimationClass}${microcopyDesignClass}${uniqueIdClass}${attributes.layoutUseCustomPositionPC ? " is-custom-position-pc" : ""}${attributes.layoutUseCustomPositionMD ? " is-custom-position-md" : ""}${
      attributes.layoutUseCustomPositionTB ? " is-custom-position-tb" : ""
    }${attributes.layoutUseCustomPositionSP ? " is-custom-position-sp" : ""}${attributes.backgroundMediaType === "video" ? " is-bg-video" : ""}${displayClasses.length > 0 ? " " + displayClasses.join(" ") : ""}`.trim(),
    style: richTextStyle,
  });

  return (
    <div {...blockProps}>
      {copyMicro && <span className="wp-block-zenblocks-button-basic-copy-micro"><span className="wp-block-zenblocks-button-basic-copy-micro-contents">{copyMicro}</span></span>}
      {tagName === "a" ? (
        <a
          href={href || "#"}
          target={target || undefined}
          rel={target === "_blank" ? (rel ? (rel.includes("noopener") ? rel : `${rel} noopener`) : "noopener") : (rel || undefined)}
          title={linkTitle || undefined}
          aria-label={ariaLabel || undefined}
          role={!href || href === "#" ? "button" : undefined}
          data-click-id={trackingId || undefined}
          data-button-location={trackingLocation || undefined}
          className={
            attributes.icon ||
            attributes.iconPC ||
            attributes.iconMD ||
            attributes.iconTB ||
            attributes.iconSP ||
            (attributes.iconFrameUseIndividualSize ? attributes.iconFrameWidth > 0 || attributes.iconFrameHeight > 0 : attributes.iconFrameSize > 0)
              ? "has-icon"
              : ""
          }
        >
          <span className="wp-block-zenblocks-button-basic-content">
            {(attributes.icon ||
              attributes.iconPC ||
              attributes.iconMD ||
              attributes.iconTB ||
              attributes.iconSP ||
              (attributes.iconFrameUseIndividualSize ? attributes.iconFrameWidth > 0 || attributes.iconFrameHeight > 0 : attributes.iconFrameSize > 0)) && (
              <span
                className={`wp-block-zenblocks-button-basic-icon${
                  attributes.iconFrameSize > 0 || attributes.iconFrameSizePC > 0 || attributes.iconFrameWidth > 0 || attributes.iconFrameWidthPC > 0 || attributes.iconFrameHeight > 0 || attributes.iconFrameHeightPC > 0 || attributes.iconFrameBgColor || attributes.iconFrameBgColorPC || attributes.iconFrameBorderColor || attributes.iconFrameBorderColorPC ? " wrap_icon" : ""
                }${attributes.useResponsiveIcon ? " responsive-icon" : ""}`}
              >
                <span
                  className="default icon-pc"
                  dangerouslySetInnerHTML={{
                    __html:
                      attributes.iconPC || attributes.icon
                        ? renderSVGIcon(
                            attributes.iconPC || attributes.icon,
                            getCurrentIconColor(attributes.iconPC || attributes.icon, attributes.iconColorPC || attributes.iconColor, textColor),
                            attributes.iconStrokeWidth || 1.75,
                          )
                        : "",
                  }}
                />
                {renderAllIcons && (
                <span
                  className="default icon-md"
                  dangerouslySetInnerHTML={{
                    __html:
                      attributes.iconMD || attributes.iconPC || attributes.icon
                        ? renderSVGIcon(
                            attributes.iconMD || attributes.iconPC || attributes.icon,
                            getCurrentIconColor(attributes.iconMD || attributes.iconPC || attributes.icon, attributes.iconColorMD || attributes.iconColorPC || attributes.iconColor, textColor),
                            attributes.iconStrokeWidth || 1.75,
                          )
                        : "",
                  }}
                />
                )}
                {renderAllIcons && (
                <span
                  className="default icon-tb"
                  dangerouslySetInnerHTML={{
                    __html:
                      attributes.iconTB || attributes.iconMD || attributes.iconPC || attributes.icon
                        ? renderSVGIcon(
                            attributes.iconTB || attributes.iconMD || attributes.iconPC || attributes.icon,
                            getCurrentIconColor(
                              attributes.iconTB || attributes.iconMD || attributes.iconPC || attributes.icon,
                              attributes.iconColorTB || attributes.iconColorMD || attributes.iconColorPC || attributes.iconColor,
                              textColor,
                            ),
                            attributes.iconStrokeWidth || 1.75,
                          )
                        : "",
                  }}
                />
                )}
                {renderAllIcons && (
                <span
                  className="default icon-sp"
                  dangerouslySetInnerHTML={{
                    __html:
                      attributes.iconSP || attributes.iconTB || attributes.iconMD || attributes.iconPC || attributes.icon
                        ? renderSVGIcon(
                            attributes.iconSP || attributes.iconTB || attributes.iconMD || attributes.iconPC || attributes.icon,
                            getCurrentIconColor(
                              attributes.iconSP || attributes.iconTB || attributes.iconMD || attributes.iconPC || attributes.icon,
                              attributes.iconColorSP || attributes.iconColorTB || attributes.iconColorMD || attributes.iconColorPC || attributes.iconColor,
                              textColor,
                            ),
                            attributes.iconStrokeWidth || 1.75,
                          )
                        : "",
                  }}
                />
                )}
                <span
                  className="hover icon-pc"
                  dangerouslySetInnerHTML={{
                    __html:
                      attributes.iconPCHover || attributes.iconHover || attributes.iconPC || attributes.icon
                        ? renderSVGIcon(
                            attributes.iconPCHover || attributes.iconHover || attributes.iconPC || attributes.icon,
                            getCurrentIconColor(
                              attributes.iconPCHover || attributes.iconHover || attributes.iconPC || attributes.icon,
                              attributes.iconColorPCHover || attributes.iconColorHover || attributes.iconColorPC || attributes.iconColor,
                              attributes.textColorHover || textColor,
                            ),
                            attributes.iconStrokeWidthHover || attributes.iconStrokeWidth || 1.75,
                          )
                        : "",
                  }}
                />
                {renderAllIcons && (
                <span
                  className="hover icon-md"
                  dangerouslySetInnerHTML={{
                    __html:
                      attributes.iconMDHover || attributes.iconPCHover || attributes.iconHover || attributes.iconMD || attributes.iconPC || attributes.icon
                        ? renderSVGIcon(
                            attributes.iconMDHover || attributes.iconPCHover || attributes.iconHover || attributes.iconMD || attributes.iconPC || attributes.icon,
                            getCurrentIconColor(
                              attributes.iconMDHover || attributes.iconPCHover || attributes.iconHover || attributes.iconMD || attributes.iconPC || attributes.icon,
                              attributes.iconColorMDHover || attributes.iconColorPCHover || attributes.iconColorHover || attributes.iconColorMD || attributes.iconColorPC || attributes.iconColor,
                              attributes.textColorHover || textColor,
                            ),
                            attributes.iconStrokeWidthHover || attributes.iconStrokeWidth || 1.75,
                          )
                        : "",
                  }}
                />
                )}
                {renderAllIcons && (
                <span
                  className="hover icon-tb"
                  dangerouslySetInnerHTML={{
                    __html:
                      attributes.iconTBHover ||
                      attributes.iconMDHover ||
                      attributes.iconPCHover ||
                      attributes.iconHover ||
                      attributes.iconTB ||
                      attributes.iconMD ||
                      attributes.iconPC ||
                      attributes.icon
                        ? renderSVGIcon(
                            attributes.iconTBHover ||
                              attributes.iconMDHover ||
                              attributes.iconPCHover ||
                              attributes.iconHover ||
                              attributes.iconTB ||
                              attributes.iconMD ||
                              attributes.iconPC ||
                              attributes.icon,
                            getCurrentIconColor(
                              attributes.iconTBHover ||
                                attributes.iconMDHover ||
                                attributes.iconPCHover ||
                                attributes.iconHover ||
                                attributes.iconTB ||
                                attributes.iconMD ||
                                attributes.iconPC ||
                                attributes.icon,
                              attributes.iconColorTBHover ||
                                attributes.iconColorMDHover ||
                                attributes.iconColorPCHover ||
                                attributes.iconColorHover ||
                                attributes.iconColorTB ||
                                attributes.iconColorMD ||
                                attributes.iconColorPC ||
                                attributes.iconColor,
                              attributes.textColorHover || textColor,
                            ),
                            attributes.iconStrokeWidthHover || attributes.iconStrokeWidth || 1.75,
                          )
                        : "",
                  }}
                />
                )}
                {renderAllIcons && (
                <span
                  className="hover icon-sp"
                  dangerouslySetInnerHTML={{
                    __html:
                      attributes.iconSPHover ||
                      attributes.iconTBHover ||
                      attributes.iconMDHover ||
                      attributes.iconPCHover ||
                      attributes.iconHover ||
                      attributes.iconSP ||
                      attributes.iconTB ||
                      attributes.iconMD ||
                      attributes.iconPC ||
                      attributes.icon
                        ? renderSVGIcon(
                            attributes.iconSPHover ||
                              attributes.iconTBHover ||
                              attributes.iconMDHover ||
                              attributes.iconPCHover ||
                              attributes.iconHover ||
                              attributes.iconSP ||
                              attributes.iconTB ||
                              attributes.iconMD ||
                              attributes.iconPC ||
                              attributes.icon,
                            getCurrentIconColor(
                              attributes.iconSPHover ||
                                attributes.iconTBHover ||
                                attributes.iconMDHover ||
                                attributes.iconPCHover ||
                                attributes.iconHover ||
                                attributes.iconSP ||
                                attributes.iconTB ||
                                attributes.iconMD ||
                                attributes.iconPC ||
                                attributes.icon,
                              attributes.iconColorSPHover ||
                                attributes.iconColorTBHover ||
                                attributes.iconColorMDHover ||
                                attributes.iconColorPCHover ||
                                attributes.iconColorHover ||
                                attributes.iconColorSP ||
                                attributes.iconColorTB ||
                                attributes.iconColorMD ||
                                attributes.iconColorPC ||
                                attributes.iconColor,
                              attributes.textColorHover || textColor,
                            ),
                            attributes.iconStrokeWidthHover || attributes.iconStrokeWidth || 1.75,
                          )
                        : "",
                  }}
                />
                )}
              </span>
            )}
            <span className="wp-block-zenblocks-button-basic-text">
              {microText && <span className="wp-block-zenblocks-button-basic-text-micro">{microText}</span>}
              <span className="wp-block-zenblocks-button-basic-text-main">
                <span className="default">{needsCharWrapping ? renderTextWithChars(content) : content}</span>
                <span className="hover" aria-hidden="true">{needsCharWrapping ? renderTextWithChars(hoverText) : hoverText}</span>
              </span>
              {subText && <span className="wp-block-zenblocks-button-basic-text-sub">{subText}</span>}
            </span>
          </span>
          {hasThumbnailMedia(attributes) && (
            <span className="wp-block-zenblocks-button-basic-thumbnail" aria-hidden="true">
              <span className="wp-block-zenblocks-button-basic-thumbnail-overlay default"></span>
              {thumbnailOverlayHover && <span className="wp-block-zenblocks-button-basic-thumbnail-overlay hover"></span>}
              {attributes.thumbnailMediaType === "video" && attributes.thumbnailVideoPoster && <span className="wp-block-zenblocks-button-basic-thumbnail-poster default" style={thumbnailPosterInlineStyle}></span>}
              {attributes.thumbnailMediaType !== "video" && <span className="wp-block-zenblocks-button-basic-thumbnail-image default"></span>}
              {attributes.thumbnailMediaType === "video" && !!attributes.thumbnailVideoUrl && (
                <span className="wp-block-zenblocks-button-basic-thumbnail-movie default">
                  {thumbnailVideoConfig.type === "file" ? (
                    <video
                      src={thumbnailVideoConfig.fileUrl}
                      poster={attributes.thumbnailVideoPoster || undefined}
                      style={thumbnailVideoInlineStyle}
                      autoPlay
                      loop
                      muted
                      playsInline
                      preload="metadata"
                      aria-hidden="true"
                    />
                  ) : isEmbedThumbnailVideo ? (
                    <iframe
                      src={thumbnailVideoConfig.embedUrl}
                      title="Thumbnail video"
                      style={thumbnailIframeInlineStyle}
                      loading="eager"
                      referrerPolicy="strict-origin-when-cross-origin"
                      allow="autoplay; encrypted-media; fullscreen; picture-in-picture"
                      allowFullScreen
                      aria-hidden="true"
                      tabIndex="-1"
                    />
                  ) : null}
                </span>
              )}
            </span>
          )}
          <span className="wp-block-zenblocks-button-basic-band" aria-hidden="true">
            <span className="wp-block-zenblocks-button-basic-band-color default"></span>
            <span className="wp-block-zenblocks-button-basic-band-color hover"></span>
            {(getBandPatternType(attributes, "pc") !== "none" ||
              getBandPatternType(attributes, "md") !== "none" ||
              getBandPatternType(attributes, "tb") !== "none" ||
              getBandPatternType(attributes, "sp") !== "none") && (
              <span
                className="wp-block-zenblocks-button-basic-band-pattern default"
                data-pattern-pc={getDirectBandPatternType(attributes, "pc") || getBandPatternType(attributes, "pc")}
                data-pattern-md={getDirectBandPatternType(attributes, "md") || getBandPatternType(attributes, "md")}
                data-pattern-tb={getDirectBandPatternType(attributes, "tb") || getBandPatternType(attributes, "tb")}
                data-pattern-sp={getDirectBandPatternType(attributes, "sp") || getBandPatternType(attributes, "sp")}
              ></span>
            )}
            {attributes.bandMediaType === "video" && attributes.bandVideoPoster && <span className="wp-block-zenblocks-button-basic-band-poster default" style={bandPosterInlineStyle}></span>}
            {attributes.bandMediaType !== "video" && <span className="wp-block-zenblocks-button-basic-band-image default"></span>}
            {attributes.bandMediaType === "video" && !!attributes.bandVideoUrl && (
              <span className="wp-block-zenblocks-button-basic-band-movie default">
                {bandVideoConfig.type === "file" ? (
                  <video
                    src={bandVideoConfig.fileUrl}
                    poster={attributes.bandVideoPoster || undefined}
                    style={bandVideoInlineStyle}
                    autoPlay
                    loop
                    muted
                    playsInline
                    preload="metadata"
                    aria-hidden="true"
                  />
                ) : isEmbedBandVideo ? (
                  <iframe
                    src={bandVideoConfig.embedUrl}
                    title="Band video"
                    style={bandIframeInlineStyle}
                    loading="eager"
                    referrerPolicy="strict-origin-when-cross-origin"
                    allow="autoplay; encrypted-media; fullscreen; picture-in-picture"
                    allowFullScreen
                    aria-hidden="true"
                    tabIndex="-1"
                  />
                ) : null}
              </span>
            )}
          </span>
          <span className="wp-block-zenblocks-button-basic-bg" aria-hidden="true">
            <span className="wp-block-zenblocks-button-basic-bg-overlay default"></span>
            <span className="wp-block-zenblocks-button-basic-bg-overlay hover"></span>
            {attributes.backgroundMediaType !== "video" && <span className="wp-block-zenblocks-button-basic-bg-image default"></span>}
            {attributes.backgroundMediaType === "video" && attributes.backgroundVideoPoster && <span className="wp-block-zenblocks-button-basic-bg-poster default" style={posterInlineStyle}></span>}
            {hasBackgroundVideo(attributes) && (
              <span className="wp-block-zenblocks-button-basic-bg-movie default">
                {backgroundVideoConfig.type === "file" ? (
                  <video
                    src={backgroundVideoConfig.fileUrl}
                    poster={attributes.backgroundVideoPoster || undefined}
                    style={videoInlineStyle}
                    autoPlay
                    loop
                    muted
                    playsInline
                    preload="metadata"
                    aria-hidden="true"
                  />
                ) : isEmbedBackgroundVideo ? (
                  <iframe
                    src={backgroundVideoConfig.embedUrl}
                    title="Background video"
                    style={iframeInlineStyle}
                    loading="eager"
                    referrerPolicy="strict-origin-when-cross-origin"
                    allow="autoplay; encrypted-media; fullscreen; picture-in-picture"
                    allowFullScreen
                    aria-hidden="true"
                    tabIndex="-1"
                  />
                ) : null}
              </span>
            )}
            <span className="wp-block-zenblocks-button-basic-bg-base-color default"></span>
            {(getBackgroundPatternType(attributes, "pc") !== "none" ||
              getBackgroundPatternType(attributes, "md") !== "none" ||
              getBackgroundPatternType(attributes, "tb") !== "none" ||
              getBackgroundPatternType(attributes, "sp") !== "none") && (
              <span
                className="wp-block-zenblocks-button-basic-bg-pattern default"
                data-pattern-pc={getDirectBackgroundPatternType(attributes, "pc") || getBackgroundPatternType(attributes, "pc")}
                data-pattern-md={getDirectBackgroundPatternType(attributes, "md") || getBackgroundPatternType(attributes, "md")}
                data-pattern-tb={getDirectBackgroundPatternType(attributes, "tb") || getBackgroundPatternType(attributes, "tb")}
                data-pattern-sp={getDirectBackgroundPatternType(attributes, "sp") || getBackgroundPatternType(attributes, "sp")}
              ></span>
            )}
          </span>
          {attributes.frameAnimation && attributes.frameAnimation !== "none" && <span className="wp-block-zenblocks-button-basic-frame" aria-hidden="true"></span>}
        </a>
      ) : (
        <button
          type={buttonType || "button"}
          aria-label={ariaLabel || undefined}
          data-click-id={trackingId || undefined}
          data-button-location={trackingLocation || undefined}
          className={
            attributes.icon ||
            attributes.iconPC ||
            attributes.iconMD ||
            attributes.iconTB ||
            attributes.iconSP ||
            (attributes.iconFrameUseIndividualSize ? attributes.iconFrameWidth > 0 || attributes.iconFrameHeight > 0 : attributes.iconFrameSize > 0)
              ? "has-icon"
              : ""
          }
        >
          <span className="wp-block-zenblocks-button-basic-content">
            {(attributes.icon ||
              attributes.iconPC ||
              attributes.iconMD ||
              attributes.iconTB ||
              attributes.iconSP ||
              (attributes.iconFrameUseIndividualSize ? attributes.iconFrameWidth > 0 || attributes.iconFrameHeight > 0 : attributes.iconFrameSize > 0)) && (
              <span
                className={`wp-block-zenblocks-button-basic-icon${
                  attributes.iconFrameSize > 0 || attributes.iconFrameSizePC > 0 || attributes.iconFrameWidth > 0 || attributes.iconFrameWidthPC > 0 || attributes.iconFrameHeight > 0 || attributes.iconFrameHeightPC > 0 || attributes.iconFrameBgColor || attributes.iconFrameBgColorPC || attributes.iconFrameBorderColor || attributes.iconFrameBorderColorPC ? " wrap_icon" : ""
                }${attributes.useResponsiveIcon ? " responsive-icon" : ""}`}
              >
                <span
                  className="default icon-pc"
                  dangerouslySetInnerHTML={{
                    __html:
                      attributes.iconPC || attributes.icon
                        ? renderSVGIcon(
                            attributes.iconPC || attributes.icon,
                            getCurrentIconColor(attributes.iconPC || attributes.icon, attributes.iconColorPC || attributes.iconColor, textColor),
                            attributes.iconStrokeWidth || 1.75,
                          )
                        : "",
                  }}
                />
                {renderAllIcons && (
                <span
                  className="default icon-md"
                  dangerouslySetInnerHTML={{
                    __html:
                      attributes.iconMD || attributes.iconPC || attributes.icon
                        ? renderSVGIcon(
                            attributes.iconMD || attributes.iconPC || attributes.icon,
                            getCurrentIconColor(attributes.iconMD || attributes.iconPC || attributes.icon, attributes.iconColorMD || attributes.iconColorPC || attributes.iconColor, textColor),
                            attributes.iconStrokeWidth || 1.75,
                          )
                        : "",
                  }}
                />
                )}
                {renderAllIcons && (
                <span
                  className="default icon-tb"
                  dangerouslySetInnerHTML={{
                    __html:
                      attributes.iconTB || attributes.iconMD || attributes.iconPC || attributes.icon
                        ? renderSVGIcon(
                            attributes.iconTB || attributes.iconMD || attributes.iconPC || attributes.icon,
                            getCurrentIconColor(
                              attributes.iconTB || attributes.iconMD || attributes.iconPC || attributes.icon,
                              attributes.iconColorTB || attributes.iconColorMD || attributes.iconColorPC || attributes.iconColor,
                              textColor,
                            ),
                            attributes.iconStrokeWidth || 1.75,
                          )
                        : "",
                  }}
                />
                )}
                {renderAllIcons && (
                <span
                  className="default icon-sp"
                  dangerouslySetInnerHTML={{
                    __html:
                      attributes.iconSP || attributes.iconTB || attributes.iconMD || attributes.iconPC || attributes.icon
                        ? renderSVGIcon(
                            attributes.iconSP || attributes.iconTB || attributes.iconMD || attributes.iconPC || attributes.icon,
                            getCurrentIconColor(
                              attributes.iconSP || attributes.iconTB || attributes.iconMD || attributes.iconPC || attributes.icon,
                              attributes.iconColorSP || attributes.iconColorTB || attributes.iconColorMD || attributes.iconColorPC || attributes.iconColor,
                              textColor,
                            ),
                            attributes.iconStrokeWidth || 1.75,
                          )
                        : "",
                  }}
                />
                )}
                <span
                  className="hover icon-pc"
                  dangerouslySetInnerHTML={{
                    __html:
                      attributes.iconPCHover || attributes.iconHover || attributes.iconPC || attributes.icon
                        ? renderSVGIcon(
                            attributes.iconPCHover || attributes.iconHover || attributes.iconPC || attributes.icon,
                            getCurrentIconColor(
                              attributes.iconPCHover || attributes.iconHover || attributes.iconPC || attributes.icon,
                              attributes.iconColorPCHover || attributes.iconColorHover || attributes.iconColorPC || attributes.iconColor,
                              attributes.textColorHover || textColor,
                            ),
                            attributes.iconStrokeWidthHover || attributes.iconStrokeWidth || 1.75,
                          )
                        : "",
                  }}
                />
                {renderAllIcons && (
                <span
                  className="hover icon-md"
                  dangerouslySetInnerHTML={{
                    __html:
                      attributes.iconMDHover || attributes.iconPCHover || attributes.iconHover || attributes.iconMD || attributes.iconPC || attributes.icon
                        ? renderSVGIcon(
                            attributes.iconMDHover || attributes.iconPCHover || attributes.iconHover || attributes.iconMD || attributes.iconPC || attributes.icon,
                            getCurrentIconColor(
                              attributes.iconMDHover || attributes.iconPCHover || attributes.iconHover || attributes.iconMD || attributes.iconPC || attributes.icon,
                              attributes.iconColorMDHover || attributes.iconColorPCHover || attributes.iconColorHover || attributes.iconColorMD || attributes.iconColorPC || attributes.iconColor,
                              attributes.textColorHover || textColor,
                            ),
                            attributes.iconStrokeWidthHover || attributes.iconStrokeWidth || 1.75,
                          )
                        : "",
                  }}
                />
                )}
                {renderAllIcons && (
                <span
                  className="hover icon-tb"
                  dangerouslySetInnerHTML={{
                    __html:
                      attributes.iconTBHover ||
                      attributes.iconMDHover ||
                      attributes.iconPCHover ||
                      attributes.iconHover ||
                      attributes.iconTB ||
                      attributes.iconMD ||
                      attributes.iconPC ||
                      attributes.icon
                        ? renderSVGIcon(
                            attributes.iconTBHover ||
                              attributes.iconMDHover ||
                              attributes.iconPCHover ||
                              attributes.iconHover ||
                              attributes.iconTB ||
                              attributes.iconMD ||
                              attributes.iconPC ||
                              attributes.icon,
                            getCurrentIconColor(
                              attributes.iconTBHover ||
                                attributes.iconMDHover ||
                                attributes.iconPCHover ||
                                attributes.iconHover ||
                                attributes.iconTB ||
                                attributes.iconMD ||
                                attributes.iconPC ||
                                attributes.icon,
                              attributes.iconColorTBHover ||
                                attributes.iconColorMDHover ||
                                attributes.iconColorPCHover ||
                                attributes.iconColorHover ||
                                attributes.iconColorTB ||
                                attributes.iconColorMD ||
                                attributes.iconColorPC ||
                                attributes.iconColor,
                              attributes.textColorHover || textColor,
                            ),
                            attributes.iconStrokeWidthHover || attributes.iconStrokeWidth || 1.75,
                          )
                        : "",
                  }}
                />
                )}
                {renderAllIcons && (
                <span
                  className="hover icon-sp"
                  dangerouslySetInnerHTML={{
                    __html:
                      attributes.iconSPHover ||
                      attributes.iconTBHover ||
                      attributes.iconMDHover ||
                      attributes.iconPCHover ||
                      attributes.iconHover ||
                      attributes.iconSP ||
                      attributes.iconTB ||
                      attributes.iconMD ||
                      attributes.iconPC ||
                      attributes.icon
                        ? renderSVGIcon(
                            attributes.iconSPHover ||
                              attributes.iconTBHover ||
                              attributes.iconMDHover ||
                              attributes.iconPCHover ||
                              attributes.iconHover ||
                              attributes.iconSP ||
                              attributes.iconTB ||
                              attributes.iconMD ||
                              attributes.iconPC ||
                              attributes.icon,
                            getCurrentIconColor(
                              attributes.iconSPHover ||
                                attributes.iconTBHover ||
                                attributes.iconMDHover ||
                                attributes.iconPCHover ||
                                attributes.iconHover ||
                                attributes.iconSP ||
                                attributes.iconTB ||
                                attributes.iconMD ||
                                attributes.iconPC ||
                                attributes.icon,
                              attributes.iconColorSPHover ||
                                attributes.iconColorTBHover ||
                                attributes.iconColorMDHover ||
                                attributes.iconColorPCHover ||
                                attributes.iconColorHover ||
                                attributes.iconColorSP ||
                                attributes.iconColorTB ||
                                attributes.iconColorMD ||
                                attributes.iconColorPC ||
                                attributes.iconColor,
                              attributes.textColorHover || textColor,
                            ),
                            attributes.iconStrokeWidthHover || attributes.iconStrokeWidth || 1.75,
                          )
                        : "",
                  }}
                />
                )}
              </span>
            )}
            <span className="wp-block-zenblocks-button-basic-text">
              {microText && <span className="wp-block-zenblocks-button-basic-text-micro">{microText}</span>}
              <span className="wp-block-zenblocks-button-basic-text-main">
                <span className="default">{needsCharWrapping ? renderTextWithChars(content) : content}</span>
                <span className="hover" aria-hidden="true">{needsCharWrapping ? renderTextWithChars(hoverText) : hoverText}</span>
              </span>
              {subText && <span className="wp-block-zenblocks-button-basic-text-sub">{subText}</span>}
            </span>
          </span>
          {hasThumbnailMedia(attributes) && (
            <span className="wp-block-zenblocks-button-basic-thumbnail" aria-hidden="true">
              <span className="wp-block-zenblocks-button-basic-thumbnail-overlay default"></span>
              {thumbnailOverlayHover && <span className="wp-block-zenblocks-button-basic-thumbnail-overlay hover"></span>}
              {attributes.thumbnailMediaType === "video" && attributes.thumbnailVideoPoster && <span className="wp-block-zenblocks-button-basic-thumbnail-poster default" style={thumbnailPosterInlineStyle}></span>}
              {attributes.thumbnailMediaType !== "video" && <span className="wp-block-zenblocks-button-basic-thumbnail-image default"></span>}
              {attributes.thumbnailMediaType === "video" && !!attributes.thumbnailVideoUrl && (
                <span className="wp-block-zenblocks-button-basic-thumbnail-movie default">
                  {thumbnailVideoConfig.type === "file" ? (
                    <video
                      src={thumbnailVideoConfig.fileUrl}
                      poster={attributes.thumbnailVideoPoster || undefined}
                      style={thumbnailVideoInlineStyle}
                      autoPlay
                      loop
                      muted
                      playsInline
                      preload="metadata"
                      aria-hidden="true"
                    />
                  ) : isEmbedThumbnailVideo ? (
                    <iframe
                      src={thumbnailVideoConfig.embedUrl}
                      title="Thumbnail video"
                      style={thumbnailIframeInlineStyle}
                      loading="eager"
                      referrerPolicy="strict-origin-when-cross-origin"
                      allow="autoplay; encrypted-media; fullscreen; picture-in-picture"
                      allowFullScreen
                      aria-hidden="true"
                      tabIndex="-1"
                    />
                  ) : null}
                </span>
              )}
            </span>
          )}
          <span className="wp-block-zenblocks-button-basic-band" aria-hidden="true">
            <span className="wp-block-zenblocks-button-basic-band-color default"></span>
            <span className="wp-block-zenblocks-button-basic-band-color hover"></span>
            {(getBandPatternType(attributes, "pc") !== "none" ||
              getBandPatternType(attributes, "md") !== "none" ||
              getBandPatternType(attributes, "tb") !== "none" ||
              getBandPatternType(attributes, "sp") !== "none") && (
              <span
                className="wp-block-zenblocks-button-basic-band-pattern default"
                data-pattern-pc={getDirectBandPatternType(attributes, "pc") || getBandPatternType(attributes, "pc")}
                data-pattern-md={getDirectBandPatternType(attributes, "md") || getBandPatternType(attributes, "md")}
                data-pattern-tb={getDirectBandPatternType(attributes, "tb") || getBandPatternType(attributes, "tb")}
                data-pattern-sp={getDirectBandPatternType(attributes, "sp") || getBandPatternType(attributes, "sp")}
              ></span>
            )}
            {attributes.bandMediaType === "video" && attributes.bandVideoPoster && <span className="wp-block-zenblocks-button-basic-band-poster default" style={bandPosterInlineStyle}></span>}
            {attributes.bandMediaType !== "video" && <span className="wp-block-zenblocks-button-basic-band-image default"></span>}
            {attributes.bandMediaType === "video" && !!attributes.bandVideoUrl && (
              <span className="wp-block-zenblocks-button-basic-band-movie default">
                {bandVideoConfig.type === "file" ? (
                  <video
                    src={bandVideoConfig.fileUrl}
                    poster={attributes.bandVideoPoster || undefined}
                    style={bandVideoInlineStyle}
                    autoPlay
                    loop
                    muted
                    playsInline
                    preload="metadata"
                    aria-hidden="true"
                  />
                ) : isEmbedBandVideo ? (
                  <iframe
                    src={bandVideoConfig.embedUrl}
                    title="Band video"
                    style={bandIframeInlineStyle}
                    loading="eager"
                    referrerPolicy="strict-origin-when-cross-origin"
                    allow="autoplay; encrypted-media; fullscreen; picture-in-picture"
                    allowFullScreen
                    aria-hidden="true"
                    tabIndex="-1"
                  />
                ) : null}
              </span>
            )}
          </span>
          <span className="wp-block-zenblocks-button-basic-bg" aria-hidden="true">
            <span className="wp-block-zenblocks-button-basic-bg-overlay default"></span>
            <span className="wp-block-zenblocks-button-basic-bg-overlay hover"></span>
            {attributes.backgroundMediaType !== "video" && <span className="wp-block-zenblocks-button-basic-bg-image default"></span>}
            {attributes.backgroundMediaType === "video" && attributes.backgroundVideoPoster && <span className="wp-block-zenblocks-button-basic-bg-poster default" style={posterInlineStyle}></span>}
            {hasBackgroundVideo(attributes) && (
              <span className="wp-block-zenblocks-button-basic-bg-movie default">
                {backgroundVideoConfig.type === "file" ? (
                  <video
                    src={backgroundVideoConfig.fileUrl}
                    poster={attributes.backgroundVideoPoster || undefined}
                    style={videoInlineStyle}
                    autoPlay
                    loop
                    muted
                    playsInline
                    preload="metadata"
                    aria-hidden="true"
                  />
                ) : isEmbedBackgroundVideo ? (
                  <iframe
                    src={backgroundVideoConfig.embedUrl}
                    title="Background video"
                    style={iframeInlineStyle}
                    loading="eager"
                    referrerPolicy="strict-origin-when-cross-origin"
                    allow="autoplay; encrypted-media; fullscreen; picture-in-picture"
                    allowFullScreen
                    aria-hidden="true"
                    tabIndex="-1"
                  />
                ) : null}
              </span>
            )}
            <span className="wp-block-zenblocks-button-basic-bg-base-color default"></span>
            {(getBackgroundPatternType(attributes, "pc") !== "none" ||
              getBackgroundPatternType(attributes, "md") !== "none" ||
              getBackgroundPatternType(attributes, "tb") !== "none" ||
              getBackgroundPatternType(attributes, "sp") !== "none") && (
              <span
                className="wp-block-zenblocks-button-basic-bg-pattern default"
                data-pattern-pc={getDirectBackgroundPatternType(attributes, "pc") || getBackgroundPatternType(attributes, "pc")}
                data-pattern-md={getDirectBackgroundPatternType(attributes, "md") || getBackgroundPatternType(attributes, "md")}
                data-pattern-tb={getDirectBackgroundPatternType(attributes, "tb") || getBackgroundPatternType(attributes, "tb")}
                data-pattern-sp={getDirectBackgroundPatternType(attributes, "sp") || getBackgroundPatternType(attributes, "sp")}
              ></span>
            )}
          </span>
          {attributes.frameAnimation && attributes.frameAnimation !== "none" && <span className="wp-block-zenblocks-button-basic-frame" aria-hidden="true"></span>}
        </button>
      )}
      {copySub && <span className="wp-block-zenblocks-button-basic-copy-sub"><span className="wp-block-zenblocks-button-basic-copy-sub-contents">{copySub}</span></span>}
    </div>
  );
  };
}

export default createButtonBasicSave({ optimizeIcons: true, optimizeText: true, optimizeDefaults: true });
