import{createStyleReact as e,createStyle as o}from"@gem-sdk/system";import{makeStyle as r,getSingleColorVariable as t,getResponsiveStyleShadowWithoutState as a,getPaddingGlobalSize as l,makeGlobalSizeWidthResponsive as p,makeGlobalSizeHeightResponsive as i,makeStyleResponsive as s,composeCornerCss as $,composeBorderCss as d}from"@gem-sdk/core";import{getArrowDisplayStyle as m,getArrowPositionStyle as n,getResponsiveSetting as c}from"./helpers.js";let getStyle=(g,b="liquid")=>{let{uid:w,vertical:h,showArrow:x,gapToEachSize:u,left:f,arrowBackgroundColor:k,arrowButtonSize:y,rootId:S,arrowBorder:z,arrowCorner:j,arrowCustomColor:q,arrowIconSize:v,arrowShadow:E}=g,T=r({bg:t(k)}),A=r({c:t(q)}),B=a(E,"box-shadow",E),C=c(z||{}),D=c(j||{}),F=l(y),G=c(v||{}),H=c(x||{}),I=p(y),J=i(y),K=s("w",G,"px"),L=s("h",G,"px"),M=s("d",m(H)),N=r(n({vertical:h,arrowType:H,gapToEachSize:u??"",left:!!f})),O={...T,...M,...N,...I,...J,...F,...B},P={...A,...K,...L},Q="react"===b?e(O):o(O),R="react"===b?e(P):o(P),U=`
      ${S?"."+S:""}.gp-carousel-arrow-${w} {
        ${$(D.desktop)}
      }
      ${S?"."+S:""}.gp-carousel-arrow-${w}::before {
        content: '';
        height: 100%;
        width: 100%;
        position: absolute;
        pointer-events: none;
        z-index: 10;
        ${d(C.desktop)}
        ${$(D.desktop)}
      }
      @media only screen and (max-width: 1024px) and (min-width: 768px) {
        ${S?"."+S:""}.gp-carousel-arrow-${w} {
          ${$(D.tablet)}
        }
        ${S?"."+S:""}.gp-carousel-arrow-${w}::before {
          ${d(C.tablet)}
          ${$(D.tablet)}
        }
      }
      @media only screen and (max-width: 768px) {
        ${S?"."+S:""}.gp-carousel-arrow-${w} {
          ${$(D.mobile)}
        }
        ${S?"."+S:""}.gp-carousel-arrow-${w}::before {
          ${d(C.mobile)}
          ${$(D.mobile)}
        }
      }
    `;return{buttonStyle:Q,buttonContentStyle:R,innerBorderCss:U}};export{getStyle};
