import{getWidthHeightGlobalSize as t,getPaddingGlobalSize as o,composeShadowCss as n,composeCornerCss as e,composeTypographyV2Css as a,composeTextHoverColorCss as r,composeBorderCss as i,composeBackgroundImageCss as d,getSingleColorVariable as p}from"@gem-sdk/core";let composeSize=(t,o,n=!0)=>`
    ${t?`width: ${t}${n?"!important;":""};`:""}
    ${o?`height: ${o}${n?"!important;":""};`:""}
  `,composeSpacing=(t,o)=>{let n=t&&"desktop"!==t?`-${t}`:"",e={top:o[`--pt${n}`],bottom:o[`--pb${n}`],left:o[`--pl${n}`],right:o[`--pr${n}`]};return`
    padding-top: ${e.top?`${e.top} !important;`:""};
    padding-bottom: ${e.bottom?`${e.bottom} !important;`:""};
    padding-left: ${e.left?`${e.left} !important;`:""};
    padding-right: ${e.right?`${e.right} !important;`:""};
  `},composeFontSize=t=>t?`font-size: ${t} !important;`:"",composeLineHeight=t=>t?`line-height: ${t} !important;`:"",composeLetterSpacing=t=>t?`letter-spacing: ${t} !important;`:"",composeTextAlign=t=>`${t?`text-align: ${t} !important;`:""}`,composeBackgroundStyle=(t,o)=>!t||o?.forceIgnore?"":"string"==typeof t&&t.includes("linear-gradient")?`background-image: ${t};`:`background-color: ${p(t)};`,getDeviceStyles=({uid:t,device:o,styles:p,composeGlobalSize:u})=>{let{backgroundColorV2:b,backgroundImage:h}=p||{},m={...h,hover:h?.hover?.image?h?.hover:h?.normal},s={...b,hover:b?.hover||b?.normal};return`
    .wrap__button--unbranded__${t} {
      ${composeTextAlign(p?.align?.[o])}
    }

    .wrap__button--unbranded__${t} .shopify-payment-button {
      width: 100%;
    }

    .wrap__button--unbranded__${t} .shopify-payment-button .shopify-payment-button__button--unbranded {
      width: 100%;
      text-transform: unset;
      ${"desktop"!==o?`
        ${composeLineHeight(p?.typo?.custom?.lineHeight?.[o])}
        ${composeFontSize(p?.typo?.custom?.fontSize?.[o])}
        ${composeLetterSpacing(p?.typo?.custom?.letterSpacing?.[o])}
      `:""}
      ${composeSpacing(o,u.padding)}
      ${composeSize(u.width[o]||"auto",u.height[o]||"auto",!1)}
      ${n({boxShadowValue:p?.boxShadowBtn?.normal,hasBoxShadow:p?.hasBoxShadowBtn?.normal})||""}
      ${e(p?.roundedBtnV2?.normal,!0)}
      ${"desktop"===o?a(p?.typo,!0):""}
    }

    .wrap__button--unbranded__${t} .shopify-payment-button .shopify-payment-button__button--unbranded:hover {
      ${n({boxShadowValue:p?.boxShadowBtn?.hover,hasBoxShadow:p?.boxShadowBtn?.hover?.type!=="none",important:!0})||""}
      ${r(p?.textColor,!0)};
      ${e(p?.roundedBtnV2?.hover,!0)}
    }

    .wrap__button--unbranded__${t} .shopify-payment-button .shopify-payment-button__button--unbranded::before {
      ${i(p?.borderBtnV2?.normal)}
      ${e(p?.roundedBtnV2?.normal)}
      ${composeBackgroundStyle(p?.backgroundColorV2?.normal,{forceIgnore:!!p?.backgroundImage?.normal?.image})}
      ${d(p?.backgroundImage,{device:o,state:"normal"})}
      ${n({boxShadowValue:p?.boxShadowBtn?.normal,hasBoxShadow:p?.hasBoxShadowBtn?.normal})||""}


    }

    .wrap__button--unbranded__${t} .shopify-payment-button .shopify-payment-button__button--unbranded:hover::before {
      ${p?.backgroundImage?.hover||p?.backgroundColorV2?.hover?"background-image : unset;":""}
      ${p?.borderBtnV2?.hover?.borderType!=="none"?i(p?.borderBtnV2?.hover):""}
      ${p?.roundedBtnV2?.hover?.radiusType!=="none"?e(p?.roundedBtnV2?.hover):""}
      ${s?.hover?composeBackgroundStyle(s?.hover,{forceIgnore:!!m?.hover?.image?.src}):""}
      ${m?.hover?.image?.src?d(m,{device:o,state:"hover"}):""}
      ${n({boxShadowValue:p?.boxShadowBtn?.hover,hasBoxShadow:p?.boxShadowBtn?.hover?.type!=="none",important:!0})||""}
    }
  `},getButtonStyles=({styles:n,uid:e})=>{let a={width:t("width",n?.globalSize),height:t("height",n?.globalSize),padding:o(n?.globalSize)},r=`
    .wrap__button--unbranded__${e} .shopify-payment-button {
      display: inline-block;
      min-height: unset !important;
    }

    .wrap__button--unbranded__${e} .shopify-payment-button div {
      width: 100%;
      margin-top: 0px !important;
    }

    .wrap__button--unbranded__${e} .shopify-payment-button .shopify-payment-button__more-options {
      display: none;
    }

    .wrap__button--unbranded__${e} .shopify-payment-button .shopify-payment-button__button--unbranded {
      max-width: 100%;
      min-width: unset;
      min-height: unset !important;
      background-color: unset !important;
      position: relative;
      border: none !important;
      margin: 0;
      z-index: 0;
      border-radius: unset;
      width: 100%;
      display: inline-flex;
      justify-content: center;
      align-items: center;
    }

    .wrap__button--unbranded__${e} .shopify-payment-button .shopify-payment-button__button--unbranded::before {
      content: "";
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none;
      z-index: -1;
      transition-duration: 0.2s;
    }

    .wrap__button--unbranded__${e} .shopify-payment-button .shopify-payment-button__button--unbranded::after {
      border-radius: 0;
      box-shadow: none;
    }

    .wrap__button--unbranded__${e} .shopify-payment-button .shopify-payment-button__button--unbranded::after:hover {
      border-radius: 0;
      box-shadow: none;
    }

    .wrap__button--unbranded__${e} .shopify-payment-button > div {
      max-width: 100%;
    }

    .wrap__button--unbranded__${e} .shopify-payment-button > div > div {
      max-width: 100%;
    }

    ${getDeviceStyles({device:"desktop",uid:e,styles:n,composeGlobalSize:a})}

    @media only screen and (max-width: 1024px) and (min-width: 768px) {
      ${getDeviceStyles({device:"tablet",uid:e,styles:n,composeGlobalSize:a})}
    }

    @media only screen and (max-width: 767px) {
      ${getDeviceStyles({device:"mobile",uid:e,styles:n,composeGlobalSize:a})}
    }
  `;return r};export{getButtonStyles};
