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